Setting JavaScript variable with click event for dynamic form

Question

I have some PHP which outputs JavaScript. I need to set the id dynamically. The following code breaks on the 3rd line because of the use of the i variable. This I expect to be a simple problem with the quotation marks but I could be wrong.

$html .='$("#add").click(function (e) {';

    $html .= 'var i=0;';

    //Append a new row of code to the "#items" div
    $html .='$("#items").append(\'<div><input name=\"input[]\" type=\"text\" id=\"itin_form_'+i+'\" /><button class=\"delete\">Delete</button></div>\'); i++; });';

Can anyone see why this code fails?

Is there a specific reason you need to do it this way and not through JavaScript/jQuery directly ? — Maximus2012
– Maximus2012, Commented Jun 7, 2016 at 21:32
Yes, I'm having to return $html at the end of a function, I'd prefer to do it another way but looks like I'm going to be forced to do it like this. — user1532669
– user1532669, Commented Jun 7, 2016 at 23:02
@user1532669 I found the issue first. Anyway, glad that it got solved. Did you see my answer? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jun 8, 2016 at 9:12

Marc Compte · Accepted Answer · 2016-06-07 21:55:19Z

3

Does this work?

$html .= 'var i=0;';
$html .='$("#add").click(function (e) {';
 //Append a new row of code to the "#items" div
$html .='$("#items").append(\'<div><input name="input[]" type="text" id="itin_form_\'+i+\'" /><button class="delete">Delete</button></div>\'); i++; });';

When escaped to Javascript it should return:

var i=0;
$("#add").click(function (e) {
    $("#items").append('<div><input name="input[]" type="text" id="itin_form_'+i+'" /><button class="delete">Delete</button></div>'); 
    i++; 
});

edited Jun 7, 2016 at 21:55

answered Jun 7, 2016 at 21:47

Marc Compte

4,8592 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marc Compte Over a year ago

I'll help you even further. There is no need for escaping the double quotes, since they are in a string that's being defined with single quotes.

Praveen Kumar Purushothaman Over a year ago

Yes, I understood that already and updated accordingly buddy. :D Check. :D

Praveen Kumar Purushothaman · Accepted Answer · 2016-06-07 21:56:06Z

The problem here is, whenever you click, the value of i gets initialized to 0. It is indeed a simple silly mistake. Your code gives you this result:

$("#add").click(function (e) {
    var i=0;
    $("#items").append('<div><input name="input[]" type="text" id="itin_form_'+i+'" /><button class="delete">Delete</button></div>'); 
    i++; 
});

But it supposed to have something like this:

var i = 0;
$("#add").click(function (e) {
    $("#items").append('<div><input name="input[]" type="text" id="itin_form_'+i+'" /><button class="delete">Delete</button></div>'); 
    i++; 
});

See the placement of var i = 0; above. So your code should be:

$html .= 'var i=0;';
$html .='$("#add").click(function (e) {';
 //Append a new row of code to the "#items" div
$html .='$("#items").append(\'<div><input name="input[]" type="text\\" id=\"itin_form_\'+i+\'" /><button class="delete">Delete</button></div>\'); i++; });';

You don't need to escape " in the above code. :)

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

There's many issues with your code to begin with:

Variable `var i=0` is declared inside the function so it's always getting reset and never going to increase over 1.

Solution: you have to declare it only once at the page load, e.g. in a script tag in your <head> section or inside a jquery document ready call. I showed an example below.

Please get rid of all these escape characters by using PHP nowdoc:

Here's an example test.php tested and working I created myself using your javascript code as-is (I just removed all the escape characters to make it more readable):

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div id="items"></div>
<input type="button" id="add" value="Add" />

<?php

$str =
<<<'EOT'
<script>
/* Start of Nowdoc
   you can paste javascript code in here as-is!
*/
var i=0; // notice how I declared this outside of add.click
$("#add").click(function (e) {
    $("#items").append('<div><input name="input[]" type="text" id="itin_form_'+i+'" /><button class="delete">Delete</button></div>');
    i++;
}
);
/* End of Nowdoc */
</script>
EOT;


echo $str;

?>

Output:

Maybe you're just forgetting to include the jquery library.

Add this to your <head> section:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 8, 2016 at 3:52

Wadih M.

13.5k7 gold badges52 silver badges60 bronze badges

1 Comment

Wadih M. Over a year ago

@PraveenKumar: For other people that will fall on that answer on day and find something useful for themselves :)

Collectives™ on Stack Overflow

Setting JavaScript variable with click event for dynamic form

3 Answers 3

2 Comments

Comments

Variable `var i=0` is declared inside the function so it's always getting reset and never going to increase over 1.

Please get rid of all these escape characters by using PHP nowdoc:

Maybe you're just forgetting to include the jquery library.

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Variable var i=0 is declared inside the function so it's always getting reset and never going to increase over 1.

Please get rid of all these escape characters by using PHP nowdoc:

Maybe you're just forgetting to include the jquery library.

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

Variable `var i=0` is declared inside the function so it's always getting reset and never going to increase over 1.