Basic Ajax Function to Submit a Form

[limitphp]

I'm using this basic ajx function to load a page:

 

function ajx(target_div, file)
{
var MyHttpRequest = false;
if (target_div.indexOf("voteCount")>=0)
var MyHttpLoading = '';
else
var MyHttpLoading = '<p>Loading...</p>'; // or use an animated gif instead: var MyHttpLoading = '<img src="loading.gif" border="0" alt="running" />';

var ErrorMSG = 'Sorry - No XMLHTTP support in your browser, try firefox or internet explorer instead.';

if(window.XMLHttpRequest) // client use Firefox, Opera etc - Non Microsoft product
{
try
{
	MyHttpRequest = new XMLHttpRequest();
}
catch(e)
{
	MyHttpRequest = false;
}
}
else if(window.ActiveXObject) // client use Internet Explorer
{
try
{
	MyHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
	try
	{
	MyHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch(e)
	{
	MyHttpRequest = false;
	}
}
}
else
{
MyHttpRequest = false;
}

if(MyHttpRequest) // browser supports httprequest
{
var random = Math.random() * Date.parse(new Date()); // make a random string to prevent caching
if (file.indexOf("?")>=0){
	var query_string = '&rand=' + random;
}else{
	var query_string = '?rand=' + random;
}		 
MyHttpRequest.open("get", url_encode(file + query_string), true); // <-- run the httprequest using GET

// handle the httprequest
MyHttpRequest.onreadystatechange = function ()
{
	if(MyHttpRequest.readyState == 4) // done and responded
	{
		document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
	}
	else
	{
		document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
	}
}
MyHttpRequest.send(null);
}
else
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}
}

 

How can I modify it to create a basic ajx function that will submit a form?

thanks

[Ken2k7]

You would want to edit this part

if(MyHttpRequest) // browser supports httprequest
{
   var random = Math.random() * Date.parse(new Date()); // make a random string to prevent caching
   if (file.indexOf("?")>=0){
      var query_string = '&rand=' + random;
   }else{
      var query_string = '?rand=' + random;
   }      
   MyHttpRequest.open("get", url_encode(file + query_string), true); // <-- run the httprequest using GET

   // handle the httprequest
   MyHttpRequest.onreadystatechange = function ()
   {
      if(MyHttpRequest.readyState == 4) // done and responded
      {
         document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
      }
      else
      {
         document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
      }
   }
   MyHttpRequest.send(null);
}
else
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}

 

Pretty much edit the query string part and a few other minor stuff depending on what you need to do with your form.

[limitphp]

I should explain why I want to do this....

the original function I have works great.....but

 

I have a page that loads an ajx page.  In the ajax page it loads a frm with a textarea.

For users to write a message.  Now, with the regular ajx function, I would prevent the form from submitting and have to grab the value of the textarea and send it via a querystring.

 

That's probably not a good idea considering the value of the textarea message could be very long.  So, I need an ajx function that can submit a form.

 

The reason I don't want to submit the form normally, is because I would have to use the ajx page as the action for the form....

in other words the form would end up going to myaccount_ajx_inbox_reply.php

 

That ajx page would then be completely loaded in the browser.  Its not meant to be completely loaded in the browser....its meant to stay inside the div its in.

 

What do I replace the querystring stuff with?

 

thanks

 

 

[Ken2k7]

For users to write a message.  Now, with the regular ajx function, I would prevent the form from submitting and have to grab the value of the textarea and send it via a querystring.

 

That's probably not a good idea considering the value of the textarea message could be very long.  So, I need an ajx function that can submit a form.

Do you know how submitting a form works?

[limitphp]

Do you know how submitting a form works?

 

Yes sir.  frm.submit();

 

But I don't know how it works using ajx.

I think I'm not understanding something here.

 

[Ken2k7]

Well that's one way to answer it. But do you know what happens when a form gets submitted? Essentially, data gets passed to the page you're submitting to. So you had the right idea by passing the values over the query string.

[limitphp]

Well that's one way to answer it. But do you know what happens when a form gets submitted? Essentially, data gets passed to the page you're submitting to. So you had the right idea by passing the values over the query string.

 

But passing the entire value of a textarea via querystring?

 

What happens if they put an & in their message or an = sign or anything else that would mess up the querystring?

 

Plus that querystring could be huge.....maybe hundreds of words long....is that ok for a querystring?

[Ken2k7]

You should urlencode() it first.

[limitphp]

You should urlencode() it first.

 

Sending a giant message in a textbox to another page via a querystring just feels like a bad practice.

 

Is there not a way to do it using ajax?  Basically submitting a form without refreshing the page?

 

like using something like:

MyHttpRequest.open('POST', 'page.php');

[Ken2k7]

That is submitting the form without refreshing.  --___--