AJAX Post form Variables to PHP Page

Question

I have a form that executes an AJAX function to submit form values to a PHP page. The PHP page just responds by echoing out the variables in a DIV.

It works with GET method, but I can't get it working with POST.

    <html>
    <body>
    <script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
    function ajaxFunction(){
        var ajaxRequest;

        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Browser Not Supported");
                    return false;
                }
            }
        }
        // Get Response
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                document.getElementById("response").innerHTML = ajaxRequest.responseText;
            }
        }
        var name=document.getElementById("name").value
        var email=document.getElementById("email").value
        ajaxRequest.open("POST", "process.php?name="+name+"&email="+email, true);
        ajaxRequest.send(null); 
    }
    //-->
    </script>
    <form name='Form1'>
      Name:  <input type='text'  name='name' id="name"/> <br />
      Email: <input type='text'  name='email' id="email"/> <br />
    <input type="button" value="Submit" onClick="ajaxFunction();">
    </form>
    <div id="response">
    </div>
    </body>
    </html>

And the php page, process.php

    <?php
    echo date("H:i:s"); 
    echo "<br/>";
    // echo "Post Variables: ".$_POST['name']." ".$POST['email']; old code
            echo "Post Variables: ".$_POST['name']." ".$_POST['email'];
    echo "<br/>";
    echo "Get Variables: ".$_GET['name']." ".$_GET['email'];
    ?>

The response I get is:

11:32:05 Post Variables: Get Variables: name entered email entered

So i'm pretty sure it's to do with the variable being passed from PHP to Javascript.

Many thanks.

@MazIqbal The form method is irrelevant if you're using AJAX. — Barmar
– Barmar, Commented Jan 9, 2014 at 11:35
By default the method with which the information is passed to the php script is Get. You must specify in your ajax to pass the information via POST. — gprusiiski
– gprusiiski, Commented Jan 9, 2014 at 11:36
Yeah added method"post" no difference. The get is only working as I've appended the values to the URL, so the PHP page can request GET or POST ??? — Paul
– Paul, Commented Jan 9, 2014 at 11:38
For one thing, this $POST['email']; should read as $_POST['email']; you forgot the underscore. @Paul — Funk Forty Niner
– Funk Forty Niner, Commented Jan 9, 2014 at 11:39
A little thing: in your process.php on line 4 you've written $POST['email'] - the underscore is missing. But that should not be the point... can you try to do a print_r($_REQUEST);? — Robert
– Robert, Commented Jan 9, 2014 at 11:39

Bergi · Accepted Answer · 2014-01-09 11:36:56Z

7

ajaxRequest.open("POST", "process.php?name="+name+"&email="+email, true);
ajaxRequest.send(null);

That's not posting the variables. Here you're sending them as GET parameters, with an empty body for your POST request. Instead, use

ajaxRequest.open("POST", "process.php", true);
ajaxRequest.send("name="+name+"&email="+email);

or even better

ajaxRequest.open("POST", "process.php", true);
ajaxRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajaxRequest.send("name="+encodeURIComponent(name)+"&email="+encodeURIComponent(email));

answered Jan 9, 2014 at 11:36

Bergi

670k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paul Over a year ago

Modified: ajaxRequest.send("name="+name+"&email="+email); no difference, even tried: ajaxRequest.send(name) just to be sure but no value passed.

Paul Over a year ago

Thanks, just saw the update. This works a bit :) ajaxRequest.send("name="+encodeURIComponent(name)+"&email="+encodeURIComponent(email)); I only get the name not the email, I'm guessing it's to do with the concatenation of the variables would you have the &email in a POST???? My mistake just spotted the error: $POST['email'] should be $_POST['email']. All working. :)

Bergi Over a year ago

@Paul: Yes, if you use application/x-www-form-urlencoded :-) Seems like a PHP typo, use $_POST instead of $POST for the email

Collectives™ on Stack Overflow

AJAX Post form Variables to PHP Page

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related