title: Add data to table using onclick function in JavaScript
body: <p>Here is my Code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;h2&gt;Add/Update Person Form&lt;/h2&gt;
  &lt;div id = "data"&gt;
      &lt;form id = "person"&gt;    
          &lt;br&gt;&lt;br&gt;
          Name: &lt;input id = "name" name = "name" type = "text"&gt;
          &lt;br&gt;&lt;br&gt;
          Gender: &lt;input name = "gender" type = "radio" value = "Male"&gt; Male
                  &lt;input name = "gender" type = "radio" value = "Female"&gt; Female
          &lt;br&gt;&lt;br&gt;
          Age: &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input id = "age" name = "age" type = "text"&gt;
          &lt;br&gt;&lt;br&gt;
          City: &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;select id = "city" name = "city"&gt;
                  &lt;option&gt;Lahore&lt;/option&gt;
                  &lt;option&gt;Islamabad&lt;/option&gt;
                  &lt;option&gt;Karachi&lt;/option&gt;
              &lt;/select&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input id = "button" type = "button" value = " Reset " onclick = "ResetForm()"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
          &lt;input id = "button" type = "button" value = " Add " onclick = "AddData()"&gt;
          &lt;input id = "button" type = "button" value = " Update "&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;h3&gt;List Of Persons&lt;/h3&gt;
  &lt;div id = "tab"&gt;
          &lt;table id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Name&lt;/td&gt;
                      &lt;td&gt;Gender&lt;/td&gt;
                      &lt;td&gt;Age&lt;/td&gt;
                      &lt;td&gt;City&lt;/td&gt;
                      &lt;td&gt;Action&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
  
              &lt;/tbody&gt;
          &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the code for JAVASCRIPT:</p>
  
  <pre><code>&lt;script&gt;
      function AddData(){
          var x = document.getElementById("age").value;
          var y = document.getElementById("name").value;
          var letters = '/^[a-zA-Z]+$/'; 
          if((parseInt(x)!=(x))&amp;&amp;(y==parseInt(y))){
              alert("Wrong Value Entered");
          }
          else{
              var rows = "";
              var name = document.getElementById("gender").value;
              var gender = document.getElementById("gender").value;
              var age = document.getElementById("age").value;
              var city = document.getElementById("city").value;   
  
              rows += "&lt;tr&gt;&lt;td&gt;" + name + "&lt;/td&gt;&lt;td&gt;" + gender + "&lt;/td&gt;&lt;td&gt;" + age + "&lt;/td&gt;&lt;td&gt;" + city + "&lt;/td&gt;&lt;/tr&gt;";
              $(rows).appendTo("#list tbody");
          }   
      }
  
      function ResetForm(){
          document.getElementById("person").reset();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now what I want to do is that there are three buttons in this code. Add, reset, update.
  Im working on Add right now Reset works. I've written the above code to add data but when ever I click Add the data is not added to the table body. I am using onclick function to add data. All this work is done on a single HTML page. I think the problem is because of single page but I have to do this on one page. Need help with this.</p>