Welcome to WebmasterWorld Guest from 54.91.71.108

Forum Moderators: open

Message Too Old, No Replies

Function to build Query String with Javascript

For submitting form by Ajax

     
12:14 am on May 25, 2006 (gmt 0)

New User

10+ Year Member

joined:Mar 10, 2006
posts:33
votes: 0


Hi,

I searched for this on these forums, and poked about the net, but haven't found any good solutions that I can work.

I am a PHP developer, and am trying to get a handle on AJAX. I can do some stuff (swapping out divs with new content fetched via AJAX, etc.), but am having trouble with form submission.

My biggest problem is creating the query string to send (be it GET or POST); most tutorials seem to say "send the data as a query string in this format:". Great - but I am having no luck maknig the query string.

It wouldn't be so tough, but my forms are created dynamically by PHP so are always different.

I've been trying to traverse the form with ChildNodes[], but as the form elements can be nested at different depths I tried a recursive traversal which doesn't work at all (it just seems to skip sections).

Any help on this would be really appreciated.

This is the format of my form (in reality they are larger, more complex, with different field types):


<form id="myform">
<table>
<tr>
<td>
<b>Code:</b>
</td>
<td>
<input name="code" type="text" size="30" />
</td>
</tr>
<tr>
<td>
<b>Name:</b>
</td>
<td>
<input name="name" type="text" size="30" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="Submit" onClick="create_query_string('myform')" />
</td>
</tr>
</table>
</form>

My code finds lots elements whose tagNames are 'undefined', but gets down to the <b> tag but then seems to skip the next TD tag and get right to the TR tag.


function create_query_string(theForm)
{
reqStr = recTrav(theForm);
return reqStr;
}


function recTrav(theObj)
{
reqStr = "";
if (theObj.hasChildNodes())
{
for (i=0; i < theObj.childNodes.length; i++)
{
reqStr += recTrav(theObj.childNodes[i]);
}
}
return reqStr;
}

If anyone could give me a nudge in the right direction I'd be happy toshare my eventual function for those googling for similar.

Many thanks! :)

p.s Is it possible to make code indent on WebmasterWorld?

3:08 pm on May 25, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:May 9, 2006
posts:128
votes: 0


I just happen to have one of those laying around...

function PostAForm(formname,action) {
var theForm = document.forms[formname];
var PostText = "";
var amp = "";
for(i=0; i<theForm.elements.length; i++){
if(theForm.elements[i].type == "text" theForm.elements[i].type == "textarea" theForm.elements[i].type == "hidden"){
PostText += amp+theForm.elements[i].name+"="+encodeURIComponent(theForm.elements[i].value);
} else if (theForm.elements[i].type == "checkbox") {
PostText += amp+theForm.elements[i].name+"="+theForm.elements[i].checked;
} else if (theForm.elements[i].type == "select-one") {
PostText += amp+theForm.elements[i].name+"="+theForm.elements[i].options[theForm.elements[i].selectedIndex].text;
}
amp = "&";
}
var url = "<?php echo $uname;?>?"+action;
// code for Mozilla, etc.
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send(PostText);

} else if (window.ActiveXObject) { //Code for IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (xmlhttp) {
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send(PostText);
}//end xmlhttp
}//end ie code
}//end PostAForm function

- JS

1:00 am on May 26, 2006 (gmt 0)

New User

10+ Year Member

joined:Mar 10, 2006
posts:33
votes: 0


Thanks! I had tried form.elements in a previous incarnation, but think then I was making another mistake. Thanks to your code I managed to put my own function together.

This function will traverse the form you pass it, and create a query string which can be used for sending forms by AJAX, with either GET or POST. For GET you'll need to prepend the '?' to the query string.

I used various online tutorials, examples, forums and my own stuff to create this. Lots of which I don't remember; but thanks to everyone who shared.


function create_request_string(theForm)
{
var reqStr = "";

for(i=0; i < theForm.elements.length; i++)
{
isFormObject = false;

if (theForm.elements[i].tagName == "INPUT")
{
switch (theForm.elements[i].type)
{
case "text":
case "hidden":
reqStr += theForm.elements[i].name + "=" + theForm.elements[i].value;
isFormObject = true;
break;

case "checkbox":
if (theForm.elements[i].checked)
{
reqStr += theForm.elements[i].name + "=" + theForm.elements[i].value;
}else{
reqStr += theForm.elements[i].name + "=";
}
isFormObject = true;
break;

case "radio":
if (theForm.elements[i].checked)
{
reqStr += theForm.elements[i].name + "=" + theForm.elements[i].value;
isFormObject = true;
}
}
}

if (theForm.elements[i].tagName == "SELECT")
{
var sel = theForm.elements[i];
reqStr += sel.name + "=" + sel.options[sel.selectedIndex].value;
isFormObject = true;
}

if ((isFormObject) && ((i+1)!= theForm.elements.length))
{
reqStr += "&";
}

}

return reqStr;
}

Comments, feedback and additions welcome!

12:43 pm on May 26, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:May 9, 2006
posts:128
votes: 0


you'd probably want to use the
encodeURIComponent
function on textareas and textboxes. Otherwise, not all you data will be passed properly through the URL.

- JS

5:42 pm on May 28, 2006 (gmt 0)

New User

10+ Year Member

joined:Mar 10, 2006
posts:33
votes: 0


Thanks, good point. I'd already added in the text area capability, changed some ifs for another switch, and am now using encodeURIComponent() where necessary. I've tested this and it works well.

Here is the updated function:


function create_request_string(theForm)
{
var reqStr = "";

for(i=0; i < theForm.elements.length; i++)
{
isFormObject = false;

switch (theForm.elements[i].tagName)
{
case "INPUT":

switch (theForm.elements[i].type)
{
case "text":
case "hidden":
reqStr += theForm.elements[i].name + "=" + encodeURIComponent(theForm.elements[i].value);
isFormObject = true;
break;

case "checkbox":
if (theForm.elements[i].checked)
{
reqStr += theForm.elements[i].name + "=" + theForm.elements[i].value;
}else{
reqStr += theForm.elements[i].name + "=";
}
isFormObject = true;
break;

case "radio":
if (theForm.elements[i].checked)
{
reqStr += theForm.elements[i].name + "=" + theForm.elements[i].value;
isFormObject = true;
}
}
break;

case "TEXTAREA":

reqStr += theForm.elements[i].name + "=" + encodeURIComponent(theForm.elements[i].value);
isFormObject = true;
break;

case "SELECT":
var sel = theForm.elements[i];
reqStr += sel.name + "=" + sel.options[sel.selectedIndex].value;
isFormObject = true;
break;
}

if ((isFormObject) && ((i+1)!= theForm.elements.length))
{
reqStr += "&";
}

}

return reqStr;
}

Thanks for your help again!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members