表單發送成功后隱藏“提交”按鈕，然后顯示成功訊息

目前我有一個作業聯系表。我想在表單發送成功后隱藏表單的“提交”按鈕，然后顯示成功訊息。

目前它重定向，我為了這個請求而離開了。

我嘗試了多種解決方案，調整了 js，但 js 肯定不是我的強項。出于這個問題的目的，我也將 CSS 留在了其中，因為我相信這將是我需要走下去的路線。

<< ? php
if (empty($_POST) === false) {

  session_start();

  function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
  }

  $errors = array();

  if (isset($_POST['name'], $_POST['email'], $_POST['message'])) {
    $fields = array(
      'name' => $_POST['name'],
      'email' => $_POST['email'],
      'message' => $_POST['message']
    );

    foreach($fields as $field => $data) {
      if (empty($data)) {
        //$errors[] = "The " . $field . " is required";
        $errors[] = "Please fill-in the form correctly";
        break 1;
      }
    }

    if (empty($errors) === true) {
      if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Invalid e-mail address";
      }
    }

    if (empty($errors) === true) {
      $name = test_input($_POST['name']);
      $email = test_input($_POST['email']);
      $message = test_input($_POST['message']);

      $to = "[email protected]";
      $subject = "example | You have a new message from ".$name;

      $body = ......




        if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message'])) {
          $data = $_POST['name'].
          ' == Email: '.$_POST['email'].
          ' Message: '.$_POST['message'].
          "\r\n";
          $ret = file_put_contents('entries.log', $data, FILE_APPEND | LOCK_EX);
          if ($ret === false) {
            die('There was an error writing this file');
          } else {
            echo "$ret bytes written to file";
          }
        } else {
          header('location: ../sendmail/redirect.html');
        }

      $headers = "MIME-Version: 1.0".
      "\r

#thank-you-message {
  display: none;
}

#thank-you-message.show {
  display: block;
}

<form action="/sendmail.php" method="post" onsubmit="return checkform(this);">
  <input type="text" name="name" id="" autocomplete="off" placeholder="Name" required><br>
  <input type="email" name="email" id="" autocomplete="off" placeholder="E-mail" required><br>
  <textarea name="message" id="" cols="30" rows="10" placeholder="Type Your Message" required></textarea>
  <button type="submit">Send</button>
</form>
<p id="thank-you-message">Thank you for contacting us. We will be in touch with you soon.</p>

uj5u.com熱心網友回復：

您可以使用 JavaScript 隱藏此按鈕或使用 PHP 生成此站點。

您有兩種可能性，cookie 或會話。

檢查是否設定了cookie或會話，如果不顯示按鈕或表單，是否設定隱藏按鈕或表單。

這可以在 If/Else 條件和簡單的“列印”函式中完成。

喜歡 (PHP)

IF (isset xxx = true) {
   // print nothing
   // redirect to page xxx.html
   // or print Text like Lorem Ipsum
}
else {
   print '<form method=“POST“ action=“form.php“> … </form>';
}

提交表單后，您必須在“form.php”中設定會話或 cookie。

當用戶回傳此站點時，該站點將檢查 cookie 或會話并列印或不列印表單。

您必須根據需要更改 IF/Else 條件。

您還可以列印“感謝頁面”或您想要的其他內容，您還可以通過 php.ini 中的 header 函式重定向到其他頁面。

uj5u.com熱心網友回復：

快速修復，如果使用 PHP，您可以嘗試以這種格式構建代碼

function save() {
$('.btn-danger').hide()
var number_i = $('#number_i').text();
var date_s = $('#date_s').text();
var name_p = "<?php echo $_POST['product_name']; ?>";
if (number_i != '___') {
  $.post('saveEntry.php', {number: number_i, date: date_s, name: name_p}, function() {
    $('#confirmation').text('Info: the data was saved!');
    $('#confirmation').attr('class', 'alert alert-success');
  })
} else {
  alert('Introdu Numar Bon Fiscal!');
}

};

uj5u.com熱心網友回復：

這不需要JS。假設您的表單決議正確，您可以將以下樣式添加到樣式表中。

#thank-you-message {
  display: none;
}

button:focus ~ #thank-you-message {
  display: block;
}

我洗掉了您的 PHP 和表單的其余部分，以便您可以看到演示。見下文：

編輯?為按鈕添加示例JS，以在提交表單時更改文本。（不影響p按鈕點擊顯示）

function form_success() {
  document.getElementById("myform").submit();
  document.getElementById("btn").innerHTML = "Sent!";
}

#thank-you-message {
  display: none;
}

button:focus {
  background-color: green;
  color: white;
}

button:focus~#thank-you-message {
  display: block;
}

<form action="/sendmail.php" method="post" onsubmit="return checkform(this);" id="myform">
  <input type="text" name="name" id="" autocomplete="off" placeholder="Name" required><br>
  <input type="email" name="email" id="" autocomplete="off" placeholder="E-mail" required><br>
  <textarea name="message" id="" cols="30" rows="10" placeholder="Type Your Message" required></textarea><br>
  <button type="submit" id="btn" onclick="form_success()">Send</button>
  <p id="thank-you-message">Thank you for contacting us. We will be in touch with you soon.</p>
</form>

標籤：javascript php html css 形式

上一篇：如何以打字效果的形式顯示跨度標簽內的輸入值？

下一篇：當我的模態表單中出現驗證錯誤時，為什么我的資料表無法加載？