在模态窗口上的PHP表单ajax“成功与失败”消息

Question

我无法在同一模式窗口中显示错误消息或成功。 我已经安装了wordpress，使用的代码如下：

形成

<form id="formcotizador" method="post" action="<?php echo get_template_directory_uri(); ?>/cotizador/proccess.php">                             

    <div class="small-12 medium-4 large-4 columns">
        <input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required>
    </div>

    <div class="small-12 medium-4 large-4 columns">
        <select name="provincia" id="provincia">
            <option value="default">Seleccione una Provincia</option>
            <option value="Buenos Aires">Buenos Aires</option>
            <!-- ... -->
        </select>
    </div>

    <div class="small-12 medium-4 large-4 columns">
        <input type="text" id="localidad" name="localidad" placeholder="Localidad" required>
    </div>

    <div class="small-12 medium-4 large-4 columns">
        <input type="email" id="email" name="email" placeholder="Tu email" required>
    </div>

    <div class="small-12 medium-4 large-4 columns">
        <input type="submit" value="Enviar consulta" class="button tiny radius">
    </div>
    <!-- error, success div -->
    <div class="small-12 medium-4 large-4 columns msjj"></div>

</form>

PHP （proccess.php）

<?php 

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        $name = strip_tags(trim($_POST['nombre']));
        $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $provincia = $_POST['provincia'];
        $localidad = strip_tags(trim($_POST['localidad']));
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $telefono = strip_tags(trim($_POST['telefono']));

        $recipient = "produccion@dev.criterionet.com";

        // Set the email subject.
        $subject = "New contact from $name";

        // Build the email content.
        $email_content = "Name: $name\n";
        $email_content .= "Email: $email\n\n";
        $email_content .= "Message:\n$message\n";

        // Build the email headers.
        $email_headers = "From: $name <$email>";

        if (mail($recipient, $subject, $email_content, $email_headers)) {
            http_response_code(200);
            echo "Gracias por enviar el msj";
        } else {
            http_response_code(500);
            echo "Hubo un error al enviar el msj";
        }


    } else {
        http_response_code(403);
        echo "hubo un problema al enviar, pruebe de nuevo";
    }
?>

JS /阿贾克斯

$(function() {

    var form = $('#formcotizador');
    var formMessages = $('.msjj');

    $(form).submit(function(e) {
        e.preventDefault();

        var formData, = $(form).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData,         
        })
        .done(function(response) {          
                $(formMessages).removeClass('error');
                $(formMessages).addClass('success');

                $(formMessages).text(response);

                $('#nombre').val('');
                $('#provincia').val('default');
                $('#localidad').val('');
                $('#email').val('');
        })
        .fail(function(data) {

                $(formMessages).removeClass('success');
                $(formMessages).addClass('error');

                if (data.responseText !== '') {
                    $(formMessages).text(data.responseText);
                } else {
                    $(formMessages).text('Este es el error');
                }; 
        });
    });
});

当我发送邮件时，我使用proccess.php的消息重定向到“ action”属性形式的页面

您可以在这里进行自我测试。

这是修改的代码： 如何创建AJAX联系人表单 。 我认为问题在于该帖子没有针对模式窗口进行解释。

Answer 1

您的页面上有一些JS错误。 但是特别是这段代码

var formData, = $(form).serialize();

应该

var formData = $(form).serialize();

Answer 2

除了语法错误外，主要问题在于表单正在页面中移动以便以模式打开。

移动元素时，绑定到该元素的事件会丢失。

为了解决这个问题，您可以使用on()委托submit处理程序

尝试更换：

var form = $('#formcotizador');
    var formMessages = $('.msjj');

    $(form).submit(function(e) {

同

$(document).on('submit', '#formcotizador', function(e){

        var form = $(this);
        var formMessages = $('.msjj');

        e.preventDefault();

        /* remainder of your code */


});