How to use jQuery to insert html form data into html table?

Question

I created simple html Employee.html that consist of table and form in same page.

input[type=text],
select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: #b8c6dd;
}

.right {
  right: 0;
  background-color: #dce0d9;
}

table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="split left">
  <center>
    <h2>Employee Task Record</h2>
  </center>

  <table>
    <tr>
      <th>S.N</th>
      <th>Task</th>
      <th>Description</th>
      <th>Complete</th>
      <th>Type</th>
    </tr>
  </table>
</div>
<div class="split right">
  <center>
    <form id="first_form" method="post" action="">
      Given Task : <input type="text" id="first_name" name="task" value="">
      <br><br> Description: <input type="text" name="description" value=""><br>
      <br> Complete: <input type="radio" name="taskDone" value="yes" checked> Yes
      <input type="radio" name="taskDone" value="no"> No<br> <br> Task Type:
      <select>
        <option value="regular">Regular</option>
        <option value="Meeting">Meeting</option>
        <option value="coding">Coding</option>
        <option value="documentation">Documentation</option>
        <option value="support">Support</option>
      </select> <br> <br>
      <input type="submit" onclick="" value="submit" button class="button">
    </form>
  </center>
</div>

Layout of form is below.

Now I want to input values in form,when i click submit button,I want them to display in left table by using jQuery like this.I have new to jQuery and used basic commands of jQuery Selectors like $("*"),$("p.intro") etc.

What have you tried so far, where are you stuck? Adding some HTML elements using jQuery should be well documented — Nico Haase
– Nico Haase, Commented Nov 2, 2018 at 7:07
Please note the <center> tag is obsolete developer.mozilla.org/en-US/docs/Web/HTML/Element/center — Gerard
– Gerard, Commented Nov 2, 2018 at 7:20

Vins4nity · Accepted Answer · 2018-11-02 07:52:24Z

input[type=text],
select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: #b8c6dd;
}

.right {
  right: 0;
  background-color: #dce0d9;
}

table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

$('.btn').on('click', function(event) {
    var firstName = $.trim($('#first_name').val());
    var description = $.trim($('#description').val());
    var taskDone = $('input[name=taskDone]:checked').val();
    var taskType = $('#taskType option:selected').val();
    var numRows = $('#tableBody').find('tr').length;
    var newRow = $('<tr><td></td><td></td><td></td><td></td><td></td></tr>');
    var cols = newRow.children();
    cols.eq(0).text(numRows + 1);
    cols.eq(1).text(firstName);
    cols.eq(2).text(description);
    cols.eq(3).text(taskDone);
    cols.eq(4).text(taskType);
    newRow.appendTo('#tableBody');

});

</script>

<div class="split left">
  <center>
    <h2>Employee Task Record</h2>
  </center>

  <table>
    <tr>
      <th>S.N</th>
      <th>Task</th>
      <th>Description</th>
      <th>Complete</th>
      <th>Type</th>
    </tr>
  </table>
</div>
<div class="split right">
  <center>
    <form id="first_form" method="post" action="">
      Given Task : <input type="text" id="first_name" name="task" value="">
      <br><br> Description: <input type="text" name="description" value=""><br>
      <br> Complete: <input type="radio" name="taskDone" value="yes" checked> Yes
      <input type="radio" name="taskDone" value="no"> No<br> <br> Task Type:
      <select>
        <option value="regular">Regular</option>
        <option value="Meeting">Meeting</option>
        <option value="coding">Coding</option>
        <option value="documentation">Documentation</option>
        <option value="support">Support</option>
      </select> <br> <br>
      <input type="submit" onclick="" value="submit" button class="button">
    </form>
  </center>
</div>

Ajit Kumar · Accepted Answer · 2018-11-02 09:22:24Z

first get the value from the form and append it to the table. Here is your code:

$(document).ready(function(){

$('#first_form').submit(feedTable);

function feedTable(e){
  e.preventDefault();
  if(!this.snNo) this.snNo = 1;
  var task = $('#first_name').val(),
  yes = $('#yes:checked').val(),
  no = $('#no:checked').val(),
  desc = $('input[name="description"]').val(),
  type = $('#ttype').val();
  
  var comp = yes?'yes':'no';
  
  $('#record').append(
    "<tr><td>"+this.snNo+"</td>"+
    "<td>"+task+"</td>"+
    "<td>"+desc+"</td>"+
    "<td>"+comp+"</td>"+
    "<td>"+type+"</td></tr>"
  )
  this.snNo += 1;
}

});

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: #b8c6dd;
}

.right {
  right: 0;
  background-color: #dce0d9;
}

table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

input[type=text],
select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="split left">
  <center>
    <h2>Employee Task Record</h2>
  </center>
  </body>
  <table id='record'>
    <tr>
      <th>S.N</th>
      <th>Task</th>
      <th>Description</th>
      <th>Complete</th>
      <th>Type</th>
    </tr>
  </table>
</div>
<div class="split right">
  <center>
    <form id="first_form" method="post" action="">
      Given Task : <input type="text" id="first_name" name="task" value="">
      <br><br> Description: <input type="text" name="description" value=""><br>
      <br> Complete: <input type="radio" id='yes' name="taskDone" value="yes" checked> Yes
      <input type="radio" name="taskDone" id='no' value="no"> No<br> <br> Task Type:
      <select id='ttype'>
        <option value="regular">Regular</option>
        <option value="Meeting">Meeting</option>
        <option value="coding">Coding</option>
        <option value="documentation">Documentation</option>
        <option value="support">Support</option>
      </select> <br> <br>
      <input type="submit" onclick="" value="submit" button class="button">
    </form>
  </center>
</div>

This worked for me.I had no idea about jQuery append and now I got it.

suresh bambhaniya · Accepted Answer · 2018-11-02 07:38:44Z

here is full example

<!DOCTYPE html>
<html>
<head>
<title>Try update table</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

function addData(){
    $("#resultTable tr:last").after('<tr><td>'+$('input[name="taskDone"]:checked').val()+'</td><td>'+$('#description').val()+'</td><td>'+$('#taskType').children("option:selected").val()+'</td></tr>');
    return false;
}

</script>

</head>
<body>

    <table id="resultTable">
    <tr>
      <th>S.N</th>
      <th>Task</th>
      <th>Description</th>
      <th>Complete</th>
      <th>Type</th>
    </tr>
  </table>

    <form id="first_form" method="post" onsubmit="return addData();">
      Given Task : <input type="text" id="first_name" name="task" value="">
      <br><br> Description: <input type="text" id="description" name="description" value=""><br>
      <br> Complete: <input type="radio" name="taskDone" value="yes" checked> Yes
      <input type="radio"  name="taskDone" value="no"> No<br> <br> Task Type:
      <select id="taskType">
        <option value="regular">Regular</option>
        <option value="Meeting">Meeting</option>
        <option value="coding">Coding</option>
        <option value="documentation">Documentation</option>
        <option value="support">Support</option>
      </select> <br> <br>
      <input type="submit"  value="submit" button class="button">
    </form>

</body>
</html>

This worked for me.I had no idea about jQuery append and now I got it.

Collectives™ on Stack Overflow

How to use jQuery to insert html form data into html table?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related