Member Avatar for solomon_13000

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>
Edited by solomon_13000 because: n/a
  • 3 Contributors
  • 4 Replies
  • 794 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by lordjohar
Member Avatar for solomon_13000

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>
Member Avatar for urtrivedi

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

Member Avatar for solomon_13000

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

May I know how?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.