提交表格后如何留在頁面上

Question

我已經花了幾天的時間來嘗試找到針對我特定問題的答案，但我無法做到。 請幫忙。

我的網站上有一個表格，一旦單擊該表格，就應該發送電子郵件。 我想在留在同一頁面上並將div從表單更改為圖像的同時執行此操作。

這是我設法從互聯網上清除的代碼。

如果可以的話，請提供建議。
預先感謝任何可能提供幫助的人。

 jQuery(document).ready(function(){ jQuery('.contact').submit( function() { $.ajax({ type: "POST", url: "contact-form-handler.php", data: dataString, success: function() { $('#contact_form').html("<div id='message'></div>"); $('#message').html("<img src='thankyou.jpg' style='width:100%'/>") .append("<p>We will be in touch soon.</p>") .hide(); }); } }); return false; }); 

 <form method="post" action="" name="contact" id="contact" class="w3-container w3-light-grey w3-margin"> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div> <div class="w3-rest"> <input class="w3-input w3-border" required name="name" id="name" type="text" placeholder="Name"> </div> </div> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div> <div class="w3-rest"> <input class="w3-input w3-border" required name="email" id="email" type="text" placeholder="Email"> </div> </div> <div class="w3-row w3-section"> <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div> <div class="w3-rest"> <input id="message" class="w3-input w3-border" required name="message" type="text" placeholder="Message"> </div> </div> <p class="w3-center"> <input type="submit" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" /> </p> </form> 

`

 <?php $errors = ''; $myemail = 'jerry@sitesbyjc.com';//<-----Put Your email address here. if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) { $errors .= "\\n Error: all fields are required"; } $name = $_POST['name']; $email_address = $_POST['email']; $message = $_POST['message']; if (!preg_match( "/^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[az]{2,3})$/i", $email_address)) { $errors .= "\\n Error: Invalid email address"; } if( empty($errors)) { $to = $myemail; $email_subject = "Contact form submission: $name"; $email_body = "You have received a new message. ". " Here are the details:\\n Name: $name \\n Email: $email_address \\n Message: \\n $message"; $headers = "From: $myemail\\n"; $headers .= "Reply-To: $email_address"; mail($to,$email_subject,$email_body,$headers); } ?> 

Answer 1

<form>作為默認行為，會將用戶重定向到提交時的URL。 來自action屬性的URL。

為了防止這種重定向，您必須告訴瀏覽器：“請勿重定向”。

簡短： e.preventDefault()

長：在提交回調中，您的函數帶有一個參數。 只需將其命名為： e 。 這是一個對象，它具有功能preventDefault 。 此功能可防止默認行為：重定向。 在回調函數的第一行中進行此調用。

Answer 2

如果我理解您的問題，則在調用AJAX時需要使用preventDefault()來防止提交（默認情況下），因此您可以執行以下操作：

jQuery(document).ready(function(){
    jQuery('.contact').submit( function($e) {

        $e.preventDefault();
        $.ajax({
            type: "POST",
            url: "contact-form-handler.php",
            data: dataString,
            success: function() {
                $('#contact_form').html("<div id='message'></div>");
                $('#message').html("<img src='thankyou.jpg' style='width:100%'/>")
                .append("<p>We will be in touch soon.</p>")
                .hide();
            });
        }
    });
    return false;

});

了解有關preventDefault()更多信息，以及有關MDN上的defaultPrevented更多信息。

Answer 3

好了，您可以將事件處理程序附加到您的“提交”按鈕上，然后將“提交”按鈕更改為一個簡單的按鈕，因此單擊該表單將不會提交表單。 按鈕代碼可以更改為：

<input type="button" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" />

事件處理代碼可以更改為：

jQuery('#submit_btn').submit( function() {

};