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

R

_Raven

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">
<!--
var http_request = false;
function makeRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}

function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}

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.tagName == "SELECT") {
var sel = obj.childNodes;
getstr += sel.name + "=" + sel.options[sel.selectedIndex].value +
"&";
}

}
makeRequest('get.php', getstr);
}
-->
</script>
<style>
<!--
.bannerBox{
width : 776px;
height : auto;
position : relative;
border : 1px solid #000000;
}

.bannerImage{
width : 776px;
height : auto;
border : 1px solid #FF0000;
}

.bannerOptions{
width : 200px;
height : auto;
border : 1px solid #000000;
float : left;
clear : none;
margin : 6px 0px 6px 0px;
}

.bannerForm{
width : 574px;
border : 1px solid #000000;
float : right;
clear : both;
margin : 6px 6px 6px 6px;
}

.bannerSubmit{
width : 776px;
height : auto;
border : 1px solid #0000FF;

}

.cBox{
display : inline;
width : 30px;
font-family : tahoma;
font-size : 9pt;
background-color : inherit;
padding-left : 4px;
}
.cText{
width : 80px;
font-family : tahoma;
font-size : 9pt;
padding-left : 2px;
}
.cInput{
width : 488px;
font-family : tahoma;
font-size : 9pt;
color : #0000FF;
padding-left : 2px;
}
.msgBox{
font-weight : bold;
font-family : tahoma;
color : #0000FF;
text-decoration : overline underline;
font-size : 18pt;
margin : 10px;
}
.cReqd{
border-width : 1px 1px 1px 1px;
border-style : solid;
border-color : #FF0000;
}
.upper{
text-transform : uppercase;
}
.disChk{
display : inline;
background-color : inherit;
width : 13px;
height : 13px;
}

.cReqdText{
color : #FFFFFF;
text-transform : uppercase;
text-align : center;
text-decoration : underline;
margin : 2px 2px 2px 2px;
padding : 2px 2px 2px 2px;
width : 100%;
background-color : #FF0000;
}
.siteDisplay{
display : inline;
width : 100%;
background-color : #f2f2f2;
font-weight : bold;
text-align : center;
font-family : tahoma;
font-size : 10pt;
}
.displayBox{
border : 1px solid #000000;
margin : 1px 1px 1px 1px;
}
.sites{

padding : 1px 2px 1px 2px;
}
.buffer{
margin : 6px 0px 6px 0px;
}
.cHelp{
/*display : none;*/
margin-left : 80px;
font-family : tahoma;
font-size : 8pt;
line-height : 8pt;
width : 488px;
background-color : #f2f2f2;
padding : 0px 0px 3px 0px;
}
#cBoxes{
margin : 0px;
text-align : center;
width : 100%;
color : #FF0000;
}
#cShow{
float : right;
clear : none;
cursor : pointer;
font-family : tahoma;
font-size : 8pt;
line-height : 8pt;
color : #0000FF;
}
#cHide{
float : right;
clear : none;
cursor : pointer;
font-family : tahoma;
font-size : 8pt;
line-height : 8pt;
color : #0000FF;
}
caption.messages{
font-weight : bold;
}
#navDiv{
text-align : center;
margin : 6px 0px 10px 0px;
background-color : inherit;
width : 100%;
height : 16px;
vertical-align : middle;
}
#navDiv span{
margin : 6px 6px 6px 6px;
}
#navDiv span a{
text-decoration : none;
color : #000000;
}
#navDiv span a:hover{
text-decoration : underline overline;
color : #0000FF;
}
fieldset.stats{
width : 760px;
}
.r{
border-right : 1px solid #000000;
border-bottom : 1px solid #000000;
}
.l{
border-bottom : 1px solid #000000;
}
.t{
border-right : 1px solid #000000;
}
-->
</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 &lt;a&gt; 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 &lt;img&gt; 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>
 
W

web.dev

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

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">
Click to expand...

The language attribute is deprecated. Just use the type attribute.
<!--
Click to expand...

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>
Click to expand...

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.
 
R

_Raven

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?
 
W

web.dev

_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?
Click to expand...

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.
 
R

_Raven

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);
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help me sort out this script 1
I dont get this. Please help me!! 2
How can I arrange a series of radio buttons? 2
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
"input-group-text" help 7
Buttons lining up 1
Positioning CSS components 1
I am trying to detect Which image id="" was clicked ? 22

Members online

No members online now.
Total: 31 (members: 0, guests: 31)
Robots: 168

Forum statistics

Threads
473,754
Messages
2,569,528
Members
45,000
Latest member
MurrayKeync

Latest Threads

Top