473,224 Members | 1,973 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 software developers and data experts.

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

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[i].tagName == "INPUT") {
if (obj.childNodes[i].type == "text") {
getstr += obj.childNodes[i].name + "=" +
obj.childNodes[i].value + "&";
}
//added hidden field
if (obj.childNodes[i].type == "hidden") {
getstr += obj.childNodes[i].name + "=" +
obj.childNodes[i].value + "&";
}
//end mod
if (obj.childNodes[i].type == "checkbox") {
if (obj.childNodes[i].checked) {
getstr += obj.childNodes[i].name + "=" +
obj.childNodes[i].value + "&";
} else {
getstr += obj.childNodes[i].name + "=&";
}
}
if (obj.childNodes[i].type == "radio") {
if (obj.childNodes[i].checked) {
getstr += obj.childNodes[i].name + "=" +
obj.childNodes[i].value + "&";
}
}
}
if (obj.childNodes[i].tagName == "SELECT") {
var sel = obj.childNodes[i];
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('my form2'));"
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>
Aug 10 '06 #1
4 1868

_Raven wrote:
<!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('my form2'));"
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.

Aug 10 '06 #2
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?
Aug 10 '06 #3

_Raven wrote:
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.

Aug 10 '06 #4
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[i].tagName == "INPUT") {
if (obj.childNodes[i].type == "text") {
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value
+ "&";
}
//added hidden field
if (obj.childNodes[i].type == "hidden") {
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value
+ "&";
}
//end mod
if (obj.childNodes[i].type == "checkbox") {
if (obj.childNodes[i].checked) {
getstr += obj.childNodes[i].name + "=" +
obj.childNodes[i].value + "&";
} else {
getstr += obj.childNodes[i].name + "=&";
}
}
if (obj.childNodes[i].type == "radio") {
if (obj.childNodes[i].checked) {
getstr += obj.childNodes[i].name + "=" +
obj.childNodes[i].value + "&";
}
}
}
if(obj.childNodes[i].name == "keepGoing"){
var keepGoing = obj.childNodes[i];
///////////////////////////////////////////////////////
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[i].tagName == "SELECT") {
var sel = obj.childNodes[i];
getstr += sel.name + "=" + sel.options[sel.selectedIndex].value +
"&";
}

}
//alert(getstr);
makeRequest('get.php', getstr);
}
Aug 11 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Sugapablo | last post by:
My brain is frozen on a convenient way to figure out if today is the 1st, 2nd, 3rd, 4th, or last Thursday of the month. Basically I need something that will figure this out for any given day for...
1
by: Tom | last post by:
How can you figure out exactly where in the classpath a class is located ? For example, assume that my computer has a class "com.MyCompany.MyClass" that is physically located in the jar-file...
18
by: googleboy | last post by:
I didn't think this would be as difficult as it now seems to me. I am reading in a csv file that documents a bunch of different info on about 200 books, such as title, author, publisher, isbn,...
7
by: pat | last post by:
Group, I have a class that has properties: Private _lastUpdated as String Property lastUpdated() As String Get Return _lastUpdated End Get
2
by: Nobody | last post by:
Ok, I've got my page laid out pretty much how I want it, but can't figure out one part... my "content" area is a fixed width table with 2 columns... COL A = 600px wide & COL B = 170px wide... ...
3
by: RallyDSM | last post by:
Pre STory - I've had a lot of problems with this program, and I just added the last part of it (the add item code) and now an older part of the program crashes. Public Structure Stocks Public...
0
by: Frank | last post by:
Hi, I use rpy to plot functions and have the following problem. When I execute the following code line by line (start python and then execute line by line) the resulting figure looks as it...
0
by: lifeshortlivitup | last post by:
I'm working on a program that allows the user to in put a task, click add task button, and then the task displays in a list box and disappears from the text box. I have completed all of...
3
by: ce | last post by:
hi, is there a way to figure out which scripting language was used in a cgi. I used to watch extensions (i.e. py, pl, asp or php) nowadays i hardly see any extensions and really it is hard to...
2
rustaferd
by: rustaferd | last post by:
I have created VBA code that will automatically generate Table and Figure captions in a Word document, but when I run the code that should automatically generate Table and Figure references, I get a...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.