jQuery表单提交后未显示成功消息

Question

我已经使用以下jQuery + AJAX发送表单。它将数据发布到PHP，但成功后未显示成功消息。

我也想提交后清空输入字段。

function sendContact() { 
    event.preventDefault(); 
    var valid; 

    valid = validateContact(); 
    if (valid) { 
    jQuery.ajax({ 
     url: " ", 

     data: 'userName=' + $("#userName").val() + '&userEmail=' + $("#userEmail").val() + '&subject=' + $("#subject").val() + '&content=' + $(content).val(), 
     type: "POST", 
     success: function(data) { 
     $("#mail-status").html(data); 
     $('#mail-status').show(); 
     $("#frmContact").hide(); 

     // Clear the form. 
     $('#userName').val(''); 
     $('#userEmail').val(''); 
     $('#content').val(''); 
     }, 
     error: function() {} 
    }); 
    } 
} 

function validateContact() { 
    var valid = true; 
    $(".InputBox").css('background-color', ''); 
    $(".info").html(''); 

    if (!$("#userName").val()) { 
    $("#userName-info").html("(required)"); 
    $("#userName").css('background-color', '#FFFFDF'); 
    valid = false; 
    } 
    if (!$("#userEmail").val()) { 
    $("#userEmail-info").html("(required)"); 
    $("#userEmail").css('background-color', '#FFFFDF'); 
    valid = false; 
    } 
    if (!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) { 
    $("#userEmail-info").html("(invalid)"); 
    $("#userEmail").css('background-color', '#FFFFDF'); 
    valid = false; 
    } 
    if (!$("#content").val()) { 
    $("#content-info").html("(required)"); 
    $("#content").css('background-color', '#FFFFDF'); 
    valid = false; 
    } 
    return valid; 
} 

HTML：

<div id="frmContact"> 
    <div id="mail-status" style="display: none;"> 
    Thanks! Our Admin 'll contact shortly.</div> 

    <div> 
    <label style="padding-top:20px;">Name</label><span id="userName-info" class="info"></span> 
    <br/> 
    <input type="text" name="userName" id="userName" class="InputBox"> 
    </div> 
    <div> 
    <label>Email</label><span id="userEmail-info" class="info"></span> 
    <br/> 
    <input type="text" name="userEmail" id="userEmail" class="InputBox"> 
    </div> 

    <div> 
    <label>Content</label><span id="content-info" class="info"></span> 
    <br/> 
    <textarea name="content" id="content" class="InputBox" cols="25" rows="6"></textarea> 
    </div> 
    <div> 
    <button name="submit" class="btnAction" onClick="sendContact();">Send</button> 
    </div> 
</div> 

Answer 1

见this小提琴。

对于我所做的更改以及一些观察结果，有许多建议。

首先，如果您的表格是表格，那么使用form元素和您的#frmContact id。这将有以下几个原因是有益的：

<form id="frmContact" action="/echo/html/" method="POST">...</form> 

1. 我们现在可以使用action和method属性来管理其对提交行为。您可以将操作更新为应该到达的URL和方法 - 在本例中为POST。
2. 由于它是一个表单，我们现在可以在成功提交后触发其上的reset事件，该事件处理您清空字段的要求。
3. 我们可以使用.serialize()来收集所有表单输入数据，因此您不需要手动通过您的输入来选择所需内容并创建查询字符串。

JS：

$("#frmContact").on("submit", function() { 
    event.preventDefault(); 

    var form = this; 

    jQuery.ajax({ 
    type: form.method, 
    url: form.action, 
    data: $(form).serialize(), 
    success: function(data) { 
     $("#mail-status") 
     .html(data) 
     .show(); 

     $(form) 
     .hide() 
     .trigger("reset"); 
    }, 
    error: function(xhr, status, error) { 
     console.log(error); 
    }, 
    complete: function(xhr, status) { 
     console.log(xhr, status); 
    } 
    }); 
}); 

我们不一定需要任何验证功能了。只需使用required和type=email的HTML5属性来验证电子邮件地址。

如果您确实需要向后兼容，通过一切手段改变这种方式，但对于问题的最小可重现版本，在您的问题中忽略这一点要容易得多。

如果您仍然遇到问题，请在浏览器的开发人员工具控制台中提供您的PHP并使用控制台的任何反馈更新您的问题，并提供您的浏览器名称和版本。