Javascript表单成功
Javascript form success
在我的网站上,我的表单似乎没有弹出成功消息。消息被接收,但没有通过警报向用户提供应有的指示。有人有什么想法吗?谢谢你:)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
$(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events }, submitSuccess: function($form, event) { event.preventDefault(); // prevent default
submit behaviour // get values from FORM var name = $("input#name").val(); var email = $("input#email").val(); var phone = $("input#phone").val(); var message = $("textarea#message").val(); var firstName = name; // For Success/Failure Message // Check
for white space in name for Success/Fail message if (firstName.indexOf(' ') >= 0) { firstName = name.split(' ').slice(0, -1).join(' '); } $.ajax({ url: "././mail/contact_me.php", type: "POST", data: { name: name, phone: phone, email: email, message: message
}, cache: false, success: function() { // Success message $('#success').html("
<div class='alert alert-success'>"); $('#success > .alert-success').html("
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("
</button>"); $('#success > .alert-success') .append("
<strong>Your message has been sent. </strong>"); $('#success > .alert-success') .append('
</div>'); //clear all fields $('#contactForm').trigger("reset"); }, error: function() { // Fail message $('#success').html("
<div class='alert alert-danger'>"); $('#success > .alert-danger').html("
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×") .append("
</button>"); $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
});
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle='"tab'"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});
我不知道你正在使用的功能,但是当我谷歌"Javascript消息框"时,我收到一个链接到W3Schools"http://www.w3schools.com/js/js_popup.asp",提到三个功能alert
, confirm
和prompt
。
这有帮助吗?
$(function() {
$("input,textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "././mail/contact_me.php",
type: "POST",
data: {
name: name,
email: email,
message: message
},
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
})
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle='"tab'"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});
相关文章:
- 将表单张贴到MailChimp,但显示动态成功页面
- Ajax正确发布表单,但不会返回成功数据
- 只有在ajax验证成功后才能提交表单
- 使用GET方法通过AJAX成功提交表单后更改url
- ajax在成功发布表单和更改页面上
- Jquery 提交表单,在成功提交表单到 php 后添加
- 提交表单会触发 ajax 调用,该调用会在成功时发布到操作页面
- 在JSP中成功提交表单后清除表单字段
- Jquery表单插件未显示成功功能
- 如何在成功提交后关闭弹出表单
- 仅当表单成功提交时才发生jQuery事件
- 如何在表单提交时检查firebase推送事件是否成功
- 在表单提交将DOM的一部分替换为分部之后,我应该将ajax成功绑定到什么来使我的javascript工作
- 编辑当前表单向导以成功发布数据
- php表单中的JQuery-重定向到成功页面
- 始终显示联系人表单中的问题成功消息
- 为多个表单动态指定输出ajax成功结果的位置
- 表单提交成功后调用/执行JQuery函数
- 成功提交 Web 表单后,Javascript 重置功能将不起作用
- 在 Jqgrid 编辑表单上显示成功消息