PHP AJAX POST multiple same name

Question

I have code like this:

<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>

then I want POST via AJAX, this my little javascript:

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;


                        });
});

how can I change this code, because it only work if single name is used?

 // 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

I have tried many more concepts but they are not working, can anybody help me?

Please check link below, this issue has been answered before — mmmttzz, Aug 10 '16 at 12:25
Please see my AJAX example here: http://stackoverflow.com/a/20150474/2191572 — MonkeyZeus, Aug 10 '16 at 12:52

score 1 · Accepted Answer · edited May 23 '17 at 12:32

I think it will help you. Convert form data to JavaScript object with jQuery You can send this converted data with ajax, but if you want to send to ajax only checked elements you can use it.

    $.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 File sendRequest.php

<?php

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

I hope it will help you.

i like your code, the Object is work, but how send VIA ajax post — Ofri, Aug 10 '16 at 17:36
@Ofri i updated code, it must help you, if don't, write me i will help again ;) — Teymur Mardaliyer Lennon, Aug 10 '16 at 19:59
You are welcome. And, use classes, id="" have to be unique @Ofri — Teymur Mardaliyer Lennon, Aug 11 '16 at 09:26

score 0 · Answer 2 · answered Aug 10 '16 at 12:34

Use classes, not IDs. ID (= unique IDentifier) must be unique across the 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"/>

This code grabs all the <input>, reads their values and puts them in an array. Then send the array of values to the server. That's one way to do it.

PHP AJAX POST multiple same name

2 Answers2