Question

I have no code to really show you here, but let’s say I have a form with 3 HIDDEN fields that contain date, city and address.
I also have a select with 3 options (let’s say Apple, Microsoft and Google).

What I want is that when a user changes the select to a different option, jquery should send the value of the selectbox + the 3 hidden fields to a PHP page, say proces.php. Proces.php handles the mysql_query etc, and it doesn’t give anything back.

Can anyone show me how this is done? I don’t expect anyone to write a whole script for me since I didn’t provide any html code, but just the outline, or maybe a link to a tutorial or something.

Answer 1

First of all your form should look something like this:

<form action="process.php" method="post" id="myForm">
    <select name="site" id="site">
        <option>Apple</option>
        <option>Google</option>
        <option>Microsoft</option>
    </select>
    <input type="hidden" name="date" value="01/05/2012" />
    <input type="hidden" name="city" value="London" />
    <input type="hidden" name="address" value="[... address ...]" />
</form>

Then to submit via AJAX you would use the serialize() method to gather the form data:

$("#site").on("change", function() {
    var $form = $("#myForm");
    var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "GET";
    $.ajax({
        url: $form.attr("action"),
        data: $form.serialize(),
        type: method,
        success: function() {
            // do stuff with the result, if you want to 
        }
    });
});

Alternatively if you don’t want to use AJAX, just the standard form submission, you can trigger the form to submit, like this:

$("#site").on("change", function() {
    $("#myForm").submit();
});