Member 14748101 Ответов: 2

После отправки формы она показывает сообщение об успехе на другой странице


<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 </span></button> 
                                       </div>
                                    </div>
                                    <div class="row">
                                       <div class="col-md-12">
                                          <p class="text-muted">
                                             * 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'];
}


Что я уже пробовал:

я попробовал удалить action=contact.php но все равно это не работает пожалуйста помогите

2 Ответов

Рейтинг:
1

Richard Deeming

Ваш обработчик отправки выдает AJAX-запрос, но это не мешает отправке формы.

Если вы хотите сохранить пользователя на текущей странице и обрабатывать отправку через AJAX, вам необходимо предотвратить обработку события отправки по умолчанию.

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


Рейтинг:
0

W∴ Balboos, GHB

Вот упрощенное описание того, как это можно сделать - под которым я подразумеваю отправку ваших данных - и как они затем обрабатываются.

форма: это имеет атрибут действия (contact.php для вас), и все именованные элементы в пределах от отправляются в цель действия. Эта страница будет открыта после того, как вы сделаете все, что вы делаете с данными, которые вы отправили. Если вы должны использовать форму для того, что вы хотите сделать, то один из способов сделать это-снова открыть ту же страницу, которую вы только что отправили с желаемыми изменениями (например, предварительно заполнить отправленные данные вместе с сообщением об успехе или неудаче). Я бы не стал делать это таким образом, то есть с формами, если бы хотел остаться на той же странице.

АЯКС: AJAX позволяет отправлять данные на сервер, обрабатывать их, а затем отправлять ответ обратно на страницу, которая отправила данные. Вы можете использовать его для обновления любой части существующей страницы. Для вас, возможно, это означало бы поместить "успех" или "неудачу" в пустую область, которую вы зарезервировали для сообщения. Аяксу можно научиться здесь.[^]

Как только вы привыкнете к использованию AJAX, вы, как правило, предпочтете его форме - но формы действительно имеют свое место.


Member 14748101

Я хочу знать, как связать его с моим sql

W∴ Balboos, GHB

Эту ссылку я дал вам на W3Schools - у них тоже есть учебник по MySQL. Остальное следует за тем, что я ответил изначально.