PHP AJAX POST複数の同じ名前

Question

私はこのようなコードを持っている：

<form method="post" id="result-image" name="result-image" action="" > 

      <?php $i=1; foreach ($data as $key => $datas) { ?> 

<div class="col-md-2 thumb custom-size col-lg-3 col-xs-4"> 
     <label class="btn btn-default turunin " > 
<img class="thumbnail img-responsive img-check" src="<?php echo $datas['thumbnail'];?>" alt="<?php echo $datas['image_alt'];?>" title="<?php echo $datas['title']; ?>"> 

      <div class="caption" style="text-align:center; margin-top:-15px; padding-bottom:0px;"><?php echo $datas['size'];?></div> 
      <input type="checkbox" name="cek[]" id="cek" class="hidden" value="<?php echo $i ?>" autocomplete="off" > 
      <input type="hidden" name="image[]" id="image[]" value="<?php echo $datas['image'] ?>" /> 
      <input type="hidden" name="page[]" id="page[]" value="<?php echo $datas['page'] ?>" /> 
      <input type="hidden" name="size[]" id="size[]" value="<?php echo $datas['size'] ?>" /> 
      <input type="hidden" name="thumbnail[]" id="thumbnail[]" value="<?php echo $datas['thumbnail'] ?>" /> 
      <input type="hidden" name="image_alt[]" id="image_alt[]" value="<?php echo $datas['image_alt'] ?>" /> 
      <input type="hidden" name="title[]" id="title[]" value="<?php echo $datas['title'] ?>" /> 

    </label> 
</div> 
      <?php $i++; } ?> 

<button type="submit" id="edit_submit" class="btn btn-success edit_submit">Next Step <i class="fa fa-arrow-right" aria-hidden="true"></i></button> 
</form> 

その後、私はAJAXを経由してPOSTをしたい、この私の小さなジャバスクリプト：

それので、私は、このコードを変更する方法

jQuery(document).ready(function($) { 
    $('#result-image').submit(function(e) { 
    e.preventDefault(); 
    data = { action  : 'aad_edit_results', 

      //////////// WHAT I SHOULD WRITE ///// 

    // image  : $("#image").val(), /// This work if one 
    // page : $("#page").val(), /// This work if one 
    // size  : $("#size").val(), /// This work if one 
    // title  : $("#title").val(), /// This work if one 


      //////////// WHAT I SHOULD WRITE ///// 


      beforeSend : function(){ 
       $('#myPleaseWait').modal('show'); 
       //$('.edit_submit').attr('disabled',true); 
      }, 
    }; 

    $.post(ajaxurl, data, function(response) { 
      $("#edit-image-modal").html(response).modal(); 
      $('#myPleaseWait').modal('hide'); 
      //$('#edit_submit').attr('disabled',false); 
     }); 

    return false; 


         }); 
}); 

を単一の名前が使用されている場合にのみ動作しますか？

// image  : $("#image").val(), /// This work if one 
// page : $("#page").val(), /// This work if one 
// size  : $("#size").val(), /// This work if one 
// title  : $("#title").val(), /// This work if one 

誰も私を助けることができる、私はより多くの概念を試してみましたが、彼らは動作しませんの？

Answer 1

私はそれがあなたを助けると思う。 Convert form data to JavaScript object with jQuery この変換されたデータはajaxで送信できますが、チェックされた要素だけをajaxに送信したい場合は、それを使用できます。

$.fn.serializeObject = function() { 
     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
      if (o[this.name] !== undefined) { 
       if (!o[this.name].push) { 
        o[this.name] = [o[this.name]]; 
       } 
       o[this.name].push(this.value || ''); 
      } else { 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    }; 

    // you can also change it to $('#result-image').submit(function(){}); 
    $("#edit_submit").on({ 

     click: function (e) { 
      e.preventDefault(); 
      var form = $('#result-image'), 
       data = form.serializeObject(), 
       checkbox = form.find('input[type=checkbox]:checked'), 
       sendAjaxData = []; 

      $.each(checkbox, function (i, k) { 
       sendAjaxData[i] = { 
        image: data['image[]'][k.value - 1], // why -1? because of your checkbox value starts from 1, but `i` starts from 0 
        page: data['page[]'][k.value - 1], 
        // ...... write your other inputs 
       }; 
      }); 

      console.log(sendAjaxData); // send to ajax `sendAjaxData` 
      // .. ajax request goes here. 

      $.ajax({ 
        url: "sendRequest.php", 
        method: "POST", 
        data: {data:sendAjaxData}, 
        dataType: "json", // if you want to get object data use json, but you want to get text data then use html 
        success: function (data) { 

        }, 
        error: function (data) { 

        } 
       }); 

      return false; 
     } 

    }); 

PHPファイル sendRequest.php

<?php 

print_r($_POST); 
//also you can get with $_POST["data"]; 

私はそれはあなたを助けることを願っています。

Answer 2

IDではなく、クラスを使用します。 ID（=ユニークID）は、DOM全体で一意でなければなりません。

var values = $.map($(".someInputClass"), function(elem){ 
 
    return $(elem).val(); 
 
}) 
 

 
console.log(values);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="someInputClass" value="Input 1"/> 
 
<br> 
 
<input class="someInputClass" value="Input 2"/> 
 
<br> 
 
<input class="someInputClass" value="Input 3"/> 
 
<br> 
 
<input class="someInputClass" value="Input 4"/>

このコードは、すべての<input>をつかみ、それらの値を読み込み、配列に入れます。次に、値の配列をサーバーに送信します。それはそれを行う一つの方法です。