input field resets when updating webpage

ThoHug · 10-08-2012, 11:48 PM

I have a webpage I am designing where there is at least one input text field, an add button, and a submit button. The add button will add another row containing an input text field and an add button.

The problem is that when I click the add button, the text in the input text field disappears. Here is a scaled down version of the code:

Code:

<!DOCTYPE html>
<html>
<body>

<form>
<table id=tablebox><tr><td><input type=text id=outcome0></td><td><input type=submit value=Add onclick="AddRow(0)"></td></tr></table></form><input type=submit value=done onclick="submitForm"><br>

<script>
  function AddRow(someID){
    var someNum = someID;
    var curName = "outcome" + someNum;
    someNum++;
    var someName = "outcome" + someNum;
    document.getElementById("tablebox").innerHTML = document.getElementById("tablebox").innerHTML + "<tr><td><input type=text id=" + someName + "></td><td><input type=submit value=Add onclick=AddRow(" + someNum + ")></td></tr>";
  }
</script>

</body>
</html>

xelawho · 10-09-2012, 01:52 AM

change this:

Code:

<input type=submit value=Add onclick="AddRow(0)">

to this:

Code:

<input type="button" value="Add" onclick="AddRow(0)">

ThoHug · 10-09-2012, 03:23 AM

It still fails. I have this snippet up at http://www.thohug.org/test.php. If you type into the text box and click on add, you'll see the next text box come up, but the contents of the first text box disappear.

xelawho · 10-09-2012, 03:56 PM

it's a nasty way of adding rows to a table, anyway (if you look at your current code, it creates a new tbody every time a row is added), and it will fail in IE (because rom what I understand IE cannot make "nested" elements - like <tr><td></td></tr> - using innerHTML

AND if you click the first button twice, you succeed in making two inputs with the id "outcome1"

this, I think, is a better approach, which solves all the above plus your initial problem...

Code:

<body>

<form>
<table id="tablebox">
<tr>
<td><input type="text" id="outcome0"></td>
<td><input type="button" value="Add" onclick="AddRow()"></td>
</tr>
</table>
</form>
<input type="submit" value="done" onclick="submitForm"><br>

<script>
var count=0;
  function AddRow(someID){
    count++;
	var therow=document.createElement("tr");
	var cellone=document.createElement("td");
	cellone.innerHTML = "<input type='text' id='outcome"+count + "'>"
	var celltwo=document.createElement("td");
	celltwo.innerHTML ="<input type='button' value='Add' onclick='AddRow()'>";
	therow.appendChild(cellone);
	therow.appendChild(celltwo);
    document.getElementById("tablebox").getElementsByTagName("tbody")[0].appendChild(therow);
  }
</script>
</body>