table data is clear after submitting the form-CodePudding

I am working with javascript

when I submit the form I store the data in a table but the table data is also clear

index.html

<body>
<form id='freg'>

  <label>firstname</label>
  <input type='text' id='fname'>

  <label>lastname</label>
  <input type='text' id='lname'>

  <label>officelocation</label>
  <input type='text' id='location'>

  <input id='btn' type='submit' value='submit' onclick='onFormSubmit()'/>

</form>
<br/> <br/>

<table>
   <thead>
      <tr>
        <th>firstname</th>
        <th>lastname</th>
        <th>location</th>
      </tr>
    </thead>
    <tbody>
       <td id='ffname'></td>
       <td id='llname'></td>
       <td id='olocation'></td>
    </tbody>
</table>

<script type='text/javascript' src='index.js'></script>

index.js


function onFormSubmit() {


 document.getElementById('fname').value;
 document.getElementById('lname').value;
 document.getElementById('location').value;

 readFormData();

}

function readFormData() {

var data = {};

data.fname = document.getElementById('fname').value;
data.lname = document.getElementById('lname').value;
data.location = document.getElementById('location').value;

insertnewrecord(data);

}

function insertnewrecord(data) {

document.getElementById('ffname').innerHTML = data.fname;
document.getElementById('llname').innerHTML = data.lname;
document.getElementById('olocation').innerHTML = data.location;


  resetform();

}

function resetform() {

document.getElementById('fname').value = "";
document.getElementById('lname').value = "";
document.getElementById('location').value = "";

}

I am working with html with javascript

when I submit the form then not able to see the data in table I put debug and I can see the data is store in table but then tabale data is clear.

CodePudding user response：

use event.preventDefault(); in your onFormSubmit function https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

CodePudding user response：

Here is my solution, you need to insert a row each time and then instead of doing a submit, just clear the form instead!

reference

function onFormSubmit() {
  insertRow();
}

function insertRow() {
  var fname = document.getElementById('fname').value;
  var lname = document.getElementById('lname').value;
  var location = document.getElementById('location').value;
  var table = document.getElementById("myTable");

  // Create an empty <tr> element and add it to the 1st position of the table:
  var row = table.insertRow(-1);

  // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  // Add some text to the new cells:
  cell1.innerHTML = fname;
  cell2.innerHTML = lname;
  cell3.innerHTML = location;

  resetform();

}

function resetform() {

  document.getElementById('fname').value = "";
  document.getElementById('lname').value = "";
  document.getElementById('location').value = "";

}

<body>
  <form id='freg'>

    <label>firstname</label>
    <input type='text' id='fname'>

    <label>lastname</label>
    <input type='text' id='lname'>

    <label>officelocation</label>
    <input type='text' id='location'>

    <input id='btn' type='button' value='submit' onclick='onFormSubmit()' />

  </form>
  <br/> <br/>

  <table id="myTable">
    <thead>
      <tr>
        <th>firstname</th>
        <th>lastname</th>
        <th>location</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

CodePudding user response：

you just need to prevent form to refresh page then you just need remove function that clear form Cell index.html

<body>
<form id='freg'>

    <label>firstname</label>
    <input type='text' id='fname'>

    <label>lastname</label>
    <input type='text' id='lname'>

    <label>officelocation</label>
    <input type='text' id='location'>

    <input id='btn' type='submit' value='submit' onclick="event.preventDefault(); onFormSubmit()" /><!-- <<<<<<<<<<<<<<<<< -->


</form>
<br /> <br />

<table>
    <thead>
        <tr>
            <th>firstname</th>
            <th>lastname</th>
            <th>location</th>
        </tr>
    </thead>
    <tbody>
        <td id='ffname'></td>
        <td id='llname'></td>
        <td id='olocation'></td>
    </tbody>
</table>

<script type='text/javascript' src='index.js'></script>

index.js

function onFormSubmit() {


    document.getElementById('fname').value;
    document.getElementById('lname').value;
    document.getElementById('location').value;

    readFormData();

}

function readFormData() {

    var data = {};

    data.fname = document.getElementById('fname').value;
    data.lname = document.getElementById('lname').value;
    data.location = document.getElementById('location').value;

    insertnewrecord(data);

}

function insertnewrecord() {

    document.getElementById('ffname').innerHTML = data.fname;
    document.getElementById('llname').innerHTML = data.lname;
    document.getElementById('olocation').innerHTML = data.location;


    //  resetform();  <<<<<<<<<<<<<<<<< 


}

function resetform() {

    document.getElementById('fname').value = "";
    document.getElementById('lname').value = "";
    document.getElementById('location').value = "";

}

CodePudding user response：

You should declare data object globally inside the js script. Also, use event.preventDefault() inside custom button click function.

Check following code:

var data = {};

function onFormSubmit(e) {
  readFormData();
  e.preventDefault();
}

function readFormData() {
  data.fname = document.getElementById("fname").value;
  data.lname = document.getElementById("lname").value;
  data.location = document.getElementById("location").value;

  insertnewrecord(data);
}

function insertnewrecord(data) {
  document.getElementById("ffname").innerHTML = data.fname;
  document.getElementById("llname").innerHTML = data.lname;
  document.getElementById("olocation").innerHTML = data.location;

  resetform();
}

function resetform() {
  document.getElementById("fname").value = "";
  document.getElementById("lname").value = "";
  document.getElementById("location").value = "";
}

<body>
  <form id='freg'>

    <label>firstname</label>
    <input type='text' id='fname'>

    <label>lastname</label>
    <input type='text' id='lname'>

    <label>officelocation</label>
    <input type='text' id='location'>

    <input id='btn' type='submit' value='submit' onclick='onFormSubmit(event)' />

  </form>
  <br/> <br/>

  <table>
    <thead>
      <tr>
        <th>firstname</th>
        <th>lastname</th>
        <th>location</th>
      </tr>
    </thead>
    <tbody>
      <td id='ffname'></td>
      <td id='llname'></td>
      <td id='olocation'></td>
    </tbody>
  </table>

  <script type='text/javascript' src='index.js'></script>