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

    Unhappy values get hidden after beeing posted

    I'm trying to to display the inputted data in the form using the addRow() function but i don't know why shortly after pressing the submit button the table quickly show and hides the values. Can anyone take a look in the code and tell me what i'm doing wrong , i think i'm loosing it here :-(


    This is the code:
    Code:
    <HTML>
      <HEAD>
        <TITLE>Test sample</TITLE>
        <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<link rel="stylesheet" href="style.css" type="text/css" />
    	
    	<script language="javascript">
     
     
    function addRow(){
        var table = document.getElementById('results');
        var row = document.createElement('tr');
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');
        td1.innerHTML = document.getElementById('name).value;
        td2.innerHTML = document.getElementById('lname').value;
        td3.innerHTML = document.getElementById('year').value;
        row.appendChild(td1);
        row.appendChild(td2);
        row.appendChild(td3);
        table.children[0].appendChild(row);
    }
     </script>
    	
      </HEAD>
      <BODY>
      <h1 style="text-align:center;"> <h1>Text heading</h1>
      <h5 style="text-align:left;"> <h5> Text heading sample </h5>
      
    <form>
    Name:<br>
    <input type="text" id="name"><br>
    Last Name: <br> 
    <input type="text" id="lname"><br>
    Age: <br>
    <input type="text" id ="year"><br>
    <input type="submit" id ="buton" value="Submit" onclick="addRow()">
    </form> 
    
    
    <table border="1" id = "results">
    <tr>
    <th>Name</th>
    <th>Last Name</th>
    <th>Age</th>
    </tr>
    </table>
    
      
      </BODY>
    </HTML>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    The submit button will refresh the page (reload it from server or cache). And the reloaded version will not contain the previously dynamically added rows.

    To prevent the page from refreshing, you should "return false" and the function should be called onsubmit of the form instead of onclick of the submit button.
    Code:
    <form onsubmit="addRow(); return false;">
    Name:<br>
    <input type="text" id="name"><br>
    Last Name: <br> 
    <input type="text" id="lname"><br>
    Age: <br>
    <input type="text" id ="year"><br>
    <input type="submit" id ="buton" value="Submit">
    </form>

  • Users who have thanked devnull69 for this post:

    johnwalker (10-25-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
    •