I can't figure this out! Please tell me what's wrong!

_Raven · Aug 10, 2006

Okay, I am playing with submitting forms with Ajax. I am trying to adapt
this script to my forms:
http://www.captain.at/howto-ajax-form-post-get.php

I have included my code at the bottom of this post.

Basically, this will work correctly if I remove all non-form related tags
from the form => eg span, div, but I want to format the form all pretty like
so???
Right now, it only collects 2 parts of the form fields => sites[] &
banner_id
All of the other fields are skipped or dropped or something, they are not
getting passed to PHP at all.
I cannot for the life of me figure out what is wrong, and was hoping someone
has had simlar experience and can help me out.
I did modify the original javascript to also include hidden fields, but no
other modifications.

WARNING: the css is not firefox compliant! (I havent had chance yet as I was
just testing)

the contents of get.php are:

<?php
print_r($_GET);
?>

and my complete HTML with css and javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Banners</title>
<script language="JavaScript" type="text/javascript">

</script>
<style>

</style>
</head>
<body>
<div class="bannerBox">
<a name="#banner115"></a>
<fieldset style="width:760px;">
<legend>Banner #115</legend>
<div class="bannerImage"><a href="" style="" target="_blank"><img
src="http://www.banners.com/banners/03.gif" alt=""
onMouseover="window.status=''; return true;" onMouseout="window.status='';
return true;" border="0" style="" /></a></div>
<span class="bannerOptions">
<span class="siteDisplay">Display on:</span>
<span class="cHelp" id="cBoxes">Banner to display on these
sites:<br></span>
<form action="javascript:get(document.getElementById('myform2'));"
name="myform2" id="myform2">
<input type="hidden" name="banner_id" value="115">
<input type="checkbox" class="disChk" name="site[]" value="1"><span
class="cBox">D01</span>
<input type="checkbox" class="disChk" name="site[]" value="2"><span
class="cBox">D02</span>
<input type="checkbox" class="disChk" name="site[]" value="3"><span
class="cBox">D03</span>
<input type="checkbox" class="disChk" name="site[]" value="4"><span
class="cBox">D04</span>
<input type="checkbox" class="disChk" name="site[]" value="5"><span
class="cBox">D05</span>
<input type="checkbox" class="disChk" name="site[]" value="6"><span
class="cBox">D06</span>
<input type="checkbox" class="disChk" name="site[]" value="7"><span
class="cBox">D07</span>
<input type="checkbox" class="disChk" name="site[]" value="8"><span
class="cBox">D08</span>
<input type="checkbox" class="disChk" name="site[]" value="9"><span
class="cBox">D09</span>
<input type="checkbox" class="disChk" name="site[]" value="10"><span
class="cBox">D10</span>
<input type="checkbox" class="disChk" name="site[]" value="11"><span
class="cBox">D11</span>
<input type="checkbox" class="disChk" name="site[]" value="12"><span
class="cBox">D12</span>
<input type="checkbox" class="disChk" name="site[]" value="13"><span
class="cBox">D13</span>
<input type="checkbox" class="disChk" name="site[]" value="14"><span
class="cBox">D14</span>
</span>
<span class="bannerForm">
<span class="siteDisplay">Banner Properties:</span>
<span class="cHelp"><span class="cReqdText">Fields in red are
mandatory!<br></span></span>
<label for="banner" class="cText">Banner:</label><input type="text"
name="banner" class="cInput cReqd"
value="http://www.banners.com/banners/03.gif"><br>
<span class="cHelp">Banner: The full path to the banner image.<br></span>
<label for="linking_code" class="cText">Link Code:</label><input
type="text" name="linking_code" class="cInput cReqd" value=""><br>
<span class="cHelp">Link Code: The linking code.<br></span>
<label for="mouseover" class="cText">Mouseover:</label><input type="text"
name="mouseover" class="cInput cReqd" value=""><br>
<span class="cHelp">Mouseover: The text displayed in status bar when
banner is moused over.<br></span>
<label for="alt" class="cText">Alt:</label><input type="text" name="alt"
class="cInput cReqd" value=""><br>
<span class="cHelp">Alt: The text displayed to user when image is
unavailable.<br></span>
<label for="sorter" class="cText">Sorting ID:</label><input type="text"
name="sorter" class="cInput cReqd upper" value="S" maxlength="1"><br>
<span class="cHelp">Sorting ID: The alphabet letter that is used to
determine where banner is displayed in list.<br></span>
<label for="border" class="cText">Border:</label><input type="text"
name="border" class="cInput" value="0" value="0"><br>
<span class="cHelp">Border: width in pixels for image border. Defaults to
0.<br></span>
<label for="link_style" class="cText">Link Style:</label><input
type="text" name="link_style" class="cInput" value=""><br>
<span class="cHelp">Link Style: Inline css passed to <a> tag.
Syntax: [:space:]style=""<br></span>
<label for="banner_style" class="cText">Banner Style:</label><input
type="text" name="banner_style" class="cInput" value=""><br>
<span class="cHelp">Banner Style: Inline css passed to <img> tag.
Syntax: [:space:]style=""<br></span>
<label for="description" class="cText">Description:</label><input
type="text" name="description" class="cInput" value=""><br>
<span class="cHelp">Description: Description of banner.<br></span>
<label for="keywords" class="cText">Keywords:</label><input type="text"
name="keywords" class="cInput" value=""><br>
<span class="cHelp">Keywords: Keywords for banner, used for
searching.<br></span>
</span>
<span class="bannerSubmit"><input type="submit" name="bannerUpdate"
value="Update Banner" onclick="javascript:get('myform2');"></span>
</form>
</fieldset>
</div>
Server-Response:<br>
<span name="myspan" id="myspan"></span>
</body>
</html>

