HTML
<form action="database/contact-form.php" id="contact-form" method="post" name="contact-form">
<input name="name" placeholder="What is your name?" type="text"> <input name="email" placeholder="Your Email?" type="email">
<textarea name="message" placeholder="Tell us about your project."></textarea>
<input class="contact-form-btn" name="contact-form-btn" type="submit" value="Send">
<div class="form-preloader"></div>
<div class="form-sent"></div>
</form>
CSS
.contact-form-btn {
background-color: #292929;
border: 0 none;
border-radius: 0;
top: 185px;
right: 0;
color: #fff;
display: inline-block;
font-weight: 500;
height: 36px;
position: absolute;
width: 18%;
cursor: pointer;
}
.form-preloader {
background: #11999e url(../images/preloader.gif) no-repeat scroll center center;
border: 0 none;
border-radius: 0;
top: 185px;
right: 0;
color: #fff;
display: none;
font-weight: 500;
height: 36px;
position: absolute;
width: 18%;
cursor: pointer;
}
.form-sent {
background: #292929 url(../images/check.svg) no-repeat scroll center center;
background-color: #292929;
border: 0 none;
border-radius: 0;
top: 185px;
right: 0;
color: #fff;
display: none;
font-weight: 500;
height: 36px;
position: absolute;
width: 18%;
cursor: pointer;
}
的jQuery
$('form').submit(function() {
$(document).off(".firstCall");
$(document).on("ajaxStart.secondCall", function() {
$('.form-preloader').addClass('show-preloader');
});
$(document).on("ajaxStop.secondCall", function() {
$("#contact-form")[0].reset();
$('.form-preloader').removeClass('show-preloader');
$('.form-sent').addClass('show-preloader');
});
$.get("/", function() {});
});
我在这里有点困惑。
我如何才能使<div class="form-preloader"></div>
在ajaxStart
上提交表单时显示,.click()
正在处理,但我必须将其更改为.submit()
。仅在<div class="form-sent"></div>
上提交表单时显示ajaxStop
。