Setelah mengirimkan formulir, pesan sukses ditampilkan di halaman berbeda

pemrograman


<form id="contact-form" method="post" action="contact.php">
                                 <div class="messages"></div>
                                 <div class="controls">
                                    <div class="row">
                                       <div class="col-md-6">
                                          <div class="form-group">
                                             <label for="form_name">Firstname *</label>
                                             <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                                             <div class="help-block with-errors"></div>
                                          </div>
                                       </div>
                                       <div class="col-md-6">
                                          <div class="form-group">
                                             <label for="form_lastname">Lastname *</label>
                                             <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                                             <div class="help-block with-errors"></div>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="row">
                                       <div class="col-md-6">
                                          <div class="form-group">
                                             <label for="form_email">Email *</label>
                                             <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                                             <div class="help-block with-errors"></div>
                                          </div>
                                       </div>
                                       <div class="col-md-6">
                                          <div class="form-group">
                                             <label for="form_need">Please specify your need *</label>
                                             <select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
                                                <option value="">-----</option>
                                                <option value="Request quotation">Request quotation</option>
                                                <option value="Request order status">Request order status</option>
                                                <option value="Request copy of an invoice">Request copy of an invoice</option>
                                                <option value="Other">Other</option>
                                             </select>
                                             <div class="help-block with-errors"></div>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="row">
                                       <div class="col-md-12">
                                          <div class="form-group">
                                             <label for="form_message">Message *</label>
                                             <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please, leave us a message."></textarea>
                                             <div class="help-block with-errors"></div>
                                          </div>
                                       </div>
                                       <div class="col-md-12">
                                          <div class="form-group">
                                             <div class="g-recaptcha" data-sitekey="6LdX5uQUAAAAAEPAP03K3_jafzIdoOFSblSgm2um" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
                                             <input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha">
                                             <div class="help-block with-errors"></div>
                                          </div>
                                       </div> 
                                       <div class="col-md-12">
                                          <button type="submit" class="btn btn-success btn-send btn-danger-gradiant mt-3 mb-3 text-white border-0 py-2 px-3" value="Send message"><span> SUBMIT NOW class="fa fa-paper-plane"></span></button> 
                                       </div>
                                    </div>
                                    <div class="row">
                                       <div class="col-md-12">
                                          <p class="text-muted">
                                             ^__strong>* These fields are required.
                                          </p>
                                       </div>
                                    </div>
                                 </div>
                              </form>


$(function () {

    window.verifyRecaptchaCallback = function (response) {
        $('input[data-recaptcha]').val(response).trigger('change');
    }

    window.expiredRecaptchaCallback = function () {
        $('input[data-recaptcha]').val("").trigger('change');
    }

    $('#contact-form').validator();

    $('#contact-form').on('submit', function (e) {
        if (!e.isDefaultPrevented()) {
            var url = "contact.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data) {
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#contact-form').find('.messages').html(alertBox);
                        $('#contact-form')[0].reset();
                        grecaptcha.reset();
                    }
                }
            });
            return false;
        }
    })
});
<?php
// require ReCaptcha class
require('recaptcha-master/src/autoload.php');

// configure
// an email address that will be in the From field of the email.
$from = 'Demo contact form <demo@domain.com>';

// an email address that will receive the email with the output of the form
$sendTo = 'Demo contact form <demo@domain.com>';

// subject of the email
$subject = 'New message from contact form';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message');

// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';

// ReCaptch Secret
$recaptchaSecret = '6LdX5uQUAAAAAEakfeeS4jlKkOjvSaqrawNp4gUD';

// let's do the sending

// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);
error_reporting(E_ALL & ~E_NOTICE);

try {
    if (!empty($_POST)) {

        // validate the ReCaptcha, if something is wrong, we throw an Exception,
        // i.e. code stops executing and goes to catch() block
        
        if (!isset($_POST['g-recaptcha-response'])) {
            throw new \Exception('ReCaptcha is not set.');
        }

        // do not forget to enter your secret key from https://www.google.com/recaptcha/admin
        
        $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret, new \ReCaptcha\RequestMethod\CurlPost());
        
        // we validate the ReCaptcha field together with the user's IP address
        
        $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

        if (!$response->isSuccess()) {
            throw new \Exception('ReCaptcha was not validated.');
        }
        
        // everything went well, we can compose the message, as usually
        
        $emailText = "You have a new message from your contact form\n=============================\n";

        foreach ($_POST as $key => $value) {
            // If the field exists in the $fields array, include it in the email
            if (isset($fields[$key])) {
                $emailText .= "$fields[$key]: $value\n";
            }
        }
    
        // All the neccessary headers for the email.
        $headers = array('Content-Type: text/plain; charset="UTF-8";',
            'From: ' . $from,
            'Reply-To: ' . $from,
            'Return-Path: ' . $from,
        );
        
        // Send email
        mail($sendTo, $subject, $emailText, implode("\n", $headers));

        $responseArray = array('type' => 'success', 'message' => $okMessage);
    }
} catch (\Exception $e) {
    $responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
} else {
    echo $responseArray['message'];
}

Apa yang saya coba:

saya mencoba menghapus action=contact.php tetapi masih tidak berhasil, mohon bantuannya

Solusi 1

Berikut adalah deskripsi sederhana tentang cara melakukan hal ini – maksud saya mengirimkan data Anda – dan cara penanganannya.

form: ini memiliki atribut tindakan (contact.php untuk Anda) dan semua item bernama di dalamnya dikirim ke target tindakan. Halaman ini kemudian dibuka setelah Anda melakukan apa pun yang Anda lakukan dengan data yang Anda kirim. Jika Anda harus menggunakan formulir untuk apa pun yang ingin Anda lakukan maka salah satu cara untuk melakukannya adalah dengan membuka kembali halaman yang sama yang baru saja Anda kirimkan dengan perubahan yang Anda inginkan (isi terlebih dahulu data yang dikirimkan, misalnya, bersama dengan pesan berhasil atau gagal) . Saya tidak akan melakukannya dengan cara ini, yaitu dengan formulir, jika saya ingin tetap berada di halaman yang sama.

AJAX: AJAX memungkinkan Anda mengirim data ke server, menanganinya, dan kemudian mengirim respons kembali ke halaman yang mengirim data. Anda dapat menggunakannya untuk memperbarui bagian mana pun dari halaman yang ada. Bagi Anda, mungkin ini berarti menempatkan ‘kesuksesan’ atau ‘kegagalan’ di area kosong yang Anda sediakan untuk pesan tersebut. AJAX bisa dipelajari disini.[^]

Setelah Anda terbiasa menggunakan AJAX, biasanya Anda akan lebih memilihnya daripada formulir – tetapi formulir memiliki tempatnya masing-masing.

Solusi 2

Penangan pengiriman Anda mengeluarkan permintaan AJAX, namun tidak mencegah pengiriman formulir.

Jika Anda ingin mempertahankan pengguna pada halaman saat ini, dan menangani pengiriman melalui AJAX, Anda perlu mencegah penanganan default pada acara pengiriman.

JavaScript
$('#contact-form').on('submit', function (e) {
    if (!e.isDefaultPrevented()) {
        var url = "contact.php";
        
        $.ajax({
            ...
        });
        
        e.preventDefault(); // <-- Add this line
        //return false; // <-- Remove this line
    }
});

コメント

タイトルとURLをコピーしました