带有动态输入的HTML表单没有提交文字

Question

我设法创建了一个表单，当用户点击回车键（而不是提交表单）时，用户可以添加更多条目。它看起来都很好，除非最后调用submit函数时，所有表单元素都会报告“未定义”值。

下面是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()，因为您使用在其中没有定义.value一个jQuery选择。

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