Ofri Ofri - 3 months ago 11
Ajax Question

PHP AJAX POST multiple same name

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?

Answer

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.

Comments