Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts

    JQuery editable input fields

    I have a script for taking static text then being able to edit it on the fly by making it an input field. Works great except how can I make it for multiple fields?

    Each time I change the text all of them change, which I understand because all are named the same class. Any help or suggestions are very helpful. Thanks.

    Code:
    $(document).ready(function() {	
    	$("div.edit").click(function() {		
    		if ($(this).children('input').length == 0) {		
    		var inputbox = "<input type='text' class='inputbox' value=\""+$(this).text()+"\">";
    			$(this).html(inputbox);
    			$("input.inputbox").focus();
    			$("input.inputbox").blur(function() {
    				var value = $(this).val();
    				$(".edit").text(value);
    			});
    		}
    	});
    });
    Code:
    <tr>
    					<td><div class="edit">Home</div></td>
    					<td> <a href=""><img src="_gfx/cross.png" /></a></td>
    				
    				</tr>
    				
    				<tr class="odd">
    					<td><div class="edit">Products</div></td>
    					<td> <a href=""><img src="_gfx/cross.png" /></a></td>
    				
    				</tr>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,882
    Thanks
    56
    Thanked 539 Times in 536 Posts
    Code:
    $(document).ready(function() {    
        $("div.edit").click(function() {        
            if ($(this).children('input').length == 0) {        
            var inputbox = "<input type='text' class='inputbox' value=\""+$(this).text()+"\">";
                $(this).html(inputbox);
                $(".inputbox").focus();
                $(".inputbox").blur(function() {
                    var value = $(this).val();
                    $(this).parent().text(value);
                });
            }
        });
    });​
    Last edited by xelawho; 06-01-2012 at 07:37 PM.

  • Users who have thanked xelawho for this post:

    jcdevelopment (06-01-2012)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •