0

Is it possible to pass an array that is populated via checkboxes to another page via AJAX POST and navigate to that page?

The current scenario is I have a table with checkboxes that allows the user to select the checkboxes to pay for multiple items. The issue is passing that multiple ids to the payment page. Are there any suggestions as to how I can do it?

This is what I have so far:

function pay(input){
    var id = input;
    $.ajax({
        method: "POST",
        url: "<?php echo site_url($this->data['controller'].'/Pay'); ?>",
        data:'id='+id,
        beforeSend: function () {
            $('.loading').show();
        },
        success: function(data){
            //what do i fill here
        }
    });
}

Or is there an alternate method of doing this?

JianYA
  • 2,750
  • 8
  • 60
  • 136

3 Answers3

1

I will break this question down into 2 questions:

Is it possible to pass an array that is populated via checkboxes to another page?

Why yes use square brackets in the input name to make it an array.

<input type="checkbox" name="id[]" value="2">
<input type="checkbox" name="id[]" value="6">

in PHP you can access the selected item ids like this:

$selectedItemIDs = $_POST['id'];
// $selectedItemIDs is now [2, 6] if both checkboxes were selected.

Can I pass an array to another page via AJAX POST and navigate to that page?

IIRC this is not possible without using a dirty workaround. JavaScript and jQuery do not provide this functionality.
To find the workaround you have to realize that what you are trying to do is simply navigate to a different page, with POST parameters.
Don't forms do exactly that? Yes, they do!

The dirty workaround i was talking about is of course a hidden form where you fill all needed information with JS / jQuery and submit it. Here is a stackOverflow post about this

In your situation though, I would just use the form that you already have (with the multiple checkboxes), since you can easily pass an array of checkbox-values with a form.

kscherrer
  • 5,486
  • 2
  • 19
  • 59
0

The data parameter is not a string when making a POST request. Save all of your form data to a variable and assign that variable to the "data" element of the POST call. You can do this like so:

var myform = $('form').serialize(); // This will save all the form's data to the variable myform

and then

data: myform, // This will send what myform contains via POST

Inside "success" you get to parse the information from the POST response. After that you can redirect using:

window.location.href = 'http://yourlink.here'; //this will redirect you to another page
DreamWave
  • 1,934
  • 3
  • 28
  • 59
  • But I want to get the Ids and navigate there also. The Ids will load a list of items from the database so that I can perform payment there – JianYA Feb 20 '18 at 14:10
  • Sorry but what about the first url in the ajax request? Wouldnt that be the url I am going to pass my data to? – JianYA Feb 20 '18 at 14:16
0

Through an array you can post it to ajax

var check_box_array = [];

$("input:checkbox[name=type]:checked").each(function(){
    check_box_array.push($(this).val());
});

and then

 $.ajax({
        method: "POST",
        url: "<?php echo site_url($this->data['controller'].'/Pay'); ?>",
        data:{check_box_data:check_box_array},
        beforeSend: function () {
            $('.loading').show();
        },
        success: function(data){
            //what do i fill here
        }
    });
Madhu
  • 326
  • 2
  • 7
  • But that just sends the data over to the pay page. I want to navigate there as well. Your method treats the pay page like a function to call. – JianYA Feb 20 '18 at 14:37