將表單數據存儲在數組中？

Question

需要幫助將數據存儲在數組中。

該窗體可以顯示其他字段的選項。我如何獲得額外的字段值以顯示在數據數組中。

<form id="myForm"> 
    <div id="input1" style="margin-bottom:4px;" class="clonedInput"> 

     <p>Please Enter Your First Name Last Name</p> 
     <div style="border:1px solid black;padding:5px"> 
      <label for="first1">first:</label> 
      <input type="text" name="first1" id="first1" /><br /> 

      <label for="last1">last:</label> 
      <input type="text" name="last1" id="last1" /><br /> 
     </div> 

     <p>Please Enter Your Address</p> 
     <div style="border:1px solid black;padding:5px">  
      <label for="add1">address:</label> 
      <input type="text" name="add1" id="add1" /><br /> 

      <select class="period" id="hour1" name="hour1">           
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 
       <option value="7">7</option> 
       <option value="8">8</option> 
       <option value="9">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12" selected>12</option> 
      </select> 
     </div> 
    </div> 

    <div> 
     <input type="button" id="btnAdd" value="add another name" /> 
    </div> 

    <div style="padding-top:30px"> 
     <input type="button" id="submit" value="submit to Object" /> 
    </div> 
</form> 

var storeData = {   
    "firstname": "", 
    "lastname": "",   
    "address": "", 
    "hour": "" 
}; 

$('#btnAdd').click(function() { 
    var num = $('.clonedInput').length; 
    var newNum = new Number(num + 1); 

    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);   
    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); 

    $('#input' + num).after(newElem); 

    }); 

$('#submit').click(function() { 

    var firstname = $('#first1').val(); 
    var lastname = $('#last1').val(); 
    var address = $('#add1').val(); 
    var hour = $('#hour1').val(); 

    storeData.firstname = firstname; 
    storeData.lastname = lastname; 
    storeData.address = address; 
    storeData.hour = hour;  

    console.log(storeData); 
}); 

這是我的工作示例。

http://jsfiddle.net/FFueC/8/

注意第一字段的值在數據數組中設置但是當你添加額外的領域，卻並非如此。

Answer 1

檢查新添加的元素。他們都有相同的名字;我不認爲你是克隆人正在按預期工作。您必須遍歷克隆的DIV中的每個輸入並更新名稱。

Example

$('#btnAdd').click(function() { 
    var num = $('.clonedInput').length; 
    var newNum = new Number(num + 1); 

    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);   
    newElem.find('input').each(function() { 
     $(this).attr('id', 'name' + newNum).attr('name', 'name' + newNum); 
    }); 

    $('#input' + num).after(newElem); 

    }); 

不要忘記過更新標籤的for屬性。

Answer 2

您可以使用.serializeArray()這將創造所有表單輸入的對象：

$('#submit').click(function() { 
    var data = $('#myForm').serializeArray(); 
    for(i in data){ 
     console.log(data[i]); 
    } 
}); 

jsfiddle

Answer 3

使用

var formData = $('#myForm').searialize();