Help submitting form input with AJAX

Avocado · March 4, 2010

Hi, I can't figure out what my code is missing. The text input from the 'name' id isn't submitting to the php page,

Here is the html form:

^<body>

^<form>

^{Enter name:}

^{<input type="text" id="name">}

^{<input type="button" value="Send" onclick="loadAJAX('phppage.php')">}

^</form>

^{<div id="display">}

^</div>

^</body>

This is the AJAX code:

^{<script type="text/javascript">}

^{function loadAJAX(url)}

^{

^{var params = "name=name"}

^{if (window.XMLHttpRequest)}

^{{// code for IE7+, Firefox, Chrome, Opera, Safari}

^{xmlhttp=new XMLHttpRequest();}

^}

^else

^{{// code for IE6, IE5}

^{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

^}

^{xmlhttp.open("GET",url,false);}

^{//Send the proper header information along with the request}

^{xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");}

^{xmlhttp.setRequestHeader("Content-length", params.length);}

^{xmlhttp.setRequestHeader("Connection", "close");}

^{xmlhttp.onreadystatechange = function() {//Call a function when the state changes.}

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

^{alert(xmlhttp.responseText);}

^}

^{xmlhttp.send(params);}

^{document.getElementById('display').innerHTML=xmlhttp.responseText;}

^}

^</script>

This is the PHP code:

^<html>

^<body>

^{Hi <?php echo $_POST["name"];?>}

^</body>

^</html>

The "Hi" displays in the 'display' div, but the 'name' form data does not.

I'm not sure what I'm mising.

*Also about the parameters, I read a tutorial saying to put name=value&name=value for the parameters. But doesn't the input 'id' contain the value to submit to the php page? So what would I put for the value?

Thanks

gamblor01 · March 4, 2010

Yikes! Try and wrap your code with php or code tags next time -- it will make it much easier to read. In any case, you have multiple issues here that will prevent things from working, and some things that you can easily simplify:

1. You are not sending your loadAJAX() function the value of the id field. So how does it know what to send to phppage.php? You asked about this so check out the code below for more details. Basically, you can use the values inside of the "this" object.

2. You are issuing a GET request in your loadAJAX() function and yet you try to pull the values out in phppage.php using $_POST instead of $_GET. Choose either GET or POST and be consistent (meaning: make sure they match in both places).

3. When sending values through a GET you don't need the header info.

4. When sending values through a GET you can just pass null to the xmlhttp.send() function.

I have fixed up your code so that it works using a GET request. If you want to change it to POST then you can see my thread here:

http://www.phpfreaks.com/forums/index.php/topic,288125.msg1365893.html#msg1365893

I also changed the code to get rid of the unnecessary stuff and tried to make is simple to see what was happening with the parameters at the end of the URL.

In any case, the code below should work now so try it out!

test.html

<html>

<head>
<script type="text/javascript">

function loadAJAX(url, name)
{
var params = "?name=" + name;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

// append the params
url = url + params;
xmlhttp.open("GET",url,false);
xmlhttp.onreadystatechange = function() {//Call a function when the state changes.
   if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      alert(xmlhttp.responseText);
   }
}
xmlhttp.send(null);
document.getElementById('display').innerHTML=xmlhttp.responseText;
}

</script>
</head>

<body>
<form>
Enter name:
<input type="text" id="name" value="">
<input type="button" value="Send" onclick="loadAJAX('phppage.php', this.form.name.value)">
</form>
<div id="display">
</div>

</body>

</html>

phppage.php

Hi <?php echo $_GET["name"];?>

Avocado · March 5, 2010

Cool thanks gamblor1 I appreciate your help

Sign In

Help submitting form input with AJAX

Recommended Posts

Avocado

Link to comment

Share on other sites

gamblor01

Link to comment

Share on other sites

Avocado

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information