與表單在同一頁面上的成功或錯誤消息

Question

成功發送表單后，我希望成功消息出現在發送按鈕上方的同一頁上。 或者，如果未成功發送表單，我希望收到一條消息，指出該消息顯示在“發送”按鈕上方。 成功發送表單后，正在發生的事情是出現一個新的空白頁面，其中沒有任何消息。

以下是我到目前為止的內容：

 autosize(document.querySelectorAll('#message_content')); var validator = $("#comment_form").validate({ ignore: [], rules: { gender: { required: true, }, first_name: { required: true, }, last_name: { required: true, }, email: { required: true, email: true, minlength: 3 }, email_again: { email: true, minlength: 3, equalTo: '#email' }, message_subject: { required: true, minlength: 2 }, message: { required: true, minlength: 4 }, hiddenRecaptcha: { required: function() { if (grecaptcha.getResponse() == '') { return true; } else { return false; } } } } }); jQuery.extend(jQuery.validator.messages, { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", number: "Please enter a valid number.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please use identical email addresses.", accept: "Please enter a value with a valid extension.", maxlength: jQuery.validator.format("Please enter no more than {0} characters."), minlength: jQuery.validator.format("Please enter at least {0} characters."), rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."), range: jQuery.validator.format("Please enter a value between {0} and {1}."), max: jQuery.validator.format("Please enter a value less than or equal to {0}."), min: jQuery.validator.format("Please enter a value greater than or equal to {0}.") }); 

 @font-face { font-family: Questrial; src: url(Questrial-Regular.otf); } div { font-family: Questrial; } input { font-family: Questrial; } text-area { font-family: Questrial; } span { font-family: Questrial; } p { font-family: Questrial; } form { font-family: Questrial; } <style>html { text-align: center } body { display: inline-block; margin: 0px auto; text-align: left; } #comment_form { width: 302px; } .label-radio { font-size: 0.8em; color: #d8e3e6; margin-right: 10px; font-family: questrial; } .inputfield3 { height: 33px; max-height: 33px; width: 302px; border-radius: 16px; margin-top: -10px; margin-bottom: 17px; padding: 0px 10px 0px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; } .inputfield2 { height: 33px; max-height: 33px; width: 302px; border-radius: 16px; margin-top: -10px; margin-bottom: 0px; padding: 0px 10px 0px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; } .textareafield { max-height: 350px; width: 302px; max-width: 302px; border-radius: 16px; margin-top: -10px; margin-bottom: 17px; padding: 10px 10px 10px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; } #g-recaptcha-outer { width: 302px; height: 72px; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 16px; margin: -10px auto 20 auto; } #recaptcha-header { margin: 30px 0px -15px 0px; color: #d8e3e6; font-size: 1.0em; font-family: questrial; font-size: 0.8em; letter-spacing: -0.03em; } #contact_submit_button { display: block; text-decoration: none; margin: 10px auto 80px auto; width: 230px; height: 33px; padding: 0px 15px 0px 15px; background-color: rgb(0, 157, 233); color: #ffffff; border-radius: 16px; border: none; outline: none; font-family: questrial; font-size: 1em; } .requiredmark { margin: 0px 0px 0px 295px; display: inline-block; color: #d8e3e6; padding: 20px 0px 0px 0px; } .requiredmark2 { margin: -39px 0px 0px 295px; display: inline-block; color: #d8e3e6; padding: 20px 0px 0px 0px; } .requiredmark-radio { margin: 20px 0px 0px 0px; display: inline-block; color: #d8e3e6; font-family: questrial; } .error { display: none; } .error_show { color: red; } input.invalid, textarea.invalid { border: 1px solid red; } input.valid, textarea.valid {} label.error { margin-top: -10px; margin-bottom: 30px; float: none; color: red; vertical-align: top; display: block; font-family: Questrial; }​ #hiddenRecaptcha-error { margin-top: 65px!important; margin-bottom: 30px; float: none; color: red; vertical-align: top; display: block; font-family: Questrial; }​ .gender { border-radius: 16px; margin-top: 5px; margin-bottom: 7px; padding: 0px 10px 0px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; } #gender-error { float: right; margin-bottom: 0px!important; margin-top: 20px!important } .errMsg { color: #ffffff; } 

 <html> <head> <script src='https://www.google.com/recaptcha/api.js'></script> <script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script> <script src="{{ 'iframeresizer-min.js' | url_asset }}" type="text/javascript"></script> <script src="https://assets.webshopapp.com/photographycoursetour/iframeresizer-contentwindow-min.js" type="text/javascript"></script> </head> <body> <form id="comment_form" action="form.php" method="post"> <div class="compulsoryfield"> <input class="gender" type="radio" name="gender" value="Mr" required><label class="label-radio">Mr.</label> <input class="gender" type="radio" name="gender" value="Ms" required><label class="label-radio">Ms.</label> <span class="requiredmark-radio">*</span> </div> <div class="compulsoryfield"><span class="requiredmark">*</span> <input id="first_name" name="first_name" class="inputfield3" type="text" placeholder="first name" required> </div> <div class="compulsoryfield"><span class="requiredmark2">*</span> <input id="last_name" name="last_name" class="inputfield3" type="text" placeholder="last name" required> </div> <input class="inputfield3" type="text" name="company_name" placeholder="company name (if applicable)"> <input class="inputfield3" type="text" name="customer_number" placeholder="customer number (on invoice if available)"> <br> <div class="compulsoryfield"><span class="requiredmark">*</span> <input id="email" name="email" class="inputfield3" type="email" placeholder="email address" required> </div> <div class="compulsoryfield"><span class="requiredmark2">*</span> <input id="email_again" name="email_again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div> <input class="inputfield3" type="text" name="telephone_number" placeholder="telephone number (country code included)"> <br> <div class="compulsoryfield"><span class="requiredmark">*</span> <input id="message_subject" name="message_subject" class="inputfield3" type="text" placeholder="subject of message" required> </div> <div class="compulsoryfield"><span class="requiredmark2">*</span> <textarea id="message_content" name="message_content" class="textareafield" type="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div> <p id="recaptcha-header">before sending, please show us you're real:</p> <div><span class="requiredmark">*</span> <div id="g-recaptcha-outer" class="compulsoryfield2"> <div class="g-recaptcha" data-sitekey="mySiteKey" required></div> </div> <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha"> <br><br> <div class="succMsg"></div> <div class="errMsg"></div> <input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()"> </form> </body> </html> 

