CODEWITHSUNDEEP
phpjavascriptajaxforms
Kodekan
Kodekan

Reputation: 1601

Sending a form with variable number of fields with AJAX, $_POST array is empty

I am trying to send form data to a PHP Script using the post method. Because the number and names of the fields are variable, I iterate over the $_POST array. It works just fine when sending the form "directly" to the PHP file, however for different reasons I need/want to have the PHP Script run in the background without the page with the form to reload. So I tried to use AJAX... However the $_POST array is empty when the script is executed.

Here is the PHP text script (process_form_fields.php) I use to simply echo the form input:

echo "DEBUG: Script Output start.<br />";
foreach($_POST as $name => $value)
{
    echo "DEBUG: $name = $value <br />";
}
echo "DEBUG: End of script output.<br />";

The JavaScript / AJAX code in the sdection looks like this:

<script type="text/javascript" language="javascript">
    xmlhttp = new XMLHttpRequest();

    function process_form()
    {
        xmlhttp.onreadystatechange =
        function()
        {
            if(xmlhttp.readystate == 4)
            {
                document.getElementById("status_message_box").innerHTML = xmlhttp.responseText;
            }
            else
            {
                document.getElementById("status_message_box").innerHTML = "<i>loading (status:" + xmlhttp.status + xmlhttp.responseText + ")</i>";
            }
        }
        xmlhttp.open("POST", "http://mydomain.com/modules/process_form_fields.php", true);
        xmlhttp.send();
    }
</script>

And this is what the form looks like:

<form action="process_form_fields.php" method="post" class="niceform">
<input type="submit" value="submit">
<div class="set_options">
    <dl>
        <dt>
            <label for="1">Option 1:</label>
        </dt>
        <dd>
            <select size="1" name="Option 1" id="Option 1">
                <option value="Alpha">Alpha (1pt)</option>
                <option value="Beta">Beta (5pt)</option>
                <option value="Gamma">Gamma (20pt)</option>
            </select>
        </dd>
    </dl>
    <dl>
        <dt><label for="2">Option 2:</label></dt>
        <dd>
            <select size="1" name="Option 2" id="Option 2">
                <option value="Red">Red (0pt)</option>
                <option value="Blue">Blue (0pt)</option>
            </select>
        </dd>
    </dl>
    <dl>
        <dt>
            <label for="3">Option 3:</label>
        </dt>
        <dd>
            <select size="1" name="Option X" id="Option X">
                <option value="Foo">Foo (-5pt)</option>
                <option value="Bar">Bar (42pt)</option>
            </select>
        </dd>
    </dl>
</form>

Sending the form directly to the PHP file creates the following output, just as it should be:

DEBUG: Script Output start.
DEBUG: Option 1 = Alpha (1pt)
DEBUG: Option 2 = Blue (0pt)
DEBUG: Option X = Bar (42pt)
DEBUG: End of script output.

Using the AJAX above the output is only:

DEBUG: Script Output start.
DEBUG: End of script output.

I think I might be missing something simple here, but I'm just too blind to put my finger on it. I hope someone can point me in the right direction. It is important that the HTML form has a variable number of fields and those fields are not numbered/serialized in any way (it could be "Option 1", "Option 2", "Favourite Yellow Banana-shapes fruit" and "Age" for example).

Thank you

Upvotes: 0

Views: 739

Answers (4)

Smita
Smita

Reputation: 4634

you are not sending the data with your ajax request, this should work:

 var dataString = $('form').serialize();
    xmlhttp.send(dataString);

Upvotes: 2

doniyor
doniyor

Reputation: 37846

jquery is there to avoid this kind of complicated and hard-to-debug codes.

use something like this: 

$.ajax({
  url: "test.html",
  data: {data:yourdata}
}).done(function() { 
    //your success function
});

and thats it.

Upvotes: 0

Nandakumar V
Nandakumar V

Reputation: 4615

To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method:.
Here in your case the send(); is empty, thats why you are getting an empty $_POST array

Upvotes: 0

Nadh
Nadh

Reputation: 7243

You aren't sending any data with your request! XMLHttpRequest doesn't capture form data automatically. You have to explicitly state what variables you'd like to pass. You have to use javascript to capture the values of your form fields, string them into a query, then pass it to your PHP script using xmlhttp.send().

Try something like:

xmlhttp.open("POST","http://mydomain.com/modules/process_form_fields.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("option1=A&option2=B&option3=C");

Upvotes: 0

Related Questions