473,382 Members | 1,180 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,382 software developers and data experts.

appendChild checkboxes not submitting

I have a page that changes a list of checkboxes based on what city you
select, however when i insert the new nodes the values are not
submitted when the boxes are checked and form is sent, its like they
are not hooked to the form properly.

Any help would be appritiated
JAVASCRIPT ///
cities[0] = "ne,nw,se,sw";
//change the cities quadrent
function write_quadrent(city_id){
var quadrents = cities[city_id].split(",");
var newnode = document.createElement("div");
newnode.id = "advanced_city_quadrent";
for(var i = 0; i < quadrents.length; i++){
var newnode_input = document.createElement("INPUT");
newnode_input.type = "checkbox";
newnode_input.name = "quadrent";
newnode_input.id = "quadrent";
newnode_input.value = quadrents[i];
var newnode_text = document.createTextNode(quadrents[i]);
newnode.appendChild(newnode_input);
newnode.appendChild(newnode_text);
}
//create new node
var par = document.getElementById("advanced_city_quadrent_ho lder");
var checkboxes = document.getElementById("advanced_city_quadrent");
var replaced = par.replaceChild(newnode,checkboxes);
}

END JAVASCRIPT ////
<form id="propertysearch" name="propertysearch"
action="/cmn/apps/form_router.php" method="post">

<div id="advanced_city_quadrent_holder">
<div id="advanced_city_quadrent">

<script type="text/javascript">
write_quadrent(readCookie('city'));
</script>
</div>
</div>
<input type="submit" value="submit"/>
</form>
So in the example given above you can say the cookie city is set to 0,
it goes through and writes a checkbox for each quadrent given for that
city, that works fine and the boxes change but when i submit them they
don't send any values.
Jul 23 '05 #1
12 2047
In article <ea*************************@posting.google.com> ,
pa****@Telus.net enlightened us with...
I have a page that changes a list of checkboxes based on what city you
select, however when i insert the new nodes the values are not
submitted when the boxes are checked and form is sent, its like they
are not hooked to the form properly.

Any help would be appritiated


divs are not proper children of a form.

The following tested successfully in IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
var cities = new Array();
cities[0] = "ne,nw,se,sw";

//change the cities quadrent
function write_quadrent(city_id){
var quadrents = cities[city_id].split(",");
var f = document.forms["propertysearch"];
var s = f.elements["sub"];
for(var i = 0; i < quadrents.length; i++){
var newnode_input = document.createElement("INPUT");
newnode_input.setAttribute("type","checkbox");
newnode_input.setAttribute("name","quadrent");
newnode_input.setAttribute("id","quadrent");
newnode_input.setAttribute("value",quadrents[i]);
var newnode_text = document.createTextNode(quadrents[i]);
f.insertBefore(newnode_input,s);
f.insertBefore(newnode_text,s);
}
//create new node
//var par = document.getElementById
("advanced_city_quadrent_holder");
//var checkboxes = document.getElementById
("advanced_city_quadrent");
//var replaced = par.replaceChild(newnode,checkboxes);
}

</script>
</head>

<body>

<form id="propertysearch" name="propertysearch"
action="" method="get">
<input type="submit" value="submit" name="sub" id="sub">
</form>
<script type="text/javascript">
write_quadrent(0);
</script>
</body>

--
--
~kaeli~
He's your God, they're your rules - you burn in Hell.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #2


kaeli wrote:

divs are not proper children of a form.


Why not, the HTML 4 definition is at
http://www.w3.org/TR/html4/interact/...html#edef-FORM
and says
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
where %block is defined as
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
which contains DIV so I don't see why divs are not proper children of a
form.

Note that I haven't looked at the original posters code but a <div>
inside of a <form> shouldn't be a problem.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #3
In article <40********@olaf.komtel.net>, ma*******@yahoo.de enlightened
us with...
kaeli wrote:
divs are not proper children of a form.


Why not, the HTML 4 definition is at
http://www.w3.org/TR/html4/interact/...html#edef-FORM
and says
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
where %block is defined as
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
which contains DIV so I don't see why divs are not proper children of a
form.

Note that I haven't looked at the original posters code but a <div>
inside of a <form> shouldn't be a problem.

The original code appended form elements to a div inside a div that was
inside the form, not the form itself.
It didn't work that way. It worked when I appended them to the form
directly. I changed a couple other things, though, so maybe it was
really something else that was the problem.

Check out the original post and compare to mine that worked. Do you see
what else might have been the problem?
--
--
~kaeli~
Experience is something you don't get until just after you
need it.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #4


kaeli wrote:
In article <40********@olaf.komtel.net>, ma*******@yahoo.de enlightened
us with... The original code appended form elements to a div inside a div that was
inside the form, not the form itself.
It didn't work that way.


I don't think the <form>/<div> structure is a problem, I have simply
removed the function call that was manipulating the document while the
<div> are loading beneath of the <form> and then I don't have any
problem with the checkboxes being submitted with IE6:

<html lang="en">
<head>
<title>adding form controls</title>
<script type="text/javascript">
var cities = [];
cities[0] = "ne,nw,se,sw";
//change the cities quadrent
function write_quadrent(city_id){
var quadrents = cities[city_id].split(",");
var newnode = document.createElement("div");
newnode.id = "advanced_city_quadrent";
for(var i = 0; i < quadrents.length; i++){
var newnode_input = document.createElement("INPUT");
newnode_input.type = "checkbox";
newnode_input.name = "quadrent";
newnode_input.id = "quadrent";
newnode_input.value = quadrents[i];
var newnode_text = document.createTextNode(quadrents[i]);
newnode.appendChild(newnode_input);
newnode.appendChild(newnode_text);
}
//create new node
var par = document.getElementById("advanced_city_quadrent_ho lder");
var checkboxes = document.getElementById("advanced_city_quadrent");
var replaced = par.replaceChild(newnode,checkboxes);
}
</script>
</head>
<body>
<form id="propertysearch" name="propertysearch"
action="jsInterpreter.html" method="get">

<div id="advanced_city_quadrent_holder">
<div id="advanced_city_quadrent">
</div>
</div>
<input type="submit" value="submit"/>
</form>
<script type="text/javascript">
write_quadrent(0);
</script>
</body>
</html>

But I think Keith, the original poster needs to tell us which browser he
has had problems with.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #5
In article <40********@olaf.komtel.net>, ma*******@yahoo.de enlightened
us with...


kaeli wrote:
In article <40********@olaf.komtel.net>, ma*******@yahoo.de enlightened
us with...

The original code appended form elements to a div inside a div that was
inside the form, not the form itself.
It didn't work that way.


I don't think the <form>/<div> structure is a problem, I have simply
removed the function call that was manipulating the document while the
<div> are loading beneath of the <form> and then I don't have any
problem with the checkboxes being submitted with IE6:


Ah, that must have been the problem.
Makes sense. I moved it just because. Maybe it was my sixth sense. *heh*

I also changed all the setters to setAttribute instead of using the dot
notation in the OP. Think that matters, or is the dot notation supported
by most browsers? I was thinking it was an IE thing, so I switched it.

--
--
~kaeli~
Why do they lock gas station bathrooms? Are they afraid
someone will clean them?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #6


kaeli wrote:

I also changed all the setters to setAttribute instead of using the dot
notation in the OP. Think that matters, or is the dot notation supported
by most browsers? I was thinking it was an IE thing, so I switched it.


In my view as long as you are scripting HTML pages (text/html content)
in current browsers then scripting
element.attributeName
is better and more consistently supported than
element.getAttribute('attributename')
element.setAttribute('attributename', 'value')
For script properties it is clear that the case matters while with
setAttribute/getAttribute in HTML the casing shouldn't matter but in IE
it matters. And there are those HTML attributes which collide with
keywords in programming languages where then the property name is
slightly changed (e.g. class in HTML, className in DOM, for in HTML,
htmlFor in DOM) and for the properties I think browsers are consistent e.g.
element.className
works consistently while at least IE makes problems with
element.setAttribute('class', '...')
and wants
element.setAttribute('className', '...')
which then doesn't work with other browsers.

And of course scripting HTML attributes as JavaScript object properties
is well defined in the W3C DOM HTML module, for example for <input>
element objects at
http://www.w3.org/TR/DOM-Level-2-HTM...tml#ID-6043025

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #7
kaeli wrote:


divs are not proper children of a form. Wrong, beside form-elements any block-elements (and script-elements) are allowed.
http://www.w3.org/TR/html401/interac...html#edef-FORM
The following tested successfully in IE. But still the page contains an error. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
var cities = new Array();
cities[0] = "ne,nw,se,sw";

//change the cities quadrent
function write_quadrent(city_id){
var quadrents = cities[city_id].split(",");
var f = document.forms["propertysearch"];
var s = f.elements["sub"];
for(var i = 0; i < quadrents.length; i++){
var newnode_input = document.createElement("INPUT");
newnode_input.setAttribute("type","checkbox");
newnode_input.setAttribute("name","quadrent");
newnode_input.setAttribute("id","quadrent"); In every cycle of this loop the newly generated element gets the same id.
This is no valid HTML.
Better do something like this:
newnode_input.setAttribute("id","quadrent"+i); newnode_input.setAttribute("value",quadrents[i]);
var newnode_text = document.createTextNode(quadrents[i]);
f.insertBefore(newnode_input,s);
f.insertBefore(newnode_text,s);
}
//create new node
//var par = document.getElementById
("advanced_city_quadrent_holder");
//var checkboxes = document.getElementById
("advanced_city_quadrent");
//var replaced = par.replaceChild(newnode,checkboxes);
}

</script>
</head>

<body>

<form id="propertysearch" name="propertysearch"
action="" method="get">
<input type="submit" value="submit" name="sub" id="sub">
</form>
<script type="text/javascript">
write_quadrent(0);
</script>
</body>

cu, Michael
Jul 23 '05 #8
In article <40********@olaf.komtel.net>, ma*******@yahoo.de enlightened
us with...


kaeli wrote:

I also changed all the setters to setAttribute instead of using the dot
notation in the OP. Think that matters, or is the dot notation supported
by most browsers? I was thinking it was an IE thing, so I switched it.
In my view as long as you are scripting HTML pages (text/html content)
in current browsers then scripting
element.attributeName
is better and more consistently supported than
element.getAttribute('attributename')
element.setAttribute('attributename', 'value')


Really? Good to know. I work mainly with IE and Netscape for my intranet
apps.
Do you have documentation on that for other browsers? I only checked IE
and netscape/mozilla/gecko.
For script properties it is clear that the case matters while with
setAttribute/getAttribute in HTML the casing shouldn't matter but in IE
it matters.
Yeah, I'm used to that. I always use IE-style casing and so far it's
always worked in NN7, too. Not that I do overmuch with setAttribute.

And of course scripting HTML attributes as JavaScript object properties
is well defined in the W3C DOM HTML module, for example for <input>
element objects at
http://www.w3.org/TR/DOM-Level-2-HTM...tml#ID-6043025


I have yet to be able to read that documentation very well. But thanks
for the link.
I don't suppose anyone has considered translating that document into
english? ;)

--
--
~kaeli~
Those who jump off a bridge in Paris... are in Seine.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #9
kaeli <ti******@NOSPAM.comcast.net> wrote in message news:<MP************************@nntp.lucent.com>. ..
In article <40********@olaf.komtel.net>, ma*******@yahoo.de enlightened
us with...
kaeli wrote:
divs are not proper children of a form.


Why not, the HTML 4 definition is at
http://www.w3.org/TR/html4/interact/...html#edef-FORM
and says
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
where %block is defined as
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
which contains DIV so I don't see why divs are not proper children of a
form.

Note that I haven't looked at the original posters code but a <div>
inside of a <form> shouldn't be a problem.

The original code appended form elements to a div inside a div that was
inside the form, not the form itself.
It didn't work that way. It worked when I appended them to the form
directly. I changed a couple other things, though, so maybe it was
really something else that was the problem.

Check out the original post and compare to mine that worked. Do you see
what else might have been the problem?
--


This hasn't been tested in ie, the organization is only about 20 users
and is firefox throughout, so ie doesn't matter. I guess i should have
mentioned that.
Jul 23 '05 #10
In article <ea**************************@posting.google.com >,
pa****@Telus.net enlightened us with...

This hasn't been tested in ie, the organization is only about 20 users
and is firefox throughout, so ie doesn't matter. I guess i should have
mentioned that.


Going closer to your original code and incorporating suggestions by
others...
This worked fine in NN7. AFAIK, that should be okay for Firefox, too.
Seems it was just the script being inside the div that gets replaced.
Watch for word-wrap.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
var cities = new Array();

cities[0] = "ne,nw,se,sw";
//change the cities quadrent
function write_quadrent(city_id){
var quadrents = cities[city_id].split(",");
var newnode = document.createElement("div");
newnode.id = "advanced_city_quadrent";
for(var i = 0; i < quadrents.length; i++){
var newnode_input = document.createElement("INPUT");
newnode_input.type = "checkbox";
newnode_input.name = "quadrent"+i;
newnode_input.id = "quadrent"+i;
newnode_input.value = quadrents[i];
var newnode_text = document.createTextNode(quadrents[i]);
newnode.appendChild(newnode_input);
newnode.appendChild(newnode_text);
}
//create new node
var par = document.getElementById
("advanced_city_quadrent_holder");
var checkboxes = document.getElementById
("advanced_city_quadrent");
var replaced = par.replaceChild(newnode,checkboxes);
}

</script>
</head>

<body>

<form id="propertysearch" name="propertysearch"
action="" method="get">
<div id="advanced_city_quadrent_holder">
<div id="advanced_city_quadrent">
</div>
</div>

<input type="submit" value="submit" name="sub" id="sub">
</form>
<script type="text/javascript">
write_quadrent(0);
</script>
</body>
</html>
--
--
~kaeli~
If God dropped acid, would he see people?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #11
In article <MP************************@nntp.lucent.com>,
ti******@NOSPAM.comcast.net enlightened us with...
This worked fine in NN7. AFAIK, that should be okay for Firefox, too.
Seems it was just the script being inside the div that gets replaced.


And I changed to unique names and IDs.
--
--
~kaeli~
If God dropped acid, would he see people?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #12
Martin Honnen wrote:
kaeli wrote:
divs are not proper children of a form.


Why not, the HTML 4 definition is at
http://www.w3.org/TR/html4/interact/...html#edef-FORM
and says
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
where %block is defined as
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
which contains DIV so I don't see why divs are not proper children of a
form.


Exactly. And with HTML 4.01 Strict, "div" is a reasonable element and
one of the block elements that *must* be the direct descendant of the
"form" element.
PointedEars
Jul 23 '05 #13

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

Similar topics

5
by: LRW | last post by:
I did a Web search, and a deja.com search on this...and I'm finding how to make checkboxes act like radiobuttons, and other interesting behaviors, but nothing that quite answers my question. If...
1
by: Claire | last post by:
Hello, I am having a problem in my struts application with the checkboxes in my form. I have an array of checkboxes, some of which may be already selected when the form loads. My problem is when...
8
by: Ralph Freshour | last post by:
I have multiple checkbox's created with an array name because I have many on the same web page - their names are like: frm_chk_delete frm_chk_delete frm_chk_delete frm_chk_delete etc. Here...
5
by: @(none) | last post by:
I have a page which is a set of CheckBoxes generated daily and thus the number of Checkboxes changes each day. What I want to do is allow the user to select one or more checkboxes and the push a...
6
by: terence.parker | last post by:
I currently have the following JS in my header: function checkall(thestate) { var checkboxes=eval("document.forms.EssayList.file_id") for (i=0;i<checkboxes.length;i++)...
3
by: Jaime Stuardo | last post by:
Hi all... I'm trying to use a custom validator for a group of checkboxes in order to validate that at least 1 checkbox is checked before submitting the form. I placed 2 checkbox controls in...
1
by: prash.marne | last post by:
hi , i am having a simple form ----------------------------------------------------------------------- ----------------------------------------------------------------------- --------------...
4
by: jeet | last post by:
Plz help me.Problem is that On the first page I display all other user with checkbox and give user option to select only two user which he wants to send message. Tell me please how I'll get those...
3
sunbin
by: sunbin | last post by:
Hi, I am having in a Trouble when working with dynamic checkboxes (i.e. checkboxes with the same name, e.g. <input type="checkbox" name = "check" value="dynamic integer value">) I have...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.