Form post on AJAX server side

Is it possible?

[Shakur1911]

Hello I'm trying to do something in AJAX but it seems not to be possible.
On the Client side I have an html form with a button which when clicked calls a javascript function named sendMail(). This function then creates an AJAX request to a specified url.

On the Server side I'm creating some table and then I return and display the table on the browser side. So far so good, now I was trying to embed inside the table (Server side) a simple Paypal button.

The problem is when I click on the Button it does not redirect me to paypal but rather on my site root.
I speculate that the problem is that I cannot have a form post on the server side of an AJAX request. Is this TRUE?

If yes what alternatives do I have? I need to display the button on the server side.

Here is how I call the AJAX on the client side:

In HTML:

<form action="index.php" method="post" name="adminForm" id="adminForm" >
<input type="button" class="my_button" name="current" id="currrent2" value="Submit" onclick="sendMail();" /></form>

In Javascript I have:

function sendMail (){
var url2="http://www.example.com";
 xmlhttp=GetXmlHttpObject();
 if (xmlhttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
 xmlhttp.onreadystatechange=stateChanged2;
 xmlhttp.open("GET",url2,true);
 xmlhttp.send(null);
}
 function stateChanged2()
 {
 if (xmlhttp.readyState==4)
 { 
 document.getElementById("emailSent").innerHTML=xmlhttp.responseText;
 }
 }
 
 function GetXmlHttpObject()
 {
 if (window.XMLHttpRequest)
 {
 return new XMLHttpRequest();
 }
 if (window.ActiveXObject)
 {
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
 return null;
 }
 

And on Server side I display the button like this:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
...
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

[edited by: Fotiman at 1:52 pm (utc) on Apr 14, 2010]
[edit reason] Examplified URL [/edit]

[Fotiman]

Welcome to WebmasterWorld!

1. Because you're using an input type "button", users with JavaScript disabled will have a broken interface (the submit button will not submit anything to the server).

2. Where is the element "emailSent" located? If it's within a form element, then that will cause a problem because you'd end up with a form within a form, which is not valid, and clicking the paypal button might cause the outer form to be submitted (which is probably why you get redirected to your own server). So make sure that emailSent is not located within a form element.

[Shakur1911]

Thanks Fotiman!
Unfortunately this is not the problem :(
I do call sendMaul() from within the first form but the div is placed outside the form.. But it certainly calls the action of the first form since I changed the action url and redirected me there..

Any ideas?

[XtendScott]

Are you AJAXing the javascript in with the PayPal button? Once the initial page is loaded script that is AJAXed into the page is NOT parsed automatically. Best solution is having the javascript on the initial page or you have to eval() the script that is loaded with the AJAXed HTML content.


<added>
rereading your post, I may be on the wrong path.

Does your code work, if it is not AJAXed in?

[Shakur1911]

XtendScott not sure if I understand your question.
The sequence is as follows:

In first page, I click Button 1 in Form1 with post action=index.php. Then a Javascript function is called which which does an xmlhttp.open("GET","myurl.php",true);

In myurl.php I display a paypal button which is actually a second form. When I click the paypal button the action of the first form is executed.

I tend to believe that it is impossible to have the paypal button/form in the second site because as soon as it is displayed we are back in the client side so naturally the action of the first form will be executed.

[Fotiman]

But it certainly calls the action of the first form since I changed the action url and redirected me there..

That would tend to suggest that perhaps you have some invalid markup that is causing the browser to think that you're still in the form.

For an experiment, can you try putting your "emailSent" element immediately after the <body> tag (so it appears before the form element)? For example:

<body>
<div id="emailSent"></div>
<form ...

Also, you might try validating your HTML [validator.w3.org].

[Fotiman]

Also, is the result of myurl.php ONLY the new <form>...</form> element, or does it contain an entire page with <html>, <head>, and <body> tags?