帶有動態輸入的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(); 
}