Html form with dynamic inputs have no text on submit

Question

I managed to make a form that will let the user add more entries when they hit the enter key (instead of submitting the form). It all looks good, except when the submit function is finally called, all the form elements report "undefined" values.

Here is the html:

<form id="addItemForm" method="post" action="">
    <p id="form_list_parent">
       <input id="form_list" />
       <br/>
    </p>
   <input type="button" id="additembutton" value="add item" onclick="addAnotherItem()" />
   <br/>
   <input type="button" id="submit_button" value="Submit" onclick='dosubmit()' />
</form>

Here is the javascript/jquery:

function dosubmit() {
    $('#addItemForm').submit();
}

$(document).ready(function () {
    //this is intended to prevent enter key from submitting the form
    $('#addItemForm').bind('keydown', function (e) {
        if (e.keyCode == 13 || e.which == 13) {
            e.preventDefault();
            e.stopPropagation();
            var addbtn = $('#additembutton');
            $(addbtn).click();
            return false;
        }
    });
    $('#addItemForm').submit(function (ev) {
        ev.preventDefault(); // to stop the form from submitting
        log("made it to the form submit function");
        var varz = [];
        var i = 0;
        $('#form_list_parent').find('input').each(function () {
            log("INPUT: " + i);
            //log(dump($(this)));
            var txt = $(this).value;
            log(txt); // always comes back 'undefined' ??
            varz.push(txt);
            i += 1;
        });
        /* Validations go here */
        //this.submit(); // only submit If all the validations succeeded
    });
});

function addAnotherItem() {
    var input = document.createElement("input");
    input.type = "text";
    input.id = "dyntext";
    input.name = input.id;
    input.value = "";
    var br = document.createElement("br");
    $('#form_list_parent').append(input);
    $('#form_list_parent').append(br);
    $(input).focus();
}

And here is a fiddle that demonstrates the problem.

JSFiddle

Thanks for any clues

Answer 1

Use .val(), because you're using a jQuery selector in which .value is not defined.

Demo

Your new JavaScript/JQuery:

function dosubmit() {
    $('#addItemForm').submit();
}

$(document).ready(function () {
    //this is intended to prevent enter key from submitting the form
    $('#addItemForm').bind('keydown', function (e) {
        if (e.keyCode == 13 || e.which == 13) {
            e.preventDefault();
            e.stopPropagation();
            var addbtn = $('#additembutton');
            $(addbtn).click();
            return false;
        }
    });
    $('#addItemForm').submit(function (ev) {
        ev.preventDefault(); // to stop the form from submitting
        log("made it to the form submit function");
        var varz = [];
        var i = 0;
        $('#form_list_parent').find('input').each(function () {
            log("INPUT: " + i);
            //log(dump($(this)));
            var txt = $(this).val();
            log(txt); // always comes back 'undefined' ??
            varz.push(txt);
            i += 1;
        });
        /* Validations go here */
        //this.submit(); // only submit If all the validations succeeded
    });
});

function addAnotherItem() {
    var input = document.createElement("input");
    input.type = "text";
    input.id = "dyntext";
    input.name = input.id;
    input.value = "";
    var br = document.createElement("br");
    $('#form_list_parent').append(input);
    $('#form_list_parent').append(br);
    $(input).focus();
}