I use a dialog popup instead of a modal popup. The problem now is that the "submit" button does not work in the dialog popup, but it works in the modal popup. What do i have to do to make the submit button work in the dialog popup?
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
This is the script for opening the dialog
<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>
CONTACT 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>
Thank you, on before hand