javascript - 如何在用户提交表单后显示成功消息

标签 javascript php jquery ajax xmlhttprequest

        $('input[type="submit"]').click(function(){
            resetErrors();
            $.each($('form input, form textarea, form select'), function(i, v){
                if(v.type !== 'submit'){
                    data[v.name] = v.value;
                }
            });
            $.ajax({
                dataType: 'json',
                type: 'POST',
                url: 'libs/contact.php',
                data: data,
                success: function(resp){
                    if(resp === true){
                        $('form').submit();
                        if(status == "success"){
                            console.log('Success')
                        }
                        return false;
                    } else {
                        $.each(resp, function(i, v){
                            console.log(i + " => " + v);
                            var msg = '<label class="error" for"' +i+ '">' +v+ '</label>';
                            $('input[name="' +i+ '"], textarea[name="' +i+ '"], select[name="' +i+ '"]').addClass('inputTextError').after(msg);
                        });
                        var keys = Object.keys(resp);
                        $('input[name="' +keys[0]+ '"]').focus
                    }
                    return false;
                },
                error: function(){
                    console.log('There was a problem checking fields');
                }

            });
            return false;
        });
    });
        function resetErrors(){
            $('form input, form textarea').removeClass('inputTextError');
            $('label.error').remove();
    }

这是我的代码,我已经尝试了所有方法,但仍然无法正常工作,HELP PLZ 我正在服务器上进行所有验证,我只是使用 ajax 来显示错误,所以我也想显示成功消息,但这有点令人困惑

这是我的 PHP 代码

require_once('phpmailer/PHPMailerAutoload.php');

$errors = [];

if(isset($_POST['name'], $_POST['email'], $_POST['number'], $_POST['message'])){
    $fields = [
        'name' => $_POST['name'],
        'email' => $_POST['email'],
        'number' => $_POST['number'],
        'message' => $_POST['message']
    ];
    if(empty($fields['name'])){
        $errors['name'] = 'Come on you have a name right?';
    }
    if(empty($fields['email'])){
        $errors['email'] = 'Yes right, we need your email so that we contact you';
    }

    if(empty($fields['number'])){
        $errors['number'] = 'We also need your number';
    }

    if(empty($fields['message'])){
        $errors['message'] = 'You have come this far for sure you have something to say right';
    }
    if(count($errors) > 0){
        if ( !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ){
            echo json_encode($errors);
            exit;
        }

        echo "<ul>";
        foreach($errors as $key => $value){
            echo '<li>' . $value . '</li>';
        }
        echo '</ul>';
        exit;
    }
    /*foreach($fields as $field => $data){
        if(empty($data)){
            $errors[] = 'The ' . $field . ' field is required.';
        }
    }*/
    if(empty($errors)){
        $m = new PHPMailer;

        $m->isSMTP();
        $m->SMTPAuth = true;

        $m->Host = 'smtp.gmail.com';
        $m->Username = '';
        $m->Password = '';
        $m->SMTPSecure = 'ssl';
        $m->Port = 465;

        $m->isHTML();

        $m->Subject = 'Contact form submitted';
        $m->Body = 'From: ' . $fields['name'] . '(' .$fields['email'] . ')<p>' . $fields['message'] . '</p><p>' . $fields['number'] . '</p>';

        $m->FromName = 'contact';

        $m->AddReplyTo($fields['email'], $fields['name']);

        $m->AddAddress('');

        if($m->send()){
            header('Location: ../contact.php');
            die();
        } else {
            $errors[] = 'Sorry could not send email. Try again later.';
        }
    }
} else {
    echo 'Oops something went wrong';
}

$_SESSION['errors'] = $errors;
$_SESSION['fields'] = $fields;

header('Location: ../contact.php');

最佳答案

很难找出代码中的内容,但我想这应该适用于我所做的更改。

jQuery/ajax

success: function(resp){
    if(resp === 'Success'){
        console.log('Success');
        $('form').submit();
        return false;
    } else {
        $.each(resp, function(i, v){
            console.log(i + " => " + v);
            var msg = '<label class="error" for"' +i+ '">' +v+ '</label>';
            $('input[name="' +i+ '"], textarea[name="' +i+ '"], select[name="' +i+ '"]').addClass('inputTextError').after(msg);
        });
        var keys = Object.keys(resp);
        $('input[name="' +keys[0]+ '"]').focus
    }
    return false;
}

PHP

<?php

if(isset($_POST['name'], $_POST['email'], $_POST['number'], $_POST['message'])){
    $errors = array();
    $fields = [
        'name' => $_POST['name'],
        'email' => $_POST['email'],
        'number' => $_POST['number'],
        'message' => $_POST['message']
    ];
    if(empty($fields['name'])){
        $errors['name'] = 'Come on you have a name right?';
    }
    if(empty($fields['email'])){
        $errors['email'] = 'Yes right, we need your email so that we contact you';
    }

    if(empty($fields['number'])){
        $errors['number'] = 'We also need your number';
    }
    if(empty($fields['message'])){
        $errors['message'] = 'You have come this far for sure you have something to say right';
    }
    if(count($errors) > 0){
        if ( !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ){
            echo json_encode($errors);
            exit;
        }

        echo "<ul>";
        foreach($errors as $key => $value){
            echo '<li>' . $value . '</li>';
        }
        echo '</ul>';
        exit;
    }
    /*foreach($fields as $field => $data){
        if(empty($data)){
            $errors[] = 'The ' . $field . ' field is required.';
        }
    }*/
    if(empty($errors)){
        $m = new PHPMailer;

        $m->isSMTP();
        $m->SMTPAuth = true;

        $m->Host = 'smtp.gmail.com';
        $m->Username = '';
        $m->Password = '';
        $m->SMTPSecure = 'ssl';
        $m->Port = 465;

        $m->isHTML();

        $m->Subject = 'Contact form submitted';
        $m->Body = 'From: ' . $fields['name'] . '(' .$fields['email'] . ')<p>' . $fields['message'] . '</p><p>' . $fields['number'] . '</p>';

        $m->FromName = 'contact';

        $m->AddReplyTo($fields['email'], $fields['name']);

        $m->AddAddress('hello@jilstudios.com', 'JIL Studios');

        if($m->send()){
            echo 'Success';
        } else {
            $errors[] = 'Sorry could not send email. Try again later.';
        }
    }
} else {
    echo 'Oops something went wrong';
}

$_SESSION['errors'] = $errors; $_SESSION['fields'] = $fields;

header('Location: ../contact.php');

?>

关于javascript - 如何在用户提交表单后显示成功消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31230703/

相关文章:

php - 10 月 CMS 使用迁移创建 UUID 默认值触发器

javascript - 在React中,为什么我们在箭头函数中调用this?

javascript - Angularjs ui-grid整行可同时编辑错误

javascript - 创建具有更改字段的函数(Javascript?)

php - 多维数组表填充

javascript - 将方括号内容替换为html

javascript - 如何简化嵌套循环和条件?

javascript - Quickblox Webrtc 音频通话 - 听不到声音

javascript - jQuery.find() IE7 错误?

javascript - 将数学公式翻译为 JavaScript