How to deal with value of text input created dynamically?

Question

Here's a link

    <form onsubmit="return false"></form>
<label for="quantity">qantity</label>
<select name="quantity">
    <script>
        for (var i = 1; i < 81; i++) {
                document.write("<option value='"+i+"'>"+i+"</option>");
            };
    </script>
</select>
<button id="next">next</button>
<form id="itemform" onsubmit="return false"></form>
<script>
$('#next').click(function(){
    var quantity = ($('select[name=quantity]').val());
    $('#itemform').html("");
    for (var i = 0; i < quantity; i++) {
        $('#itemform').append("<label for='itemname"+i+"'>itemname</label><br><input type='text' name='itemname"+i+"' id='itemname"+i+"'><br><label for='itemprice"+i+"'>itemprice</label><br><input type='text' name='itemprice"+i+"' id='itemprice"+i+"'><br><br>");
    };
    $('#itemform').append("<button id='submit'>submit</button>");
});
$('#submit').click(function(){
    var item = {};
    $('input[type=text]').each(function(){
        var key = $(this).attr('name');
        var value = $(this).val();
        item [key] = value;
    });
    console.log(item)
});

It creates text inputs as many as selected.

And then, it makes object like {itemname1 : "an awesome thing", ...}.

Creating input works very well but it doesn't make object.

It makes object input that doesn't created dynamically.

    <form onsubmit="return false">
    <input type="text" name="first">
    <input type="text" name="second">
    <input type="submit" id="submit">
</form>
<p id="res"></p>
<script>
$('#submit').click(function(){
    var item = {};
    $('input[type=text]').each(function(){
        var key = $(this).attr('name');
        var value = $(this).val();
        item [key] = value;
    });
    console.log(item)
});
</script>

Why doesn't it work as I expected?

Answer 1

$('#submit') doesn't exist in your example. I replaced it with $('#itemform').submit() instead, and it seems to be logging a giant object. See the updated jfiddle here .

$('#itemform').submit(function(e){
    e.preventDefault();
    var item = {};
    $('input[type=text]').each(function(){
        var key = $(this).attr('name');
        var value = $(this).val();
        item [key] = value;
    });
    console.log(item)
});

Also, if you're looking at improving how items are stored, I updated the jsfiddle again here to show you how you can group items:

$(document).ready(function() {
    $('#next').click(function(){
        var quantity = ($('select[name=quantity]').val());
        $('#itemform').html("");
        for (var i = 0; i < quantity; i++) {
            $('#itemform').append("<div class='item' data-item='" + i + "'><label for='itemname"+i+"'>itemname</label><br><input type='text' name='name' id='itemname"+i+"'><br><label for='itemprice"+i+"'>itemprice</label><br><input type='text' name='price' id='itemprice"+i+"'><br><br></div>");
        };
        $('#itemform').append("<button id='submit'>submit</button>");
    });
    $('#itemform').submit(function(e){
        e.preventDefault();

        var items = {};
        $('#itemform div.item').each(function(){

            var item = {};
            $(this).find('input[type=text]').each(function() {     
                var key = $(this).attr('name');
                var value = $(this).val();
                item [key] = value;
            });
            items[$(this).data('item')] = item;
        });
        console.log(items)
    });
});

This yields a much better object you can work with:

{
  "0": {
    "name": "item1name",
    "price": "item1price"
  },
  "1": {
    "name": "item2name",
    "price": "item2price"
  },
  "2": {
    "name": "item3 here",
    "price": "item3 has a big price"
  }
}

Answer 2

Don't attach your processing function to your form's submit button's click event. Instead, use the form's submit event.

Also, even though it doesn't make a difference syntax wise, for readability's sake, you might want to add a ";" after "console.log(item)".

$('#itemform').submit(function(){
    var item = {};
    $('input[type=text]').each(function(){
        var key = $(this).attr('name');
        var value = $(this).val();
        item [key] = value;
    });
    console.log(item);
    return false;
});

Also, no need for a onSubmit property on your form in your case, just return "false" with the processing function attached to your form's submit event.

<form id="itemform"></form>

See the updated fiddle here.