Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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>
    Last edited by ThoHug; 10-09-2012 at 12:01 AM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,885
    Thanks
    56
    Thanked 539 Times in 536 Posts
    change this:
    Code:
    <input type=submit value=Add onclick="AddRow(0)">
    to this:
    Code:
    <input type="button" value="Add" onclick="AddRow(0)">

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,885
    Thanks
    56
    Thanked 539 Times in 536 Posts
    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>

  • Users who have thanked xelawho for this post:

    ThoHug (10-10-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •