無法阻止頁面重繪-有解無憂

幾天前，我從一篇帖子中得到了一些非常有用的建議（感謝所有回復的人），并且出現了一個我似乎無法解決的新問題。

我有一個 php 檔案，它是一個將資料發布到 MySQL 資料庫的注冊表單。表單正確發布，發布后，html 通過 JS 函式更新。但是更新不會在頁面上停留足夠長的時間來閱讀并且頁面會重繪。

這是代碼，下面是我試圖解決問題但沒有成功的所有事情的串列：

<!DOCTYPE html>
<?php 

if ($_SERVER["REQUEST_METHOD"] == "POST"){


$dbServername = "mysite.com";
$dbUsername = "myusername";
$dbPassword = "12345";
$dbName = "dbname";

$conn = mysqli_connect($dbServername, $dbUsername, $dbPassword, $dbName);

$firstname   = mysqli_real_escape_string($conn, $_POST['firstname']);
$lastname    = mysqli_real_escape_string($conn, $_POST['lastname']);

$sql = "INSERT INTO registration (firstname, lastname) VALUES ('$firstname', '$lastname')";

mysqli_query($conn, $sql);
mysqli_close($conn);

unset($_POST);

header('Location:'.$_SERVER['PHP_SELF']);
}


?>


<html lang="en">
  
  <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" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style/styles.css" />
    <!--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <link rel="shortcut icon" href="#" />
    <meta
      name="description"
      content="content"
    />

    <title>Site | Page</title>
  </head>

  <body>
    <nav class="nav">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span
              ><a href="index.html" class="logo"
                >Company </a
              ></span
            >
            <span class="logo2"
              >Text</span
            >
          </div>
          <div class="col-md-8 menu-padding">
            <span class="menu menu-span"
              ><a href="index.html" class="menu-link">Home</a>
            </span>
            <span class="menu menu-span">
              <a href="about.html" class="menu-link">About</a>
            </span>
            <span class="menu menu-span"
              ><a href="search.html" class="menu-link active">Search</a></span
            >
            <span class="menu menu-span"
              ><a href="contact.html" class="menu-link">Contact</a></span
            >

            <span class="menu menu-span language">
              <a href="../spanish/inicio-esp.html" class="menu-link">Espa?ol</a>
            </span>
            <span class="menu menu-span language"
              ><a href="../portuguese/inicio-port.html" class="menu-link"
                >Português</a
              ></span
            >
          </div>
        </div>
      </div>
    </nav>

    <div id="registrationOne">
    <div class="container">


<form name="regForm" method="post" action=<?php echo $_SERVER['PHP_SELF'];?> onsubmit="thankReg();">
<div class="row">
  <div class="col-md-6">
              <label for="">First Name:</label>
              <input name="firstname" type="text" class="form-control" />
            </div>
            <div class="col-md-6">
              <label for="">Last Name:</label>
              <input name="lastname" type="text" class="form-control" />
            </div>

</div>
<button
            name="submitButton"
            type="submit"
            class="btn btn-primary"
            id="registrationTwo"
            
            >
            Register
          </button>

</form>
        
    </div>
    </div>
  
  </body>
  <script src="script/index.js"></script>
  
  </html>

然后是JS：

function validateRegForm(event) {
  let valid = true;
  let first = document.forms["regForm"]["firstname"].value;
  let last = document.forms["regForm"]["lastname"].value;

  if (first.length < 2) {
    alert("Please enter a first name at least of at least two characters");
    valid = false;
  } else if (last.length < 2) {
    alert("Please enter a last name at least of at least two characters");
    valid = false;
  } else {
    document.forms["regForm"].submit();
  }
  if (!valid) {
    event.preventDefault();
  }
}

let regClick = document.getElementById("registrationTwo");
regClick.addEventListener("click", validateRegForm);

function thankReg() {
  let regOneElement = document.getElementById("registrationOne");
  regOneElement.innerHTML = `<div class="row">
<div class="col-md-12">
<h2 class="thankYouReg">Thank you for registering with Pro.Social.<br /><br />Please check your email for your unique search link to get started. <br /><br />If you do not receive an email from us in the next few minutes, please contact us via the Contact page.</h2>
</div>
</div>`;
}

以下是我嘗試過但沒有奏效的所有方法：

添加回傳false；感謝Reg() 結束
添加 onsubmit="returnthankReg();" 形成而不是僅僅 onsubmit="thankReg();"
添加回傳false；tothankReg() 和 onsubmit="returnthankReg(); 形成
將 event.preventDefault() 添加到thankReg() 的末尾
在 validateRegForm() 中嵌套thankReg() 并呼叫returnthankReg()
在 validateRegForm() 中嵌套thankReg() 并呼叫thankReg()
添加第二個呼叫thankReg()的事件監聽器
添加 location.href = "https://www.anewpage.com"; 到 validateRegForm() 結束
添加 window.location.replace("http://www.anewpage.com"); 到 validateRegForm() 結束
添加 if (valid) {window.location.replace("https://www.prosocial.online/about.html");} 到 validateRegForm()

任何建議表示贊賞！再次感謝。

uj5u.com熱心網友回復：

您的thankReg()JavaScript 函式在 HTML 表單onsubmit事件期間運行。這意味著它在表單提交到服務器之前在瀏覽器中運行。當然，稍后會提交表單，這會導致向服務器發出 HTTP 請求，因此瀏覽器會清除當前頁面，以等待從服務器回傳的對該請求的新回應。

為了讓訊息持續更長時間，您需要讓 PHP在表單提交后觸發訊息顯示，這樣它就不會 a) 在表單實際成功之前過早出現，并且 b) 立即被洗掉。

由于您要發出重定向標頭，因此該任務需要在加載重定向頁面時發生，而不是在對表單提交的立即回應中（瀏覽器永遠不會顯示）。因此，在該重定向 URL 中添加查詢引數是一種很好的方法 - 可用于指示需要顯示感謝訊息。

洗掉thankReg()函式和onsubmit觸發它的處理程式。然后，嘗試這樣的事情：

修正

header('Location:'.$_SERVER['PHP_SELF']);

至

header('Location:'.$_SERVER['PHP_SELF']."?msg=thanks");

然后，在頁面下方：

<div id="registrationOne">
<?php
if (isset($_GET["msg"]) && $_GET["msg"] == "thanks") {
?>
  <div class="row">
    <div class="col-md-12">
      <h2 class="thankYouReg">Thank you for registering with Pro.Social.<br /><br />Please check your email for your unique search link to get started. <br /><br />If you do not receive an email from us in the next few minutes, please contact us via the Contact page.</h2>
    </div>
  </div>
<?
}
?>

uj5u.com熱心網友回復：

您不能同時使用 php 和 js 處理表單。

您需要重新加載頁面才能使用 PHP 處理它，而如果您這樣做，javascript 會丟失所有資訊。

您可以做的是使用XMLHttpRequest將資料發送到您的后端，并在收到回應時更新頁面

uj5u.com熱心網友回復：

你需要在thankReg的最開始添加event.preventDefault()

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/497508.html

標籤：javascript php html

上一篇：在React中動態呈現作業串列

下一篇：如何使用javascript讀取檔案夾中的文本檔案