объект из формы данные не обрабатываются правильно

Question

У меня есть эта форма, которую я пытаюсь обработать. Это ваша основная форма адреса. Когда он отправляется, отправлю его в скрипт обработки внизу. Проблема, которая продолжает возникать, заключается в том, что, когда я отправляю форму, сценарий просто повторяет первый адрес, который снова и снова равен суммам различных адресных данных, которые были введены. Я использую функцию .each для перемещения входов, а затем помещаю их в функцию, которая превращает данные в объект и сохраняет его в массив. Затем я обрабатываю эти данные позже.

Ниже приводится форма, которую я использую ниже. Я почти уверен, что здесь нет ничего плохого, единственное, о чем я мог подумать, это то, что имя мешает классу, но я не вижу, чтобы это происходило в любой момент, учитывая, что я никогда не называю это имя, и использую вызов ajax для получения моих данных на стороне сервера. Обратите внимание, что это фрагмент гораздо большей формы, поэтому, пожалуйста, не указывайте, что мне не хватает тегов формы.

<span class='address-form'> 
     <div class='row'> 

      <div class='form-group'> 
       <div class='col-md-6'> 
         <label>Street Name and Address</label> 
         <input type='text' class='form-control address not-empty' name='adress[]' value="<=$address?>"> 
          </div> 
         </div> 
        </div> 
        <div class='row'> 
         <div class='form-group'> 
          <div class='col-md-6'> 

           <input type='text' class='form-control address2' name='address2[]'> 
          </div> 
         </div> 
        </div> 
        <div class='row'> 
         <div class='form-group'> 
          <div class='col-md-3'> 
           <label>City</label> 
           <input type='text' class='form-control city not-empty' name='city[]' value="<?=$city?>"> 
          </div> 
          <div class='col-md-3'> 
           <label>State</label> 
           <select class='form-control state not-empty' name='state[]' value="<?=$state?>"> 
            <option value="" selected>--State--</option> 
            <?=listStates($state, $us_states)?> 
           </select> 
          </div> 
          <div class='col-md-2'> 
           <label>Zip</label> 
           <input type='text' class='form-control zip not-empty' name='zip[]' maxlength='5' value="<?=$zip?>"> 
          </div> 
         </div> 
        </div> 
        <div class='row'> 
         <div class='form-group'> 
          <div class='col-md-3'> 
           <label>From</label> 
           <div class='input-group app-input'> 
            <select class='form-control app-md-input addr_from_month not-empty' name='addr_from_month[]'> 
             <option value="" selected>mm</option> 
             <? 
             for($i = 1; $i < 13; $i++){ 
              print "<option value='".$i."'>$i</option>"; 
             } 
             ?> 
            </select> 
            <select class='form-control app-md-input addr_from_year not-empty' name='addr_from_year[]'> 
             <option value="" selected>yyyy</option> 
             <? 
             $year = date("Y"); 
             for($i = $year; $i > ($year - 25); $i--){ 
              print "<option value=\"$i\">$i</option>\n"; 
             } 
             ?> 
            </select> 
            <span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span> 

           </div> 
          </div> 
          <div class='col-md-3'> 

           <label>To</label> 
           <div class='input-group app-input'> 
            <select class='form-control app-md-input addr_to_month not-empty' name='addr_to_month[]'> 
             <option value="" selected>mm</option> 
             <? 
             for($i = 1; $i < 13; $i++){ 
              print "<option value='".$i."'>$i</option>"; 
             } 
             ?> 
            </select> 
            <select class='form-control app-md-input addr_to_year not-empty' name='addr_to_year[]'> 
             <option value="" selected>yyyy</option> 
             <? 
             $year = date("Y"); 
             for($i = $year; $i > ($year - 25); $i--){ 
              print "<option value=\"$i\">$i</option>\n"; 
             } 
             ?> 
            </select> 
            <span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span> 
           </div> 
          </div> 
         </div> 
        </div> 
       </span> 

Ниже приведен сценарий проверки подлинности. Как я уже говорил ранее, я использую функцию .each, но после дальнейшего изучения работы этой функции я начинаю находить, что она в точности и не работает должным образом. Я не уверен в другом методе, и, поскольку это неопределенное количество элементов, я не могу точно использовать цикл for или foreach.

var addresses = []; //holds array of address objects 

$('.address').each(function() { 
     address = new newAddress($('.address').val(), $('.address2').val(), $('.city').val(), $('.state').val(), $('.zip').val(), $('.addr_from_month').val(), $('.addr_from_year').val(),  $('.addr_to_month').val(), $('.addr_to_year').val()); 
    addresses.push(address); //build the addresses array of objects 
}); 

function newAddress(line1, line2, city, state, zip, from_month, from_year, to_month, to_year){ 
    this.line1 = line1; 
    this.line2 = line2; 
    this.city = city; 
    this.state = state; 
    this.zip = zip; 
    this.from_month = from_month; 
    this.from_year = from_year; 
    this.to_month = to_month; 
    this.to_year = to_year; 
} 

Благодарим вас за любой ввод и ответы, которые я получаю. При необходимости я предоставит вам изменения и дополнительную информацию!

Answer 1

После моих комментариев, я думаю, что это было бы быстрое решение вашей проблемы:

$('.address').each(function(index) { 
    address = new newAddress($('.address').eq(index).val(), 
     $('.address2').eq(index).val(), 
     $('.city').eq(index).val(), 
     $('.state').eq(index).val(), 
     $('.zip').eq(index).val(), 
     $('.addr_from_month').eq(index).val(), 
     $('.addr_from_year').eq(index).val(), 
     $('.addr_to_month').eq(index).val(), 
     $('.addr_to_year').eq(index).val()); 

    addresses.push(address); //build the addresses array of objects 
}); 

---

Update

Другой способ будет использовать .map() вернуть array в один присест , Приведенный ниже код будет все, что вам потребуется:

var addresses = $('.form-control').map(function (index, element) { 
    return { 
     line1: $('.address').eq(index).val(), 
     line2: $('.address2').eq(index).val(), 
     city: $('.city').eq(index).val(), 
     state: $('.state').eq(index).val(), 
     zip: $('.zip').eq(index).val(), 
     from_month: $('.addr_from_month').eq(index).val(), 
     from_year: $('.addr_from_year').eq(index).val(), 
     to_month: $('.addr_to_month').eq(index).val(), 
     to_year: $('.addr_to_year').eq(index).val() 
    }; 
}).get();