我使用对话框弹出窗口而不是模态弹出窗口。现在的问题是“提交”按钮在对话框弹出窗口中不起作用,但它在模态弹出窗口中有效。如何在对话框弹出窗口中使提交按钮工作?
HTML
<form id="contact" name="contact" method="post" novalidate="novalidate">
<div id="error"><span class="text-center"><p>Error</p></span></div>
<div class="form-group"><input name="name" type="text" class="form-controls ease-out" id="name" placeholder="Name"></div>
<div class="form-group"><input name="email" type="text" class="form-controls ease-out" id="email" placeholder="Email"></div>
<div class="form-group"><textarea name="message" id="message" class="form-controls ease-out" required="" placeholder="Message"></textarea></div>
<button id="submit" type="submit" class="newsletter-btn ease-out" title="Send" name="submit" value="Send">Send</button>
</div>
</form>
DIALOG SCRIPT
这是打开对话框的脚本
<script>
(function() {
var dlgtrigger = document.querySelector( '[data-dialog-contact]' ),
contact = document.getElementById( dlgtrigger.getAttribute( 'data-dialog-contact' ) ),
dlg = new DialogFx( contact );
dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
})();
</script>
联系脚本
<script type="text/javascript">
jQuery.validator.addMethod('answercheck', function (value, element) {
return this.optional(element) || /^\bcat\b$/.test(value);
}, "type the correct answer -_-");
// validate contact form
$(function() {
$('#contact').validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true
},
answer: {
required: false,
answercheck: false
}
},
messages: {
name: {
required: "Name required",
minlength: "At least 4 letters"
},
email: {
required: "Email required"
},
message: {
required: "Message required",
minlength: ""
},
answer: {
required: ""
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"process.php",
success: function() {
$('#contact :input').attr('disabled', 'disabled');
$('#contact').fadeTo( "fast", 0.3, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#success').fadeIn();
});
},
error: function() {
$('#contact').fadeTo( "fast", 1, function() {
$('#error').fadeIn();
});
}
});
}
});
});
</script>
先谢谢你