CODEWITHSUNDEEP
javascripthtml
Saurabh Mittal
Saurabh Mittal

Reputation: 33

I want to submit data from form to table using onclick button in Javascript

<html>
<head>
<title>Student form</title>
</head>
<body>
<div id="data">

Form : having 4 fields and 1 button to add data to table.

<form align="center"><h3><b>Student Form</b></h3><br>
name : <input type="text" id="Name"><br><br>
branch : <input type="text" id="branch"><br><br>
address : <input type="text" id="address"><br><br>
contact : <input type="text" id="contact"><br><br>
<button onclick="AddData()">Add</button>
</form>
</div>

<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1"><thead>
<tr>
<td>Name</td><td>Branch</td><td>Address</td><td>Contact</td>
</tr></thead>
<tbody></tbody></table>
</div>

Script : AddData() function submits data from form to the table and is invoked when button is clicked.

<script>
function AddData()
{
var rows="";
var name=document.getElementById("Name").value;
var branch=document.getElementById("branch").value;
var address=document.getElementById("address").value;
var contact=document.getElementById("contact").value;
rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td>
<td>"+contact+"</td></tr>";
$(rows).appendTo("#list tbody");
}
</script>

</body>
</html>

Upvotes: 1

Views: 11559

Answers (3)

RobG
RobG

Reputation: 147433

Consider without jQuery. Change the "Add" button to type button (it's submit by default) so it doesn't submit the form. Then use DOM features to get the elements and their values, and to build the new row.

Be careful though, as a return in any of the inputs will submit the form so you may want to add a submit listener and prevent that, or use inputs without a form.

function addData(el) {
  var table = document.getElementById('list');
  var tr = table.insertRow();
  el.form.querySelectorAll('input').forEach(function(el) {
    var cell = tr.appendChild(document.createElement('td'));
    cell.textContent = el.value;
  });
}
<form align="center">
  <h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br>
  <button type="button" onclick="addData(this)">Add</button>
</form>
</div>

<div id="tab">
  <table id="list" cellspacing="3" cellpadding="3" border="1">
    <thead>
      <tr>
        <td>Name<td>Branch<td>Address<td>Contact
      </tr>
    </thead>
  </table>

The only "modern" feature above is the use of forEach with a NodeList, and that can be replaced fairly easily with a for loop or [].forEach.call(...) to get compatibility back to IE 8.

Upvotes: 1

Dij
Dij

Reputation: 9808

you can pass event to AddDate(e) and use e.preventDefault().

<html>
<head>
<title>Student form</title>
</head>
<body>

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


<form align="center"><h3><b>Student Form</b></h3><br>
name : <input type="text" id="Name"><br><br>
branch : <input type="text" id="branch"><br><br>
address : <input type="text" id="address"><br><br>
contact : <input type="text" id="contact"><br><br>
<button onclick="AddData(event)">Add</button>
</form>
</div>

<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1"><thead>
<tr>
<td>Name</td><td>Branch</td><td>Address</td><td>Contact</td>
</tr></thead>
<tbody></tbody></table>
</div>



<script>
function AddData(e)
{
e.preventDefault();
var rows="";
var name=document.getElementById("Name").value;
var branch=document.getElementById("branch").value;
var address=document.getElementById("address").value;
var contact=document.getElementById("contact").value;
rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td><td>"+contact+"</td></tr>";
$(rows).appendTo("#list tbody");
}
</script>

</body>
</html>

Upvotes: 0

prasanth
prasanth

Reputation: 22500

Try this .

  1. Add the query library link appentTo() its a jquery Object
  2. Change the button type with submit
  3. You need return the onsubmit for prevent the page refresh otherwise page was reloaded on every time submit

function AddData() {
  var rows = "";
  var name = document.getElementById("Name").value;
  var branch = document.getElementById("branch").value;
  var address = document.getElementById("address").value;
  var contact = document.getElementById("contact").value;
  rows += "<tr><td>" + name + "</td><td>" + branch + "</td><td>" + address + "</td><td> " + contact + "</td></tr> ";
  $(rows).appendTo("#list tbody");
  return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">


  <form align="center" onsubmit="return AddData()">
    <h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br>
    <button type="submit">Add</button>
  </form>
</div>

<div id="tab">
  <table id="list" cellspacing="3" cellpadding="3" border="1">
    <thead>
      <tr>
        <td>Name</td>
        <td>Branch</td>
        <td>Address</td>
        <td>Contact</td>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

Upvotes: 0

Related Questions