Mixed input types values serialized and sent to PHP file via jQuery AJAX

Question

I have a form with text fileds and checkboxes whose values I want to POST to a PHP file. I have learned that, in order to doing it by the $.ajax() method, I need to serialize the data from the inputs and send the whole string to the server, the server then retrieves the string and deserializes it and turns it into an array, so I can work with each value. Is this correct?

Problem is that my PHP file is apparently not getting the string correctly because either it is incorrectly composed or incorrectly sent. I'll procceed with some code snippeds that highlight this problem.

HTML

<form id="form1">
<fieldset>
<legend>Data for text</legend>
    <label>TF1</label>
    <input type="text" name="tf1" id="tf1" />
    <label>TF2</label>
    <input type="text" name="tf2" id="tf2" />

<legend>Data for checkboxes</legend>
    <label>Check1</label>
    <input type="checkbox" name="check" value="value1" />
    <label>Check2</label>
    <input type="checkbox" name="check" value="value2" />
    <label>Check3</label>
    <input type="checkbox" name="check" value="value3" />

    <input type="button" onclick="ajaxjquery()" value="OK">
</fieldset>
</form>

Issues that arise:

• I have read several codes and some say the checkbox name should be an array, so it stacks up the values that are checked. Others say it should not be an array, and I still don't quite know which the correct way should be.

Now, let's say TF1 has a 'x' value, TF2 has a 'y' value and that I check Check1 and Check2.

Note: I'm well aware of the use of jQuery event handlers to call a function, but for the moment I'm not using them.

JavaScript

function ajaxjquery(){
    var str = $("#form1").serialize();
    $.ajax({
        type: "POST",
        url: "test.php",
        data: str
    })
    .done(alert(str));
    $.get("test.php", function(data) {
        alert("Response: " + data);
    });
}

Issues that arise:

• After serializing the data from the inputs, the .done(alert(str)); indicates me the string was sent and that is correctly formed: tf1=x&tf2=y&check=value1&check=value2
• However, when $.get tries to retrieve the response, that is merely the array just formed or one of its elements, it is a blank (null?). No matter what the php script does: I have tried out echoing the sole variable, var_dump, print_r and parse_str but it always sends a blank response, so I'm not sure if I'm not sending a correct string or if the response from the server is not being correctly sent or what.

In case you wonder, I'm deserializing the string like this:

PHP

parse_str($_POST['str'], $data);
echo $data['tf1'];

Please note that if I echo any other thing from the php file, the $.get method responds okay, everything but the string that has supposedly received.

Answer 1

Your checkbox names should have [] appened to them, i.e.,

<input type="checkbox" name="check[]" value="value1" />

This is a PHP-specific thing that lets PHP know it should interpret the POST data as an array.

Secondly, you don't need to parse the data on the PHP side. PHP does that for you automatically. $_POST['str'] is not valid -- you haven't sent any inputs with the name "str". PHP has no idea what your JavaScript variable names are.

var_dump($_POST) instead and see what it contains. That should point you in the right direction.

---

Your JavaScript is wrong too:

function ajaxjquery(){
    var str = $("#form1").serialize();
    $.ajax({
        type: "POST",
        url: "test.php",
        data: str
    })
    .done(alert(str)); // alert() will be called immediately, you need to put this in a closure like so:
    .done(function(response) { alert(response); });

    $.get("test.php", function(data) {
        alert("Response: " + data);
    }); // this is sending a separate GET request to test.php passing no data to it -- PHP will never receive any POST nor GET variables
}