2 questions regarding Javascript & Jquery

Question

Please take a look at the code below. This function is used to add more text input when user click con a button. I don't understand 2 things.

Why we need this? var i = $('#p_scents p').size() + 1; I don't understand what it is used for. I tested and see that the function still works as long as you define var i. I'm not sure if $('#p_scents p').size() + 1; is necessary here.
Why return false; in both 2 functions?

http://jsfiddle.net/jaredwilli/tzpg4/4/

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

The answer to your second question, if you're asking what `return false` within jQuery does, can be found here: [event.preventDefault() vs. return false](http://stackoverflow.com/a/1357151/691711) — zero298, Feb 06 '16 at 05:26

score 1 · Answer 1 · answered Feb 06 '16 at 05:28

i looks to be tracking the number of items on the page. It's initialized to match how many items are on the page when it first loads. That's the purpose of i = $('#p_scents p').size() + 1;.

The return false causes the default behavior of the clicks to not occur. This is important, for example, if you have a click handler on a link, and you don't want clicking on them to go to the href of the link.

Amar Singh · Accepted Answer · 2016-02-06T05:53:37.140

1

var i = $('#p_scents p').size() + 1;

Above code must have made sense if you were using var i to give unique ID for dynamically added contents ,since the ID's should be always unique (then you need to change the selector of size() too).

Explanation :

size() returns how many #p_scents p (selector) you have in page (say 1)

now you are adding 1 to it so var i becomes 2 Now for the new input type text added by you is assigned by a unique name "p_scnt_' + i +'" i.e. p_scnt_2.

So what I was telling is DOM should always have unique ID , therefore you should use var i value to give a unique ID .

Like this

$('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i +'" size="20" ...

In your code you have used i variable to give a unique name.

about return false; , its not at all required there since there is nothing in the code which you dont want to follow after click event. You can use return false in an onclick event to stop the browser from processing the rest of the execution stack, which includes following the link in the href attribute.

Adding to that , you dont need to check if( i > 2 ) { in remove button click because value will be always greater than 2 for every remove button on page. Since at the time of adding a remove button dynamically you always increment var i value from 2

edited Feb 06 '16 at 05:53

answered Feb 06 '16 at 05:33

Amar Singh

5,464
2
26
55

Could you please explain to me what the size() function return? – Louis Tran Feb 06 '16 at 05:36
@LouisTran : can you please read my answer again ,, its edited – Amar Singh Feb 06 '16 at 05:47
Thank you, I understand that each field need a unique name and by this way we can create a unique ID for them. However, it doesn't make sense to me because the names are not consistent. The first field's name is `p_scnt` but the extra one starts from `p_scnt_2`. Why it starts from `2`? When you write a function to get data from these fileds. Its gonna add extra work instead of a loop start from `0` to `n` – Louis Tran Feb 06 '16 at 05:59
the first name is `p_scnt` because that is the name you have given in the html... check your html sir .... there you have given ID `p_scnt ` .... and the next input you are adding from javascript and you are adding `var i ` value to new `p_scnt ` input ,,, so it next comes with `p_scnt _2` name – Amar Singh Feb 06 '16 at 06:05
If you want it to be consistent , the input name in `HTML` should be `p_scnt _1` and not `p_scnt` ... so now the next will be `p_scnt_2` – Amar Singh Feb 06 '16 at 06:07
I understand. This code is not mine. It comes from an expert who are better than me. I just don't understand why he wrote the code like that. Anyway, thank you very much for the details. – Louis Tran Feb 06 '16 at 06:10
great ! .. I like the effort your making... you will also be an expert ..no doubt...and i think you are more smarter than your expert coder ... because you got him there.. – Amar Singh Feb 06 '16 at 06:14

2 questions regarding Javascript & Jquery

2 Answers2