Working With Dynamically Created Inputs

Question

I have a dynamic form that you can add elements. Like, you type a name, and then if you have to write a new name, you click on 'Add Name', and another textbox appears.

Their names are names[] . I can process those inputs with PHP on the server-side. However, I want to make a calculation with those inputs, like writing all of them on the page as the user types.

However, because those inputs, those textboxes are created dynamically, Javascript only selects the first textbox with the name name[] .

Let me make it clear. This way it'll be better. I got a textbox. I input age in there. If I want to enter a new age, I click 'Add Age' button, and a new input box pops out. I write the new age value. And as I type, on a 3rd textbox, the average of those age values get printed. But because of those input boxes, with names ages[] are created on the execution time (not the compile time, I'm not sure these are the appropriate words for those. Probably not, because nothing is compiling? - or is it?), I can't process them.

What must I do to solve this problem?

I used both

$('input[name=ages\\[\\]]').change(function(){ 
 console.log('1');
});

and

$('input[name=ages\\[\\]]').on('input', function() {
 console.log('2');
});

but it didn't work.

Thanks in advance.

Answer 1

There's no need to escape the square brackets (though you should enclose the whole field name in double quotes). This works for me:

$('input[name="names[]"]').on('change', function(){
    console.log($(this).val());
});

Here's a jsfiddle demonstrating: http://jsfiddle.net/t7J5t/

Your problem is actually probably related to the fact that you're adding the fields dynamically. The way you're using your selector will only work on the fields that already exist . Fields that are added after that selector will not be picked up. What you want to do, then, is put the selector inside the .on , like this:

$('.container').on('change', 'input[name="names[]"]', function(){
    console.log($(this).val());
});

This will bind the listener to the container, not the fields (just make sure your fields get added inside of the container; you can call it whatever you want).

Incidentally, there's no reason you have to restrict yourself from using the name attribute of fields when using jQuery selectors. For example, you could use a class:

<div class="container">
    <input class="age" name="ages[]">
    <input class="age" name="ages[]">
    <!-- ... as many more as needed, added dynamically is OK ... -->
</div>
<script>
    $(document).ready(function(){
        $('.container').on('change', 'input.age', function(){
            console.log($(this).val());
        });
    });
</script>

Here's a sample of it in action, where you can dynamically add fields, and it calculates the average:

http://jsfiddle.net/t7J5t/1/

Answer 2

Try to use:

$(document).on('change', 'input[name=ages\\[\\]]', function() { 
    console.log('2');
});