...

View Full Version : createElement() - adding select box



venku82
03-13-2006, 11:53 AM
Im facing problem in my form

I've loaded some data from server side, with some selecte boxex, and text boxes in one row(<tr>)
say 4 rows

my form containing "Add new button", which displays same row having same values of above 4 rows

i used createElement("Select") function, but im unable add elements to that select list

plz help, its urgent, send the code

thankx
Venki,

Kor
03-13-2006, 12:12 PM
use better cloneNode(true) method to clone the whole row, and append it to the tbody. cloneNode(true) will perform something like a "copy to the clipboard" action. The advantage is that it will copy the whole element, including all the childNodes, so that there is no need to create them again. myabe you will need to increment the names of the form elements, but that is quite easy.

Kor
03-13-2006, 12:47 PM
Here's an example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function addRow(){
var r = document.getElementById('mytab').getElementsByTagName('tr');
var len = r.length;
var clone=r[0].cloneNode(true);
for(var i=0;i<clone.getElementsByTagName('td').length;i++){
var kids=clone.getElementsByTagName('td')[i].childNodes;
for(var j=0;j<kids.length;j++){
(kids[j].name)?kids[j].name+=len:null
}
}
r[0].parentNode.appendChild(clone)
}
</script>
</head>
<body>
<form>
<table id="mytab" width="400" border="1" cellspacing="1" cellpadding="0">
<tr>
<td> <select name="select">
<option>1</option>
<option>2</option>
</select> </td>
<td> <input name="textfield" type="text"> </td>
</tr>
<tr>
<td> <select name="select1">
<option>1</option>
<option>2</option>
</select> </td>
<td> <input name="textfield1" type="text"> </td>
</tr>
<tr>
<td> <select name="select2">
<option>1</option>
<option>2</option>
</select> </td>
<td> <input name="textfield2" type="text"> </td>
</tr>
<tr>
<td> <select name="select3">
<option>1</option>
<option>2</option>
</select> </td>
<td> <input name="textfield3" type="text"> </td>
</tr>
</table>

<br>
<input type="button" name="Submit" value="Add a new Row" onclick="addRow()">
</form>
</body>
</html>

Basscyst
03-13-2006, 07:39 PM
Here's something I wrote that may save you some headache. I think it does just what you are trying to do. It's for when you want to add another section to a form with the same questions, ie. an employment application for references or something. It will clone any (and all) elements in the form and rename them incrementally.

http://www.codingforums.com/showthread.php?t=60898&highlight=form+element

Basscyst

Kor
03-13-2006, 08:00 PM
Nice code Basscyst. And comprehensive. Basicaly it looks the same ideea as mine, except that I, in my indolence, in order to increment the names, I used exactly the name attribute to find all the form's elements in a row, as I usually use name only for the form's elements.:) :thumbsup: As the rest, as long name is to be used only for the form's elements and the next row is a mirror of the previous, my code should work the same, dynamically, nomatter of the number of elements in a cell or the number of the cells in a row. Of course, I presumed that there will be not other intermediate childNodes between the cell and those form's elements, which should be true most of the cases.

Basscyst
03-13-2006, 08:14 PM
I'm glad you like it, I like the fact that yours can clone a table row, instead of the whole form. I'll also note if you clone a radio box group it will maintain it's grouping (in IE) with the original group, even if you change the name after the cloning. So you actually have to remove the node and define the name, disgustingly at the creation of the element. createElement('<radio name="name">'). I just thought I'd throw that out there as it drove me mad when I made that script.

Basscyst

Kor
03-13-2006, 09:13 PM
Probably you are based too much on the innerHTML IE's alert to check. Now have a look, it's to dig a little bit about why the IE's innerHTML do that:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function addRow(){
var r = document.getElementById('mytab').getElementsByTagName('tr');
var len = r.length;
var clone=r[0].cloneNode(true);
for(var i=0;i<clone.getElementsByTagName ('td').length;i++){
var kids=clone.getElementsByTagName('td')[i].childNodes;
for(var j=0;j<kids.length;j++){
(kids[j].name)?kids[j].name+=len:null
}
}
r[0].parentNode.appendChild(clone);
alert(r[r.length-1].innerHTML)
alert(r[r.length-1].getElementsByTagName('input')[1].name)
}
</script>
</head>
<body>
<form>
<table id="mytab" width="400" border="1" cellspacing="1" cellpadding="0">
<tr>
<td> <select name="select">
<option>1</option>
<option>2</option>
</select> </td>
<td> <input name="textfield" type="text"> </td>
<td><input name="rad" type="radio">
<input name="rad" type="radio">
<input name="rad" type="radio"></td>
</tr>
</table>
<br>
<input type="button" value="Add a new Row" onclick="addRow()">
<input type="submit" value="Submit">
</form>
</body>
</html>


So that the code will show the correct name of the radio button, will submit correctly the names/values, but the innerHTML in IE is "frozen". I have noticed that some time before, so than, when checking the code I don't use innerHTML too often, I prefere to alert directly the attributes or values of a certain object...

Basscyst
03-13-2006, 11:39 PM
Probably you are based too much on the innerHTML IE's alert to check. Now have a look, it's to dig a little bit about why the IE's innerHTML do that:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function addRow(){
var r = document.getElementById('mytab').getElementsByTagName('tr');
var len = r.length;
var clone=r[0].cloneNode(true);
for(var i=0;i<clone.getElementsByTagName ('td').length;i++){
var kids=clone.getElementsByTagName('td')[i].childNodes;
for(var j=0;j<kids.length;j++){
(kids[j].name)?kids[j].name+=len:null
}
}
r[0].parentNode.appendChild(clone);
alert(r[r.length-1].innerHTML)
alert(r[r.length-1].getElementsByTagName('input')[1].name)
}
</script>
</head>
<body>
<form>
<table id="mytab" width="400" border="1" cellspacing="1" cellpadding="0">
<tr>
<td> <select name="select">
<option>1</option>
<option>2</option>
</select> </td>
<td> <input name="textfield" type="text"> </td>
<td><input name="rad" type="radio">
<input name="rad" type="radio">
<input name="rad" type="radio"></td>
</tr>
</table>
<br>
<input type="button" value="Add a new Row" onclick="addRow()">
<input type="submit" value="Submit">
</form>
</body>
</html>


So that the code will show the correct name of the radio button, will submit correctly the names/values, but the innerHTML in IE is "frozen". I have noticed that some time before, so than, when checking the code I don't use innerHTML too often, I prefere to alert directly the attributes or values of a certain object...

Yep, Yep, it does change the name and submit properly to the server, but try to select an option from a cloned row and it will uncheck any options checked in a preceding row.

Basscyst

Kor
03-14-2006, 11:32 AM
Oh, I see... Weird IE bug indeed. So that ? Hmmm you suggest to replace radios with new created one?
--------------
OK, I saw one of your threads here
http://www.codingforums.com/showthread.php?t=60870&highlight=cloned+radio
and some solutions.. Yea, it looks like the radios must be created by all means. Stupid IE...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum