adding input to forum syntax error

Discussion in 'jQuery' started by caligrafx, Dec 22, 2010.

  1. #1
    I am looking to add a link to click on that will add and remove a input text field to the form.

    I can get it to work with out the "onclick" and "onblur" command in the line... but with them in there it kicks out "syntax error on the "a#add" click function input lines.

    Any help would be great!

    Thanks,
    Adam

    Code:
    <script type="text/javascript">
    
    $(function() { // when document has loaded
    
    	var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
    
    	$('a#add').click(function() { // when you click the add link
    		$('<input type="text" class="text-input" value="Part #" onclick="if(this.value=='Part #') { this.value=''; }" onblur="if(this.value=='') { this.value='Part #'; }" /><input type="text" class="text-input" value="Item Description" onclick="if(this.value=='Item Description') { this.value=''; }" onblur="if(this.value=='') { this.value='Item Description'; }" /><br />').appendTo('body'); // append (add) a new input to the document.
    // if you have the input inside a form, change body to form in the appendTo
    		i++; //after the click i will be i = 3 if you click again i will be i = 4
    	});
    
    	$('a#remove').click(function() { // similar to the previous, when you click remove link
    	if(i > 1) { // if you have at least 1 input on the form
    		$('input:last').remove(); //remove the last input
    		i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
    	}
    	});
    
    	$('a.reset').click(function() {
    	while(i > 2) { // while you have more than 1 input on the page
    		$('input:last').remove(); // remove inputs
    		i--;
    	}
    	});
    
    });
    </script>
    Code (markup):
     
    caligrafx, Dec 22, 2010 IP
  2. ThePHPMaster

    ThePHPMaster Well-Known Member

    Messages:
    737
    Likes Received:
    52
    Best Answers:
    33
    Trophy Points:
    150
    #2
    You need to escape your apostrophes:

    
    $('<input type="text" class="text-input" value="Part #" onclick="if(this.value==\'Part #\') { this.value=\'\'; }" onblur="if(this.value==\'\') { this.value=\'Part #\'; }" /><input type="text" class="text-input" value="Item Description" onclick="if(this.value==\'Item Description\') { this.value=\'\'; }" onblur="if(this.value==\'\') { this.value=\'Item Description\'; }" /><br />').appendTo('body'); // append (add) a new input to the document.
    
    Code (markup):
     
    ThePHPMaster, Dec 22, 2010 IP
  3. caligrafx

    caligrafx Active Member

    Messages:
    137
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    83
    #3
    Oh yeah that makes sense... much like the RTML complex variables! Thanks for the help!
     
    caligrafx, Dec 23, 2010 IP
  4. caligrafx

    caligrafx Active Member

    Messages:
    137
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    83
    #4
    caligrafx, Dec 23, 2010 IP