web.dev · Aug 10, 2006

_Raven said:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Actually, the complete doctype would be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<script language="JavaScript" type="text/javascript">

The language attribute is deprecated. Just use the type attribute.

<!--

Comment delimiters are unecessary.

<form action="javascript:get(document.getElementById('myform2'));"
name="myform2" id="myform2">
[snip]

<span class="bannerSubmit"><input type="submit" name="bannerUpdate"
value="Update Banner" onclick="javascript:get('myform2');"></span>

First, you should not be using javascript pseudo-protocol for your
action on your form, nor on your onclick event handler. There are a
plenty of discussions in this newsgroup about the reasons not to if you
search for them.

Secondly, you don't need an onclick event handler for your submit
button, instead, use an onsubmit event handler on your form, for
example:

<form action = "get" onsubmit = "return doGet('myform2')">

In your function, you must return false, or else the form will perform
its default action, i.e., actually submit a form.

_Raven · Aug 10, 2006

Thanks web.dev for checking this out. I have made the suggested changes,
however, when submitted, only 2 of the fields are passed. In this case the
banner_id and the site[] array.
None of the fields following the site array are sent to the php script. I am
of the mind that there is some conflict perhaps with the way the get()
method is iterating over the form fields?
I am not overly strong with JS, as I do PHP mostly. I have this nagging
suspicion that the way I have setup the form with the divs and spans is
possibly interfering with the way the script sees the child nodes of the
form?

web.dev · Aug 11, 2006

_Raven said:
Thanks web.dev for checking this out. I have made the suggested changes,
however, when submitted, only 2 of the fields are passed. In this case the
banner_id and the site[] array.
None of the fields following the site array are sent to the php script. I am
of the mind that there is some conflict perhaps with the way the get()
method is iterating over the form fields?
I am not overly strong with JS, as I do PHP mostly. I have this nagging
suspicion that the way I have setup the form with the divs and spans is
possibly interfering with the way the script sees the child nodes of the
form?

You say that only 2 of your fields are getting passed. Then, I would
suggest you ensure your getstr variable indeed contains everything you
think you were getting before you call your makeRequest function. It
is most likely you are not getting the correct nodes.

_Raven · Aug 11, 2006

Thanks web.dev,

I was able to get it to work correctly using your tips and by modifying the
get() method to traverse the child nodes!
The method I used is probably not the best way, but it works so I am ok with
it.

I did notice one weird thing.
(In case you didn't notice, this script is for managing banners for our
site.)
When I trigger the form, any animated images displayed the scope of the form
suddenly stop being animated and freeze on whatever frame they were in. Not
a big deal either, but it's weird.

Anywho, below I've pasted my modified code that now works.
What I did was assign each nested tag inside the form I want to traverse a
name value => name=" keepGoing"
I'm pretty sure this is a no-no, but it was the only way I could see to make
it work. (any thoughts on a better way?)

function get(obj){
var getstr = "?";
for(i=0; i<obj.childNodes.length; i++){
if (obj.childNodes.tagName == "INPUT") {
if (obj.childNodes.type == "text") {
getstr += obj.childNodes.name + "=" + obj.childNodes.value
+ "&";
}
//added hidden field
if (obj.childNodes.type == "hidden") {
getstr += obj.childNodes.name + "=" + obj.childNodes.value
+ "&";
}
//end mod
if (obj.childNodes.type == "checkbox") {
if (obj.childNodes.checked) {
getstr += obj.childNodes.name + "=" +
obj.childNodes.value + "&";
} else {
getstr += obj.childNodes.name + "=&";
}
}
if (obj.childNodes.type == "radio") {
if (obj.childNodes.checked) {
getstr += obj.childNodes.name + "=" +
obj.childNodes.value + "&";
}
}
}
if(obj.childNodes.name == "keepGoing"){
var keepGoing = obj.childNodes;
///////////////////////////////////////////////////////
for(t=0; t<keepGoing.childNodes.length; t++){
if(keepGoing.childNodes[t].tagName == "INPUT"){
if(keepGoing.childNodes[t].type == "text"){
getstr += keepGoing.childNodes[t].name + "=" +
keepGoing.childNodes[t].value + "&";
}
//added hidden field
if(keepGoing.childNodes[t].type == "hidden") {
getstr += keepGoing.childNodes[t].name + "=" +
keepGoing.childNodes[t].value + "&";
}
//end mod
if(keepGoing.childNodes[t].type == "checkbox"){
if(keepGoing.childNodes[t].checked) {
getstr += keepGoing.childNodes[t].name + "=" +
keepGoing.childNodes[t].value + "&";
}else{
//getstr += keepGoing.childNodes[t].name + "=&";
}
}
if(keepGoing.childNodes[t].type == "radio"){
if(keepGoing.childNodes[t].checked){
getstr += keepGoing.childNodes[t].name + "=" +
keepGoing.childNodes[t].value + "&";
}
}
}
}
///////////////////////////////////////////////////////
}
if (obj.childNodes.tagName == "SELECT") {
var sel = obj.childNodes;
getstr += sel.name + "=" + sel.options[sel.selectedIndex].value +
"&";
}

}
//alert(getstr);
makeRequest('get.php', getstr);
}

Help me sort out this script	1	Oct 17, 2023
I dont get this. Please help me!!	2	Jan 24, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Hey can anyone tell me why input data wont save in my database?	0	Jun 16, 2024
How can I arrange a series of radio buttons?	2	Jan 25, 2024
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Php modal form to email	1	Aug 28, 2024
Can someone pls help me with a little algorithm script	1	Nov 28, 2024

I can't figure this out! Please tell me what's wrong!

_Raven

web.dev

_Raven

web.dev

_Raven

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads