appendChild checkboxes not submitting

K

Keith Page

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;
var newnode_text = document.createTextNode(quadrents);
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);
}

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

kaeli

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

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);
var newnode_text = document.createTextNode(quadrents);
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>

--
 
M

Martin Honnen

kaeli wrote:

divs are not proper children of a form.
Click to expand...

Why not, the HTML 4 definition is at
http://www.w3.org/TR/html4/interact/forms.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.
 
K

kaeli

[email protected] enlightened said:
Why not, the HTML 4 definition is at
http://www.w3.org/TR/html4/interact/forms.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.
Click to expand...


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
 
M

Martin Honnen

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

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;
var newnode_text = document.createTextNode(quadrents);
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="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.
Click to expand...
 
K

kaeli

[email protected] enlightened said:
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:
Click to expand...

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

Michael Schmitt

kaeli wrote:

divs are not proper children of a form.
Click to expand...
Wrong, beside form-elements any block-elements (and script-elements) are allowed.
http://www.w3.org/TR/html401/interact/forms.html#edef-FORM
The following tested successfully in IE.
Click to expand...
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");
Click to expand...
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);
var newnode_text = document.createTextNode(quadrents);
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>
Click to expand...

cu, Michael
 
M

Martin Honnen

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

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-HTML/html.html#ID-6043025
 
K

kaeli

[email protected] enlightened said:
kaeli wrote:



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

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

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-HTML/html.html#ID-6043025
Click to expand...

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

--
 
K

Keith Page

kaeli said:
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?


--
Click to expand...

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

kaeli

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

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;
var newnode_text = document.createTextNode(quadrents);
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>


--
 
K

kaeli

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

And I changed to unique names and IDs.


--
 
T

Thomas 'PointedEars' Lahn

Martin said:
Why not, the HTML 4 definition is at
http://www.w3.org/TR/html4/interact/forms.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.
Click to expand...

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
 

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

How can I hide a div using an event listener on multiple checkboxes? 6
Reversing output of user input by using while loop... 2
How do I fix this issue in sqaurespace code block? 1
Why is this WordPress comments form not submitting? 1
How to treat an input data as variable? 4
I am trying to make an audio player, how do I get the selected file to be playable? 5
Only one table shows up with the information 2
Image shifts to the right when export the page to pdf 4

Members online

No members online now.
Total: 52 (members: 1, guests: 51)
Robots: 473

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top