Html-форма с динамическими входами не имеет текста для отправки

Question

Мне удалось создать форму, которая позволит пользователю добавлять дополнительные записи, когда они нажимают клавишу ввода (вместо отправки формы). Все выглядит хорошо, за исключением случаев, когда функция отправки окончательно вызывается, все элементы формы сообщают «неопределенные» значения.

Вот 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> 

Вот 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(); 
} 

А вот скрипку, который демонстрирует проблему.

JSFiddle

Спасибо за любые подсказки

Answer 1

Использование .val(), потому что вы используете селектор JQuery, в котором .value не определен.

Demo

Ваш новый 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(); 
}