"&" and Ajax submit problem

MirceaP

06-17-2009, 12:24 PM

Hello,
I an a newbye trying to fix an Ajax submit problem.

I am using an Ajax submit form. It works fine except when I submit a post with "&". Posting something with this character brakes down the submit up to that point when the character occurs.

What should I do?
Here is my submit Ajax code.

Thank you,
Mircea

<script type="text/javascript">
var fieldname = 'postrowbody';
var xmlHttp = http_object();

function get(f)
{
var param = elem = '';
for(var s = 0; s < f.elements.length; s++)
{
elem = f.elements[s];
if(param != '')
{
param += '&';
}
param += elem.name + '=' + elem.value;
}
document.getElementById(fieldname).innerHTML += "<div id='load' class='preloader'><img src='/tabs/loading.gif' /><p>Requesting content...</p></div></div>";

xmlHttp = http_object();
xmlHttp.onreadystatechange = handle_return;
xmlHttp.open("POST", '{S_AJAX_ACTION}', true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send(param);

//clear the message site
document.postform.message.value = '';
}

function handle_return()
{
if (xmlHttp.readyState == 4)
{
var load = document.getElementById('load');
load.parentNode.removeChild(load);
document.getElementById(fieldname).innerHTML += xmlHttp.responseText;
document.postform.reset();
}
}

function http_object()
{
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;
}
}
}
return xmlHttp;
}
</script>

Philip M

06-17-2009, 12:50 PM

Try changing the & character to Unicode \u0026

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

MirceaP

06-17-2009, 12:51 PM

Thanx for the fast reply. How can I do this?

12 Pack Mack

06-17-2009, 12:52 PM

MirceaP:

This works for me, in IE6 and FF3:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var AdminResponse = "";

function parseResponse(){

var nMessage = document.getElementById('echoMsg');
nMessage.style.display = '';
nMessage.innerHTML = AdminResponse;
}

function registerUser(){

var AdminRequest = window.XMLHttpRequest ? new XMLHttpRequest()
: window.ActiveXObject
? new ActiveXObject("Microsoft.XMLHTTP")
: null;
AdminRequest.onreadystatechange = function()
{
if (AdminRequest.readyState == 4)
{
if (AdminRequest.status == 200)
{
AdminResponse = AdminRequest.responseText;
parseResponse();
}
else {
alert('Error postIt.php File '+ AdminRequest.statusText);
}
}
}
var nForm = document.forms[0];
var infoStr = "fname=" + escape(nForm['firstName'].value);
infoStr += "&surname=" + escape(nForm['surName'].value);
AdminRequest.open("POST", "postIt.php", true);
AdminRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
AdminRequest.send(infoStr);
}

function validate(nForm){

document.getElementById('echoMsg').style.display = 'none';
for (i=0; i<nForm.length; i++)
{
if (nForm[i].value == "")
{
alert('Please complete all fields');
return false;
}
}
registerUser();
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:240px;margin:auto}
fieldset {width:210px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:times;font-size:14pt;color:#00008b;background-color:#87ceeb;
padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008B;padding:5px}
.submitBtn {display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}
.formField {font-family:times;font-size:10pt;margin-bottom:3px}
#echoMsg {font-family:tahoma;font-size:13pt;color:black;border:1px solid black;padding:5px;
width:275px;height:auto;background-color:#87ceeb;margin-bottom:10px;margin-left:auto;
margin-right:auto;text-align:center}

</style>
</head>
<body>
<div id='echoMsg' style='display:none'></div>
<form action="">
<fieldset>
<legend>Personal Information</legend>
<label>First Name: <input type='text' size='15' name='firstName' class='formField'></label>
<label>Surname:     <input type='text' size='15' name='surName' class='formField'></label>
<input type='button' name='submit' value="Submit" class='submitBtn' onclick="validate(this.form)">
</fieldset>
</form>
</body>
</html>

12 Pack Mack

06-17-2009, 01:20 PM

MirceaP:

I think I misunderstood the problem. To pass an ampersand as part of the POST string, escape the string.

I edited my previous post to correct my error.

MirceaP

06-18-2009, 12:34 PM

12 Pack Mack,
Thanx for giving me the the solution. Unfortunately I nave no js knowledge and integrating your solution into my script was impossible for me.

I did not wanted to bother you with other stupid newbye questions so I had opened anther thread speciffically on how to implement the escape function you told me about.

If this looked like ignorance I am really sorry, it was not my intention.

All the best