我的PHP如下：

    <?php

if(isset($_POST['submit']) && !empty($_POST['submit'])):
    if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):
        //your site secret key
        $secret = 'mySecretKey';
        //get verify response data
        $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
        $responseData = json_decode($verifyResponse);
        if($responseData->success):
            //contact form submission code
            $gender = !empty($_POST['gender'])?$_POST['gender']:'';
            $first_name = !empty($_POST['first_name'])?$_POST['first_name']:'';
            $last_name = !empty($_POST['last_name'])?$_POST['last_name']:'';
            $company_name = !empty($_POST['company_name'])?$_POST['company_name']:'';
            $customer_number = !empty($_POST['customer_number'])?$_POST['customer_number']:'';
            $email = !empty($_POST['email'])?$_POST['email']:'';
            $email_again = !empty($_POST['email_again'])?$_POST['email_again']:'';
            $telephone_number = !empty($_POST['telephone_number'])?$_POST['telephone_number']:'';
            $message_subject = !empty($_POST['message_subject'])?$_POST['message_subject']:'';
            $message_content = !empty($_POST['message_content'])?nl2br($_POST['message_content']):'';

            $to = 'eddyhilhorst@fotel.eu';
            $subject = 'FOTEL  |  A new contact form has been submitted now';
            $htmlContent = "
                <h1>Contact request details</h1>
                <p>'<b>From: </b>".$gender." ".$last_name.", ".$first_name."</p>
                <p><b>Company name: </b>".$company_name."</p>
                <p><b>Customer number: </b>".$customer_number."</p>
                <p><b>Email address: </b>".$email."</p>
                <p><b>Telephone number: </b>".$telephone_number."</p>
                <p><b>Message subject: </b>".$message_subject."</p>
                <p><b>Message: </b></br></br>".$message_content."</p>
            ";
            // Always set content-type when sending HTML email
            $headers = "MIME-Version: 1.0" . "\r\n";
            $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
            // More headers
            $headers .= 'From:'.$gender.' '.$first_name.' '.$last_name.'<'.$email.'>' . "\r\n".
            'Reply-To: '.$email."\r\n";
            //send email
            @mail($to,$subject,$htmlContent,$headers);

            $succMsg = 'Your contact request have submitted successfully.';
        else:
            $errMsg = 'Robot verification failed, please try again.';
        endif;
    else:
        $errMsg = 'Please click on the reCAPTCHA box.';
    endif;
else:
    $errMsg = '';
    $succMsg = '';
endif;

nl2br($_POST['message_content'])
?>

Answer 1

我不太確定該放在哪里，但我想它在這里：

            $headers .= 'From:'.$gender.' '.$first_name.' '.$last_name.'<'.$email.'>' . "\r\n".
            'Reply-To: '.$email."\r\n";
            //send email
            @mail($to,$subject,$htmlContent,$headers);

            header('Location:currentPage.php?msg=success'); // here
        else:
            header('Location:currentPage.php?msg=error'); // here
        endif;
    else:
        header('Location:currentPage.php?msg=captcha_fail'); // here
    endif;
else:
    $errMsg = '';
    $succMsg = '';
endif;