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>

insertinfo.php：

if (isset($_POST["submit"])){
    // Escape user inputs for security
    $first_name = $conn->real_escape_string($_REQUEST['firstname']);
    $last_name = $conn->real_escape_string($_REQUEST['lastname']);
    $email = $conn->real_escape_string($_REQUEST['email']);
    $date_added = 'NOW()';


    $sql = "INSERT INTO userinfo (firstname, lastname, email, date_added) "
        . "VALUES ('$first_name', '$last_name', '$email', $date_added )";

    if ($conn->query($sql) === TRUE) {
        echo 'not working';
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}

Answer 1

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

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

如果您仍然希望不重新加载就将数据提交到insertinfo.php，请使用ajax库或签出How to use XMLHttpRequest。

Answer 2

如果您希望您的用户成为index.html并将表单提交到其他php文件，那么您将需要对insertinfo.php使用ajax发布请求。 Ajax可以发布表单数据并检索PHP处理的响应 这是一个示例，您如何使用ajax提交表单

$(document).ready(function() {

    // process the form
    $('form').submit(function(event) {

        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
            'superheroAlias'    : $('input[name=superheroAlias]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'process.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
                        encode          : true
        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.log(data); 

                // here we will handle errors and validation messages
            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });

});

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

2 个答案: