Processing forms without reloading the page?

[Perfidus]

Hi there !

I have a big form with the action set to "formprocessor.php" the fact is that I do not want the page to reload after the form is processed, cause this form is just a small one in a pahe that contains two. Is there a way to do this?

[dooper3]

Yes, using javascript. Look up tutorials for "AJAX" - Asynchronous Javascript and XML - it allows you to send requests to the server from the client while still on the page, for an example, look at Google Suggest - as you start typing, it queries its database for similar searches conducted by other people and offers them up without reloading the page.

 

There is a noticable delay however between starting typing and the result coming back from the query.

 

Problems arise when javascript is turned off by a user though...

[br0ken]

Another way would be to put each form in an iframe so it loads the frame but the rest of the page stays the same.

 

Iframe's suck but it will do what you need

[cooldude832]

Another way would be to put each form in an iframe so it loads the frame but the rest of the page stays the same.

 

Iframe's suck but it will do what you need

 

Realistically if you want to do things "right" it isn't an idea because the frameset strucutre design has a very different set of rules that would onyl cause more work.

 

If your process page is transparent, meaning the data processes here and then returns to a thank you page or the form, you can use ajax and push all the data through POST and not have to make any alterations to your file (well a few)

 

I use this for my GET based AJAX, but you will need a slight change for POST

<script type="javascript/text">
function RateDeal(deal,rating,user)
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState==4){
		var div = "rate_"+deal;
		document.getElementById(div).innerHTML=xmlHttp.responseText;
	}
}
var url = "rate.php?deal="+deal+"&rating="+rating+"&user="+user;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
  }
</script>

This was a deal rating script, the parts you will mod is what parameters you pass to it at the top, and the last 10 lines

<script type="javascript/text">
xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState==4){
		var div = "rate_"+deal;
		document.getElementById(div).innerHTML=xmlHttp.responseText;
	}
}
var url = "rate.php?deal="+deal+"&rating="+rating+"&user="+user;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
</script>

The portion in the if(xmlHttp.readState==4) sets what happens on the processor page finishing.  I have it set to update a div's (I called it <div id="div"></div>) innerHTML to be what ever the processor page echoed out.  So in this case it echos your rating has been submitted, or if it didn't submit an error message.

The other part of this to alter is the var url. This sets up the url for the processor.  Since you are doing post you will need to alter all three of these lines to reflect POST instead of GET as I have done, and I will leave that up to you with an AJAX tutorial