How to display data from html form in table using jquery

Question

I have do that but nothing display. I don't understand what I have done wrong

<div class="">
  <table border="1">
    <thead>
      <tr>
        <td>Name</td>
        <td>Clas</td>
        <td>Roll</td>
        <td>Age</td>
        <td>NID</td>
      </tr>
    </thead>
    <tbody id="displayArea"></tbody>
  </table>
</div>
<div class="formdata">
  <form action="" method="post" id="myForm">
    <input type="text" name="name"><br/><br/>
    <input type="text" name="roll"><br/><br/>
    <input type="text" name="class"><br/><br/>
    <input type="text" name="age"><br/><br/>
    <input type="text" name="nid"><br/><br/>
    <input type="submit" name="sub" value="submit">
  </form>
</div>
<script type="text/javascript">
  $('#myForm').submit(function() {
    var $inputs = $('#myForm :input');
    var values = {};
    $inputs.each(function() {
      values[this.name] = $(this).val();
    });
    $('#displayArea').append("<td>" + values.name + "</td><td>" + values.roll + "</td><td>" + values.class + "</td><td>" + values.age + "</td><td>" + values.nid + "</td></tr>");
  });
</script>

If that's all of your code you don't appear to have included jQuery. — Rory McCrossan
– Rory McCrossan, Commented Jan 10, 2019 at 11:12
open your developer console (f12) and fix the errors you see — Andrew
– Andrew, Commented Jan 10, 2019 at 15:51

Rüzgar · Accepted Answer · 2019-01-10 12:50:22Z

First things first. If you forgot to include jQuery, as @Rory McCrossan and @Test Project suggested do that like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The main problem is that first you need to make sure the form doesn't submit itself, but instead let jQuery handle the submit event by adding:

event.preventDefault();

and before that make sure to give argument to the submit function:

 $('#myForm').submit(function(event) {

This is the working example.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="">
  <table border="1">
    <thead>
      <tr>
        <td>Name</td>
        <td>Clas</td>
        <td>Roll</td>
        <td>Age</td>
        <td>NID</td>
      </tr>
    </thead>
    <tbody id="displayArea"></tbody>
  </table>
</div>
<div class="formdata">
  <form action="" method="post" id="myForm">
    <input type="text" name="name"><br/><br/>
    <input type="text" name="roll"><br/><br/>
    <input type="text" name="class"><br/><br/>
    <input type="text" name="age"><br/><br/>
    <input type="text" name="nid"><br/><br/>
    <input type="submit" name="sub" value="submit">
  </form>
</div>
<script type="text/javascript">
  $('#myForm').submit(function(event) {
    event.preventDefault();
    var $inputs = $('#myForm :input');
    var values = {};
    $inputs.each(function() {
      values[this.name] = $(this).val();
    });
    $('#displayArea').append("<tr><td>" + values.name + "</td><td>" + values.roll + "</td><td>" + values.class + "</td><td>" + values.age + "</td><td>" + values.nid + "</td></tr>");
    $("input[type=text], textarea").val("");
  });
</script>

EDİT: You also forgot to include opening <tr> to append function. I also corrected that. And it is always good practice to clear form inputs like $("input[type=text], textarea").val("");.

Collectives™ on Stack Overflow

How to display data from html form in table using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related