How to send info to a PHP script with AJAX?

Question

I cannot get my simple ajax script to run. The code should be pretty simple. The ajax script is:

<html>

<head><title>Testing ajax</title>

    <script type="text/javascript">

        function ajax() {

            var xmlhttp;

            var fname=document.getElementById("fname").value;

            if(window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function() {

                if (xmlhttp.readyState==4 && xmlhttp.status==200) {

                    document.getElementById("output").innerHTML=xmlhttp.responseText;

                }

            }

            xmlhttp.open("GET","ajax.php?fname="+fname,true);
            xmlhttp.send();

        }

    </script>

</head>

<body>


    <form>

        <input type="text" id="fname">

        <input type="text" id="lname">

        <input type="submit" id="submit" onclick="ajax()">


    </form>


    <div id="output"></div>


</body>

And the php script is:

<?php

$fname=$_GET['fname'];

echo "<p>Hello ".$fname."</p>";

?>

I have also tried:

xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/pass-data");
xmlhttp.send("fname="+fname);

I can't get neither post not get method to send data. Am I not seeing something simple?

You're posting the data but trying to retrieve it in php from $_GET? — kinakuta
– kinakuta, Commented Jun 3, 2012 at 4:06
I've tried both post and get but cannot get either way to work. Right it is using get — Beamer180
– Beamer180, Commented Jun 3, 2012 at 4:08
is the JS file located in the same folder as the PHP file? The path is correct? — Zoltan Toth
– Zoltan Toth, Commented Jun 3, 2012 at 4:09
Yeah, they're both in the same folder and i copy and pasted the file name to make sure that was right too. — Beamer180
– Beamer180, Commented Jun 3, 2012 at 4:30
@EricLarsen fyi, when you're not sure whether a piece of information will be sent via POST or GET, you can use $_REQUEST. It contains all values from both $_POST and $_GET. Probably better not to do this if it's not necessary, though. — octern
– octern, Commented Jun 3, 2012 at 4:53

Alex W · Accepted Answer · 2012-06-03 04:47:40Z

3

The reason it is not working is due to the fact that you have your inputs inside of <form> tags. After removing the form tags, when I tried your code with the <input type="submit" /> control changed to

<input type="button" onClick="ajax()" value="Submit" />

it worked like a charm. I suspect that form behaviour is handled differently due to certain benefits when submitting, security concerns, and such.

answered Jun 3, 2012 at 4:47

Alex W

38.5k13 gold badges115 silver badges115 bronze badges

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

Comments

kiranvj · Accepted Answer · 2012-06-03 05:01:49Z

0

Change the input type from submit to button

input type="button" onclick=...

because when you click the button it will right away submit the page if the type="submit".

edited Jun 3, 2012 at 5:01

answered Jun 3, 2012 at 4:44

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Collectives™ on Stack Overflow

How to send info to a PHP script with AJAX?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related