CODEWITHSUNDEEP
javascripthtmljqueryformsform-submit
Thra
Thra

Reputation: 87

How to show the table on same page after submitting the form in html?

I have a form that accepts the date picker as input and sends that value to the backend and gets some response based on the input. The response data will be inserted into a table. When the form gets submitted, it should show the table on the same page.

HTML:

<!DOCTYPE html>
<html>

<head>
  <title>
    Date Picker
  </title>

  <link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
  </script>
</head>

<body>
  <form method="POST">
    Date: <input type="text" id="my_date_picker">
    <button id="sbtn">Submit</button>

    <div id="mytable">
      <table id="datatable" style="display:none">

      </table>
    </div>
  </form>
  <script>
    $(document).ready(function() {

      $(function() {
        $("#my_date_picker").datepicker();
      });
    })
  </script>
</body>

</html>

JS:

$("#sbtn").click(function() {
   if ($("#my_date_picker").val().length === 0){
         alert('Invalid');
         return false;
     }else {
       $("form").submit();
       $("#datatable").show();
     }
  });

Here I'm not able to show the table after submitting the form. Is there any way to show the table on the same page after the form submit.?

Thanks.

Upvotes: 0

Views: 3379

Answers (5)

Nikhil Singh
Nikhil Singh

Reputation: 1610

  document.getElementById("button").addEventListener("click", () => {
    const val = document.getElementById("data").value
    fetch('//url/to/post/the/data', {
      method: 'POST',
      headers: {
        // if any
      },
      body: JSON.stringify({
        data: val
        // or other data
      })
    })
    .then(res => res.json())
    .then(res => {
      // response from the backend
      // assuming the data will be array and that has to be displayed as table, something like this,
      // res = {
      //   data: [{name: 'Nikhil', age: '22'}, {name: 'Hello', age: '29'}]
      // }
      const arr = res.data
      // setting the headers
      let content = '<table><tr><th>Name</th><th>Age</th></tr>';
      // setting the rows of the table dynamically
      arr.forEach((ele) => {
        content += `<tr>`
        content += `<td>${ele.name}</td>`
        content += `<td>${ele.age}</td>`
        content += `</tr>`
      })
      // closing the table tag
      content += `</table>`
      // inserting the html generated in the div with the id - result
      document.getElementById('result').innerHTML = content;
    })
    .catch(err => {
      // handle error here
    })
  })
 
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <!-- // form fields and submit button -->
  <input type="text" id="data">
  <button id="button">Submit</button>

  <!-- // table where data need to be displayed -->
  <div id='result'></div>

</body>
</html>

One of the possible solutions can be, you can use fetch or ajax to get the data from the backend and display it as a table, without refreshing the page.

You can learn more about it here,

AJAX - https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

Fetch - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

EDIT: Code added with an explanation on how to add data in the DOM as a table.

PS: This is one of the possible solutions on how to add data as a table, other solutions include creating the DOM using JS methods like createTextNode() etc.

Upvotes: 1

Athira V Ajit
Athira V Ajit

Reputation: 336

To re render the page you can use window.location.href = window.location.href. But since you have kept the table display as none , you have to keep a condition check there as well.

In case you are using ajax then,

$("form").submit(function (event) {
event.preventDefault();
var form = $(this)
url = form.attr('action')
var data = $("#my_date_picker").val()
$.ajax({
  type: "POST",
  url: url,
  data: form.serialize(),
  beforeSend: function () {
  
  },
  success: function (data) {
    $('#datatable').append(`<tr>
        <td>data</td>
     </tr>`);
   $("#datatable").show();
   
  }
})

});

Upvotes: 0

Divyanshi Mishra
Divyanshi Mishra

Reputation: 110

<!DOCTYPE html>
<html>
  <head lang="en">
  <meta charset="UTF-8">
  <script>
    function showData() {
        document.getElementById('displaydata').innerHTML = 
                    document.getElementById("txtInput").value;
    }
  </script>

  </head>
<body>

  <form>
    <label><b>Enter Input</b></label>
    <input type="text" name="message" id="txtInput">
  </form>

  <input type="submit" onclick="showData();"><br/>
  <label>Your input: </label>
  <p><span id='displaydata'></span></p>
</body>
</html>

enter code here

Upvotes: 0

sooraj s pillai
sooraj s pillai

Reputation: 916

If you fetch the data in the page load itself you can use location.reload() after ajax submit this will reload the current page or you can append the data from the ajax response somewhat like this $('#datatable').append(data);

Upvotes: 1

wpdevloper_j
wpdevloper_j

Reputation: 340

/* you can use below code */
step 1: display date out of form 
step 2: get data in $_POST

if(isset($_POST)){
 /* retrieve data here  & display it */
}

Upvotes: 0

Related Questions