Add form elements dynamically

The code below will add new form elements when ever I click the add button. However when you add more elements the combo box element goes out of alignment. Try it out. Now is there a way to fix this problem?.

multientry.js

function addValue(divname){
   var newdiv = document.createElement('div');
   newdiv.innerHTML = "<BR><INPUT TYPE='text' name='index1'>";
   document.getElementById(divname).appendChild(newdiv);
}
   
function addUnit(divname){
   var newdiv = document.createElement('div');  
   newdiv.innerHTML = "<BR><select name='index2'><option value='gm'>gm</option><option    value='liters'>liters</option><option value='ml'>ml</option><option value='kg'>kg</option></select>";
   document.getElementById(divname).appendChild(newdiv);
}

function addDescription(divname){
   var newdiv = document.createElement('div'); 
   newdiv.innerHTML = "<BR><INPUT TYPE='text' name='index3'>"
   document.getElementById(divname).appendChild(newdiv);
}

multientry.html

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT SRC="multientry.js" LANGUAGE="Javascript" TYPE="text/javascript"></SCRIPT>
</HEAD>
<BODY>
<FORM method="post">
<TABLE>
<TR>
<TD>Measurement</TD>
<TD>Unit</TD>
<TD>Description</TD>
</TR>
<TR>
<TD><DIV id="input1"><INPUT TYPE="text" name="index1"></DIV></TD>
<TD><DIV id="input2"><select name="index2"><option value="gm">gm</option><option value="liters">liters</option><option value="ml">ml</option><option value="kg">kg</option></select>
</DIV></TD>
<TD><DIV id="input3"><INPUT TYPE="text" name="index3"></DIV></TD>
</TR>
<TR>
<TD COLSPAN="3"><INPUT TYPE="button" VALUE="Add" onClick="addValue('input1'),addUnit('input2'),addDescription('input3')"></TD>
</TR>
</FORM>
</BODY>
</HTML>

3

Contributors

4

Replies

3 Months

Discussion Span

1 Year Ago

Last Updated

6

Views

solomon_13000

Junior Poster

118 posts since Jul 2009

Reputation Points: 24

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

I found the solution as below:

multientry.js

function addRow(tableID){
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var cell1 = row.insertCell(0);
    cell1.innerHTML = "<INPUT TYPE='checkbox' name='index0'>";
    var cell2 = row.insertCell(1);
    cell2.innerHTML = "<INPUT TYPE='text' name='index1'>";
    var cell3 = row.insertCell(2);
    cell3.innerHTML = "<select name='index2'><option value='gm'>gm</option><option    value='liters'>liters</option><option value='ml'>ml</option><option value='kg'>kg</option></select>";
    var cell4 = row.insertCell(3);
    cell4.innerHTML = "<INPUT TYPE='text' name='index3'>";
}

function deleteRow(tableID){
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0;i<rowCount;i++){
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(chkbox!=null && chkbox.checked==true){
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    } 
}

multientry.html

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT SRC="multientry.js" LANGUAGE="Javascript" TYPE="text/javascript"></SCRIPT>
</HEAD>
<BODY>
<FORM method="post">
<TABLE id="dataTable">
<TR>
<TD COLSPAN="3">
<INPUT TYPE="button" VALUE="Add" onClick="addRow('dataTable')">
<INPUT TYPE="button" VALUE="Delete" onClick="deleteRow('dataTable')">
</TD>
</TR>
<TR>
<TH>Select</TH>
<TH>Measurement</TH>
<TH>Unit</TH>
<TH>Description</TH>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="index0"></TD>
<TD><INPUT TYPE="text" name="index1"></TD>
<TD><SELECT name="index2"><OPTION VALUE="gm">gm</OPTION><OPTION VALUE="liters">liters</OPTION><OPTION VALUE="ml">ml</OPTION><OPTION VALUE="kg">kg</OPTION></SELECT>
</TD>
<TD><INPUT TYPE="text" name="index3"></TD>
</TR>
</FORM>
</BODY>
</HTML>

solomon_13000

Junior Poster

118 posts since Jul 2009

Reputation Points: 24

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

You are appending elements to same TD,
instead I would suggest you to add TR TD FOR EACH ROW

urtrivedi

Posting Virtuoso

1,724 posts since Dec 2008

Reputation Points: 299

Solved Threads: 366

Skill Endorsements: 24

1 Year Ago

0

You are appending elements to same TD,
instead I would suggest you to add TR TD FOR EACH ROW

May I know how?

solomon_13000

Junior Poster

118 posts since Jul 2009

Reputation Points: 24

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

hi
I want to create an dynamic form like this
[IMG]http://www.bobfileupload.com/download.py?id=7435[/IMG]
(the picture is rtl)
when user click on tick button
can create a new form
can anybody help me?
excuse me for my bad english

lordjohar

Newbie Poster

1 post since Mar 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

Add form elements dynamically

This article has been dead for over three months: Start a new discussion instead