javascript - 表单成功处理后如何执行操作？

Question

我想让表单隐藏，并在表单成功提交后显示感谢信息。我已经完成了下面的代码，但在提交表单后我无法设法执行任何操作..就像“if”函数被忽略一样。

下面是我的代码:

JQuery:

$('form#contactform').submit(function(event) {

var formData = {

    //get form data
    'name' : $('input[name=name]').val(),
    'email' : $('input[name=email]').val(),
    'subject' : $('input[name=subject]').val(),
    'message' : $("#msg").val(),

};

$.ajax({
    type : 'POST',
    url : 'sendmail.php',
    data : formData,
    dataType : 'json',
    encode : true   
})

//Done promise callback
.done(function(data) {

    //log data to console
    console.log(data);

    //Errors and validation messages        
    if (! data.success == true) {

        $('section#contact form#contactform').hide;
        $('section#contact div.thxform').show;

    } else {

        alert("An internal error has occured");

    }

});

//Stop form default action
event.preventDefault();

PHP:

<?php

$errors = array(); //array to hold validation errors
$data = array(); //array to pass back data

//validate variables
if (empty($_POST['name']))
    $errors['name'] = 'Name is required';

if (empty($_POST['email']))
    $errors['email'] = 'E-Mail is required';

if (empty($_POST['subject']))
    $errors['subject'] = 'Subject is required';

if (empty($_POST['message']))
    $errors['message'] = 'Please enter a message';

//Return response
if ( ! empty($errors)) {          //If there are errors

    $data['success'] = false;
    $data['errors'] = $errors;

} else {

    //Process form
    $name = $_POST['name'];
    $email = $_POST['email'];
    $re = $_POST['subject'];
    $message = $_POST['message'];

    $from = 'info@jamescremona.com';
    $to = 'jmscre@gmail.com';
    $subject = 'Form submission';

    $body = "From: $name\n E-mail: $email\n Subject: $re\n Message: $message\n";

    if (mail ($to, $subject, $body, $from)) { 
        echo '<p>Your message has been sent!</p>';
    } else { 
        echo '<p>Something went wrong, go back and try again!</p>'; 
    }       

    $data['success'] = true;
    $data['message'] = 'Form Submitted';

}

echo json_encode($data);

任何帮助将不胜感激。谢谢。

Answer 1

我在您的代码中发现的第一个错误:

'message' : $("#msg").val(), 这是数组中的最后一项，因此不需要 ',' javascript 期望在 ',' 之后有更多项目

您需要在控制台中检查所有 js 错误，它们就在那里。

然后是我看到的第二个错误，

$('section#contact form#contactform').hide;
$('section#contact div.thxform').show;jquery 中不存在 show 和 hide 他们有 show(); 和 hide(); 那么这里: if (! data.success == true) { }

这就是您的代码的外观:

<script type="text/javascript">
$('form#contactform').submit(function(event) {

var formData = {

    //get form data
    'name' : $('input[name=name]').val(),
    'email' : $('input[name=email]').val(),
    'subject' : $('input[name=subject]').val(),
    'message' : $("#msg").val()

};

$.ajax({
    type : 'POST',
    url : 'sendmail.php',
    data : formData,
    dataType : 'json',
    encode : true   
})
.done(function(data) {
    //log data to console
    console.log(data);

    //Errors and validation messages        
    if (!data.success) {

        $('section#contact form#contactform').hide();
        $('section#contact div.thxform').show();

        //check which field was wrong and show the user
        if(data.errors.name){

            $('section#contact div.thxform').append(data.errors.name);
        }
        if(data.errors.email){

           $('section#contact div.thxform').append(data.errors.email); 
        }
        if(data.errors.subject){
            $('section#contact div.thxform').append(data.errors.subject);
        }
        if(data.errors.message){
            $('section#contact div.thxform').append(data.errors.message);
        }

    }else{

        $('#successDIV').append(data.message);
    }

}),
.fail(function(data){
    //debugging puporses, all your php errors will be printed in the console
    console.log(data);

});

//Stop form default action
event.preventDefault();
</script>