My code in TEST.ASP looks like this:
<HTML>
<HEAD>
<SCRIPT src="ajaxScript.js" type="text/javascript"></SCRIPT>
</HEAD>
<BODY>
<FORM action="action_page.asp" method="post">
First Name:<BR>
<INPUT type="text" name="FName"><BR>
Last Name:<BR>
<INPUT type="text" name="LName"><BR>
<INPUT type="submit" value="Submit">
<BUTTON type="button" onClick="loadXMLDoc('action_page.asp',this.form);">GoGoGo!</BUTTON>
</FORM>
<DIV id="msgBoxDiv">TEST!!</DIV>
</BODY>
</HTML>
The ajaxScript.js file has the following code:
var req; // global variable to hold request object
function processReqChange()
{
if (req.readyState == 4 && req.status == 200){document.getElementById("msgBoxDiv").innerHTML = req.responseText;}
}
function loadXMLDoc(url, params)
{
if(window.XMLHttpRequest)
{
try
{
req = new XMLHttpRequest();
} catch(e)
{
req = false;
}
}
else
{
req = false;
}
if(req)
{
var formData = new FormData(params);
req.onreadystatechange = processReqChange;
req.open("POST", url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(formData);
return true;
}
return false;
}
The receiving "action_page.asp" file is set up like this:
<%
vRF1 = request.Form("FName")
vRF2 = request.Form("LName")
%>
<HTML>
<HEAD>
</HEAD>
<BODY>
First:<%=vRF1%><BR>
Last:<%=vRF2%>
</BODY>
</HTML>
When using the normal submit button, everything works fine. However, when trying to read the target ASP with AJAX using the "GoGoGo" button, the form values are not sent to the target page. Instead, I receive the target page without the values. See the result page.
If I manually input the form data in the AJAX request, it works well, but when trying to send the entire form, it does not. I thought using the FormData object would handle this, but it's not working as expected.
What could be the issue here?