A Digital Age Deserves A Digital Leader

How to send a form with AJAX

How to send a form with AJAX

Postby 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?
Image

Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
Software Development
User avatar
Posts: 3991
Joined: Wed Jul 07, 2004 6:28 pm

Re: How to send a form with AJAX

Postby 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.
Image

Mac OS 10.6.7 - Personal
Ubuntu Server 11.04 - Server
Software Development
User avatar
Posts: 3991
Joined: Wed Jul 07, 2004 6:28 pm

Return to HTML, CSS, and Scripts

Who is online

Users browsing this forum: No registered users and 0 guests