CODEWITHSUNDEEP
javascriptphpjqueryarraysajax
Senne Vandenputte
Senne Vandenputte

Reputation: 539

How to send a PHP array via AJAX?

On my signup page people can sign up for my website by filling in some inputs ad checkboxes. It's basically a form that sends the data to a PHP page with ajax which then puts it in the database.

The javascript gets the values from the form like this for example

var w = _("website").value;
var bio = _("bio").value;

and then sends it like this ajax.send("w="+w+"&bio="+bio); This is working as it should, but I want to add something.

Now I have a number of checkboxes that I want to get in an array that gets posted in one variable via ajax. So in my form I have this piece of PHP:

$licensessql = mysqli_query($db_conx, "SELECT * FROM licenses");
while($licenserecord = mysqli_fetch_assoc($licensessql)) {
echo '<input type="checkbox" value="'.$licenserecord["license"].'" name="licenses[]" id="'.$licenserecord["license"].'"><label for="'.$licenserecord["license"].'">'.$licenserecord["license"].'</label><br>';
}

Using pure PHP this would work and put all the values from the checkboxes in an array licences[], but I have no idea how to achieve this using ajax. If I have 5 checkboxes, I want the javascript var to have for example the value 'value1,value2,value3' and have that posted to PHP.

Thanks!

Upvotes: 4

Views: 787

Answers (4)

daremachine
daremachine

Reputation: 2798

You can send all form data with serializeArray function.
Serialize use for GET, and serializeArray is useful for POST.

$('#btn-send').click(function(e) {
    $.ajax({
        url: 'url-to-data-send',
        method: 'post',
        data: $(this).closest('form').serializeArray(); <--- send form data
    }).done(function(response) {
        alert('form sent');
    })
});

or you can specify what you want to send definetely

var data = $(this).closest('form').serializeArray();
    console.log(data);

FIDDLE

** EDIT **

This does what you want I guess

var arr = [];
$.map( $(this).closest('form').find('input[name="chck[]"]:checked'), function( n, i ) {
     arr.push({ name: $(n).attr('name'), value: $(n).val()});
});
console.log(arr);

FIDDLE 2

Upvotes: 0

Husni Salax
Husni Salax

Reputation: 2020

Here we go:

You need Serialize function! Here is an exaple how you may use it:

HTML:

<form id="yourOrderFormId" method="post">
<input type="checkbox"/><input type="text"/>
<input type="checkbox"/><input type="text"/>
<button id="yourButtonId">Send</button>
</form>

jQuery Ajax:

<script>
    $('#yourButtonId').click(function(e) {

       var yourData = $("#yourOrderFormId").serialize(); 

        $.ajax({
            method: 'POST',
            url: '/yourUrl',
            data: yourData,
            dataType: 'html',
           success:success: function (result) {
           alert("Your message sent!");
           }
    });

Or use with serializeArray();

console.log($('form').serializeArray());

Here :enter link description here

Hope it helps;)

Upvotes: 0

dchayka
dchayka

Reputation: 1302

First of all I recommend using form serialization as posted in other answers.

To answer your actual question: "If I have 5 checkboxes, I want the javascript var to have for example the value 'value1,value2,value3' and have that posted to PHP."

Here's a fully working example (using 3 checkboxes) which will produce a javascript variable which you can use to pass to your AJAX post method for PHP to process.

JSFiddle: https://jsfiddle.net/o5q04vf0/

Code Snippet:

$(document).ready(function() {
  $('#btnTest').click(function() {
    var checkBoxValues = $("[name=licenses\\[\\]]").map(function() {
      if ($(this).is(':checked')) {
        return this.value;
      }
    }).get().join();

    alert(checkBoxValues);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="0" name="licenses[]" />
<input type="checkbox" value="1" name="licenses[]" />
<input type="checkbox" value="2" name="licenses[]" />
<button id="btnTest">Submit</button>

This will help you guide in the right direction but do consider switching your approach in passing data through AJAX like other members suggested here.

Upvotes: 1

online Thomas
online Thomas

Reputation: 9401

Use POST and serialize the array as data 

  $data = $('form').serialize();
    $.post( "ajax/test.html", function($data) {
      $( ".result" ).html( data );
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="demo_form.asp">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

in PHP you use $_POST['attributeName'] to read the value

Upvotes: 0

Related Questions