How to send a form with AJAX
2 posts
• Page 1 of 1
How to send a form with AJAX
by gries818 » Fri Mar 20, 2009 8:19 pm
With PHP, sending form data is easy. You use two files; a send.php:
- Code: Select all
<html>
<body>
<form action="receive.php" method="get">
<input name="txt_example" type="text" /><br />
<input name="submit" type="submit" />
</form>
</body>
</html>
And a receive.php:
- Code: Select all
<html>
<body>
<? echo $_REQUEST["txt_example"]; ?>
</body>
</html>
Obviously you can process the sent information any way you like once you receive it with the receiving file (in other words you don't just have to echo it out).
After you click the Submit button it redirects you to receive.php, but it appends a query to the end. So it would say in your address bar: http://localhost/receive.php?txt_example=hello.
Now here is the only way I know how to do it with AJAX:
- Code: Select all
<html>
<head>
<script language="javascript" type="text/javascript">
var XMLHttpRequestObject_test = false;
var strSend;
if (window.XMLHttpRequest) {
XMLHttpRequestObject_test = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject_test = new ActiveXObject("Microsoft.XMLHTTP");
}
function test()
{
if (XMLHttpRequestObject_test) {
strSend = "receive.php?txt_example=" + document.getElementById('txt_example').value;
XMLHttpRequestObject_test.open("GET", strSend);
XMLHttpRequestObject_test.onreadystatechange = function ()
{
if (XMLHttpRequestObject_test.readyState == 4 && XMLHttpRequestObject_test.status == 200) {
document.getElementById('here').innerHTML = XMLHttpRequestObject_test.responseText;
}
}
XMLHttpRequestObject_test.send(null)
}
}
</script>
<body>
<input id="txt_example" type="text" /><br />
<input id="submit" type="button" onclick="test()" />
<br /><br />
<div id="here"></div>
</body>
</html>
Since I tend to use a lot of AJAX, I thought it would be a good idea to automate the process with a class, which works just fine - until you consider that each AJAX needs to be able to send unique text boxes.
So is it possible to somehow send form through AJAX, so I can just use generic script to send the data instead having to custom write each AJAX script?
Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
Re: How to send a form with AJAX
by gries818 » Sun Mar 22, 2009 6:22 pm
After a couple days of tinkering, I found a method that works!
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX Testing</title>
<script language="javascript" type="text/javascript">
var XMLHttpRequestObject_test = false;
var strSend;
if (window.XMLHttpRequest) {
XMLHttpRequestObject_test = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject_test = new ActiveXObject("Microsoft.XMLHTTP");
}
var i;
var finished;
function test()
{
if (XMLHttpRequestObject_test) {
strSend = "receive.php?";
i = 0;
finished = false;
while (finished != true)
{
if (document.input1.elements[i].type == "text") {
strSend = strSend + "&" + document.input1.elements[i].name + "=" + document.input1.elements[i].value;
}
else if (document.input1.elements[i].type == "checkbox") {
strSend = strSend + "&" + document.input1.elements[i].name + "=" + document.input1.elements[i].checked;
}
else if (document.input1.elements[i].type == "hidden") {
strSend = strSend + "&" + document.input1.elements[i].name + "=" + document.input1.elements[i].value;
}
else if (document.input1.elements[i].type == "password") {
strSend = strSend + "&" + document.input1.elements[i].name + "=" + document.input1.elements[i].value;
}
i = i + 1;
if (document.input1.elements[i] != "[object HTMLInputElement]") {
finished = true;
}
else
{
finished = false;
}
}
XMLHttpRequestObject_test.open("GET", strSend);
XMLHttpRequestObject_test.onreadystatechange = function ()
{
if (XMLHttpRequestObject_test.readyState == 4 && XMLHttpRequestObject_test.status == 200) {
document.getElementById('test').innerHTML = XMLHttpRequestObject_test.responseText;
}
}
XMLHttpRequestObject_test.send(null);
}
}
</script>
</head>
<body>
<form name="input1">
<input name="txt1" type="text" />
</form><br />
<input name="cmd_submit" type="button" value="Submit" onclick="test()" /><br />
<br />
<div id="test"></div>
</body>
</html>
Also, if you send quotes or apostrophes through this message it puts '\' in front of them so you need to do this in your receive.php file to remove them:
- Code: Select all
<?
echo stripslashes($_REQUEST['txt1']);
?>
I haven't been able to get the file and radio inputs to work as desired, but since I don't need them in the application I'm currently working on, I'm not going to spend my time on this right now. If someone has a solution through, I'd greatly appreciate it.
Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
2 posts
• Page 1 of 1
Return to HTML, CSS, and Scripts
Who is online
Users browsing this forum: No registered users and 4 guests
