How to send PHP array via AJAX?

Question

On my registration page, people can register on my website by filling out some of the checkboxes for entering ads. This is basically a form that sends data to a PHP page using ajax, which then puts it in a database.

javascript gets values ​​from a form e.g.

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

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

Now I have several flags that I want to receive in an array that is sent in a single variable via ajax. Therefore, in my form, I have this part 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 will work and put all the values ​​from the checkboxes in the licenses of the array [], but I have no idea how to do this with ajax. If I have 5 flags, I want javascript var to have, for example, the value "value1, value2, value3" and publish it in PHP.

Thank!

Answer 1

First of all, I recommend using serialization of forms published in other answers.

To answer your real 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 is a complete working example (using 3 flags) that will call a javascript variable that you can use to jump to your post AJAX method to handle PHP.

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

:

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

Hide result

, , AJAX, , .

Answer 2

POST

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

Hide result

PHP $_POST['attributeName']

Answer 3

serializeArray.
Serialize GET, serializeArray 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');
    })
});

,

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

FIDDLE

** **

, ,

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

Answer 4

:

Serialize! , :

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!");
           }
    });

serializeArray();

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

:

, ;)