html - JavaScript Clears My Input Values -

html - JavaScript Clears My Input Values -

i writing simple form @ work using html , have added javascript page allow users add together rows table. table has input type="text" tags , select tags. when user clicks button add together row, javascript adds row, clears input , select tags.

my script is

var x = x + 1; function another() { x = x + 1; y = y + 1; var bigtable = document.getelementbyid("bigtable"); bigtable.innerhtml += ("<tr><td class=\"bigtable2\" align=\"center\"><select name=\"po" + x + "\"><option>select</option><option>1234567890</option></select> </td><td class=\"bigtable2\" align=\"center\"><input type=\"text\" name=\"sku" + x + "\"></td><td class=\"bigtable2\" align=\"center\"><input type=\"text\" name=\"modelnum" + x + "\"></td><td class=\"bigtable2\" align=\"center\"><input type=\"text\" name=\"itemnum" + x + "\"></td><td class=\"bigtable2\" align=\"center\"><input type=\"text\" name=\"qty" + x + "\" id=\"qty"+x+"\" onblur=\"total();\"></td></tr>"); }

i'm not sure issue here. "+=" statement resetting table = statement would?

edit: don't know how of code appear, displayed not of code. have basic table , using javascript utilize += statement add together html it.

edit: table this:

<table id="bigtable"> <tr> <th>p.o. #</th> <th>sku #</th> <th>model #</th> <th>item #</th> <th>quantity</th> </tr> <tr> <td class="bigtable" align="center"> <select name="po1"> <option>select</option> <option>1234567890</option> </select> </td> <td class="bigtable2" align="center"><input type="text" name="sku1"></td> <td class="bigtable2" align="center"><input type="text" name="modelnum1"></td> <td class="bigtable2" align="center"><input type="text" name="itemnum1"></td> <td class="bigtable2" align="center"><input type="text" name="qty1" id="qty1" onblur="total();"></td> </tr> </table>

my javascript replicates between tags. , utilize variable x update number in names inputs , dropdowns. variable y used increment calculation function.

when edit innerhtml of html element, entire dom gets re-parsed. since input's values aren't stored in input elements's html, cleared.

an alternative utilize dom manipulation add together row:

function another(){ x = x + 1; y = y + 1; var bigtable = document.getelementbyid("bigtable"); vat tr = document.createelement('tr'); tr.innerhtml = ("<td class='bigtable2' align='center'><select name='po" + x + "'><option>select</option><option>1234567890</option></select></td>"+ "<td class='bigtable2' align='center'><input type='text' name='sku" + x + "'></td>"+ "<td class='bigtable2' align='center'><input type='text' name='modelnum" + x + "'></td>"+ "<td class='bigtable2' align='center'><input type='text' name='itemnum" + x + "'></td>"+ "<td class='bigtable2' align='center'><input type='text' name='qty" + x + "' id='qty" + x + "' onblur='total();'></td>"); bigtable.appendchild(tr); }

notice how string no longer contains <tr> tag. codes creates tr element, adds rows it, adds whole, (parsed), tr table.

(i changed tags / attributes lowercase , replaced \" ' create more readable)

javascript html