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

Question

我有一个php文件，该文件可检索以html形式输入的信息并将其保存到mysql数据库中。我面临的问题是我无法弄清楚如何阻止页面重定向到insertinfo.php。我希望用户停留在同一index.html页面上，在表单提交时将出现模式。以下是我的index.html和insertinfo.php

index.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。