在html中提交表单后如何在同一页面上显示表格？

如何解决在html中提交表单后如何在同一页面上显示表格？

我有一个表单，它接受日期选择器作为输入并将该值发送到后端并根据输入获得一些响应。响应数据将插入到表中。当表单被提交时，它应该在同一页面上显示表格。

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();
     }
  });

在这里我无法在提交表单后显示表格。有什么办法可以在表单提交后在同一页面上显示表格吗？

谢谢。

解决方法

  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>

一种可能的解决方案是，您可以使用 fetch 或 ajax 从后端获取数据并将其显示为表格，而无需刷新页面。

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

编辑：添加了代码，并解释了如何将 DOM 中的数据添加为表格。

PS：这是关于如何将数据添加为表格的可能解决方案之一，其他解决方案包括使用 createTextNode() 等 JS 方法创建 DOM。

如果您在页面加载本身中获取数据，则可以在 ajax 提交后使用 location.reload()，这将重新加载当前页面，或者您可以像这样从 ajax 响应中附加数据 $('#datatable').append(data);>

/* 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 */
}

要重新渲染页面，您可以使用 window.location.href = window.location.href。但由于您已将表格显示为 none ，因此您还必须在那里进行条件检查。

如果您正在使用 ajax，

$("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();
   
  }
})

});

<!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