양식 데이터를 배열에 저장 하시겠습니까?

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 내부의 각 입력을 반복하고 이름을 업데이트해야합니다.

$('#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); 

    }); 

Example

너무 레이블의 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();