防止重定向 PHP 形式

Question

在這里，我使用的是聯系表。 當我單擊提交按鈕而不是在同一頁面上顯示“消息發送成功”時，它會重定向到空白頁面。 我的 HTML 表格

<!-- form element -->
<div class="row">
    <div class="col-md-6 form-group">
        <input name="name" type="text" class="form-control" placeholder="Name" required>
    </div>
    <div class="col-md-6 form-group">
        <input name="email" type="email" class="form-control" placeholder="Email" required>
    </div>
    <div class="col-md-6 form-group">
        <input name="subject" type="text" class="form-control" placeholder="Subject" required>
    </div>
    <div class="col-12 form-group">
        <textarea name="message" class="form-control" rows="3" placeholder="Message" required></textarea>
    </div>
    <div class="col-12">
        <input n id="btnClick" type="submit" class="btn btn-success" value="Send Message">
    </div>
</div>
<!-- end form element -->

我的 JavaScript 代碼：

$('#btnClick').on('click', function(e){
   e.preventDefault();

   var name = $('input#name').val(),
       email = $('input#email').val(),
       message = $('textarea#message').val(),
       subject = $('input#subject').val()
       formData = 'name=' + name + '&email=' + email + '&message=' + message + '&subject=' +  subject;

    $.ajax({
      type: 'post',
      url: 'mail.php',
      data: formData,
      success: function(results) {
        $('ul#msgSubmit').html(results);
      }
    });
});

還有我的 php 代碼：

<?php

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

        # FIX: Replace this email with recipient email
        $mail_to = ""; // my email here
        
        # Sender Data
        $subject = trim($_POST["subject"]);
        $name = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["name"])));
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);
        
        if ( empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($subject) OR empty($message)) {
            # Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Please complete the form and try again.";
            exit;
        }
        
        # Mail Content
        $content = "Name: $name\n";
        $content .= "Email: $email\n\n";
        $content .= "Message:\n$message\n";

        # email headers.
        $headers = "From: $name <$email>";
    $headers .= 'MIME-Version: 1.0' ."\r\n";
    $headers .= 'Content-Type: text/HTML; charset=utf-8' . "\r\n";
    $headers .= 'Content-Transfer-Encoding: 8bit'. "\n\r\n";
    $headers .= $text . "\r\n";


        # Send the email.
        $success = mail($mail_to, $subject, $content, $headers);
        if ($success) {
            # Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been sent.";
        } else {
            # Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong, we couldn't send your message.";
        }

    } else {
        # Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

?>

我嘗試將所有內容更改**<input type="submit" to button**使用 ajax **e.preventDefault();**並再次將我重定向到新頁面 mywebsite.eu/assets/js/mail.php 我不知道如何解決它。

Answer 1

您只需將按鈕類型從提交更改為按鈕，如下所示：-

<input id="btnClick" type="button" class="btn btn-success" value="Send Message">

Answer 2

您可以做幾件事來停止重定向頁面。

• 將輸入類型從submit更改為button 。
• 將 input 元素替換為 html 的 button 元素為type="button" 。
• 將整個 JavaScript 事件處理程序代碼包裝到 function 並在 html 事件屬性上調用它，如下所示： onsubmit="return foo();" .

以我的拙見，您可以執行以下操作：

HTML ：

<form action="mail.php" method="POST" onsubmit="return foo(this);">
    <input type="text" name="full_name" value="" required>
    <button type="submit">submit form</button>
</form>

JavaScript ：

function foo(form){
    $.ajax({
        url: $(form).attr('action'),
        type: 'POST',
        data: $(form).serialize(),
        success: (res)=>{
            // success...
            console.log(res);
        },
        error: (err)=>{
            // error...
            console.error(err);
        },
        complete: ()=>{
            // something here...
        }
    });

    return false;
}

這樣，如果您的js以某種方式停止工作，您的表單仍將使用php 發布，因為您在表單中定義了該操作。