How to read textbox values from html and insert them into tables using JavaScript-Code Examples

Radu TM

How to read textbox values from html and insert them into tables using java script

HTML by Radu TM • May 23, 2022

<html>
<head>
  <script type="text/javascript">
    function insertValues(){
      //get the value of the first textboxâ
      var firstValue = document.getElementById('firstTextbox').value;

      //get the value of the second textbox
      var secondValue = document.getElementById('secondTextbox').value;

      //get the table element
      var table = document.getElementById('myTable');

      //insert the values into the table
      table.rows[0].cells[0].innerHTML = firstValue;
      table.rows[0].cells[1].innerHTML = secondValue;
    }
  </script>
</head>
<body>

  <!--Create a table with two columns.-->
  <table id="myTable" border="1">
    <tr>
      <td>First Column</td>
      <td>Second Column</td>
    </tr>
  </table>

  <br/>

  <!--Create two textboxes.-->
  First Textbox: <input type="text" id="firstTextbox" /><br/>
  Second Textbox: <input type="text" id="secondTextbox" /><br/>

  <!--Create a button. When clicked, the values from the textboxes will be inserted into the table.-->
  <input type="button" value="Insert Values" onclick="insertValues();" />
</body>
</html>

0

18.393

Related JavaScript Queries

Latest JavaScript Queries

Explore code examples by categories