表单提交后停止页面重定向到php文件

Question

我有一个php文件，该文件可检索以html形式输入的信息并将其保存到mysql数据库中。我面临的问题是我无法弄清楚如何阻止页面重定向到insertinfo.php。我希望用户停留在同一index.html页面上，在表单提交时将出现模式。以下是我的index.html和insertinfo.phpindex.html文件：<div class="form ">      <form class="container" action="insertinfo.php">         <input type="text" id="firstname" class="form_input" placeholder="First Name" name="firstname" required>        <input type="text" id="lastname" class="form_input" placeholder="Last Name" name="lastname" required>        <input type="text" id="email" class="form_input" placeholder="Email Address" name="email" required>        <input type="submit" id="myBtn" class="submit" value="Download eBook">      </form></div><div id="myModal" class="modal">    <!-- Modal content -->    <div class="modal-content">      <div class="modal-header">        <div class="icon-box">          <i class="material-icons">check</i>        </div>      </div>      <div class="modal-body">        <h4>An email with a download link towards the eBook has been sent to you.</h4>        <p>Please check your inbox and your spam/bulk messages.</p>        <a href="">Continue</a>      </div>    </div>  </div><script type="text/javascript">   var modal = document.getElementById("myModal");   // Get the button that opens the modal   var btn = document.getElementById("myBtn");   // When the user clicks the button, open the modal    btn.onclick = function(event) {      var fnameInput = document.getElementById("firstname").value;      var lnameInput = document.getElementById("lastname").value;      var emailInput = document.getElementById("email").value;      if(fnameInput.length == 0 || lnameInput.length == 0 || emailInput.length == 0){          event.preventDefault();          alert("You must complete all existing fields");      } else {          modal.style.display = "block";      }   }</script>

Answer 1

该action表格属性描述的是<form>将被提交。如果删除它，该表单将提交到当前页面。

因此，删除此部分：action="insertinfo.php"将阻止<form>将您重定向到insertinfo.php

如果您仍然希望insertinfo.php不重新加载就提交数据，请使用ajax库或查看：如何使用XMLHttpRequest。