CodingForums.com - input field resets when updating webpage

CodingForums.com (http://www.codingforums.com/index.php)

- DOM and JSON scripting (http://www.codingforums.com/forumdisplay.php?f=15)

- - input field resets when updating webpage (http://www.codingforums.com/showthread.php?t=275795)

input field resets when updating webpage

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>

change this:

Code:

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

to this:

Code:

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

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.

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>