TheCandyman
Technical User
I'm trying to have JavaScript create some html inputs when i click a button and just can't seem to find what i need when searching. I have the basics working but can't figure out some of the appendChild that i think i need. This does correctly add a row to my table with one <input> for each column. I feel as if i'm making no progress and I, sadly, am not sure how to even have it create a <select>, <label>, or <p> options. Here is what i have.
Button to create new <input>
What i'm trying to create in HTML:
What i have for the JS so far:
Button to create new <input>
Code:
<input type="button" class="btn" name="Add" value="Add Another Person" onClick="addRowToTable();">
What i'm trying to create in HTML:
Code:
<p>
<select name="Profession1" id="Profession1" tabindex="7" class="Profession">
<option value="0">-- Select Category--</option>
<option value="1">I am</option>
<option value="2">I am not</option>
</select>
</p>
<p>
<label for="FName1" class="Fname">First Name</label><br />
<input type="text" name="FName1" id="FName1" value="" class="Fname" <%=EnterKey%>>
</p>
<p>
<label for="LName" class="Lname">Last Name</label><br />
<input type="text" name="LName1" id="LName1" value="" class="Fname" <%=EnterKey%>>
</p>
What i have for the JS so far:
Code:
function addRowToTable()
{
var tbl = document.getElementById('tblAddress');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var rowcount = rowcounter();
// cell 0
var cell0 = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'FName' + rowcount;
el.id = 'FName' + rowcount;
el.className = "aClassName";
cell0.appendChild(el);
}
function rowcounter()
{
temp=cln(document.form1.rowcounter.value);
document.form1.rowcounter.value = temp+1 ;
return temp
}