jQuery form input into an array not working

Question

I'm working on a game and there is a form input where the user enters the number of characters. Once this happens more inputs appear for each character's name. My problem right now is reading those names into an array.

When the new inputs are created also a new button called nameButton is created and that is my issue, when I attempt to click that nothing happens when the values should be stored in an array. I put a prompt at the end of the function just to check and that does not even get called.

If you all have any suggestions please let me know here is the jsFiddle

    function nameRecording(names,$this){
    var addRows='<tr id=newRows>';
    for(var i =1; i<=names; i++)
    { var nearTr=$this.closest('tr');
            addRows=addRows+'<td>Name one:</td><td><form><input type="text" name="charcItem" class = "newR"/></form></td>';
    }
    addRows=addRows+'<td><div class="button" id="nameButton"> Add! </div></td></tr>';
    nearTr.after(addRows);
};    
$('#nameButton').click(function(){
    names=$(".newR").map(function(){
        return $(this).val();
    });
    prompt(names);
});

And there are some of my functions.

possible duplicate of jQuery - Click event doesn't work on dynamically generated elements — Barmar
– Barmar, Commented Jul 11, 2013 at 2:16
Definitely not a duplicate @Barmar, my issue is with functionality past the click function. — bala
– bala, Commented Jul 11, 2013 at 2:28
The answer you accepted mainly just solves the click function. — Barmar
– Barmar, Commented Jul 11, 2013 at 2:34

PSL · Accepted Answer · 2013-07-11 02:19:17Z

2

Try this way:

$(".form").on('click', '#nameButton', function () {
    names = $(".newR").map(function () {
        return this.value;
    }).get();
    prompt(names);
});

You can use event delegation using on for dynamic elements
You need to do a .get() on .map() result to convert the collection object into array.

Demo

answered Jul 11, 2013 at 2:19

PSL

124k21 gold badges257 silver badges243 bronze badges

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

3 Comments

bala Over a year ago

You're a live saver, by the way, will I have to convert these to int's if I plan on using them as so?

bala Over a year ago

But say I wanted to use this for their ages, would I have to convert to int

PSL Over a year ago

Yeah better to do so, you can just do return +this.value; inside the map. Prefix it with unary plus or just use parseInt(this.value, 10). If it cannot be converted to integer it will return NaN

Collectives™ on Stack Overflow

jQuery form input into an array not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related