Reputation: 302
I'm having issues trying to get the fadeIn/Out method AND the form submission to happen within the same script.
Often what's happening is that one will work, and the other won't. I've worked on this for about 6 hours now and I'm sure there is some logic that I'm unfortunately overlooking.
An explanation or breakdown of how this should be written would be greatly appreciated!
HTML
<form id="form" action="#">
<div class="formmesage"><p>Hi, I'm </p></div>
<div class="nameinput">
<input id="name" class="required" type="text" name="name" placeholder="name" tabindex="1">
</div>
<div class="formmesage"><p>and I'm a </p></div>
<div class="selection">
<select id="profession" name="profession" tabindex="2">
<option type="text" value="designer">designer</option>
<option value="developer">developer</option>
<option value="designer & developer">designer & developer</option>
</select>
</div>
<div class="formmesage"><p>looking to meet other </p></div>
<div class="selection">
<select id="pairprofession" name="pairprofession" tabindex="3">
<option type="text" value="designer">designers</option>
<option value="developer">developers</option>
<option value="designer & developer">designer & developers</option>
</select>
</div>
<div class="formmesage "><p>in</p></div>
<div class="selection">
<select id="location" name="location" tabindex="4">
<option type="text" value="New York" p>New York</option>
<option value="Boston">Boston</option>
<option value="Chicago">Chicago</option>
</select>
</div>
<div class="btn">
<input id="email" class="required email" type="text" name="email" placeholder="[email protected]" tabindex="5">
<button type="submit">submit</button>
</div>
</form><!-- form -->
JQUERY
$(document).ready(function(){
$("#form").validate();
$("#form").submit(function(){
$("button").click(function(){
$("#form").delay(500).fadeOut("slow");
$(".message").delay(1000).fadeIn("slow");
return false;
})
})
})
Upvotes: 0
Views: 865
Reputation: 33880
I think it should be written like this
$(document).ready(function(){
$("#form").validate({
submitHandler : function(){
$("#form").delay(500).fadeOut("slow", function(){
$(".message").fadeIn("slow");
});
return false;
}
});
});
Validate is doing the submit, do you don't need a submit binding. If you want to modify the action after submit, there's an option for validate : submitHandler
. Then after a delay of 500ms, fade out start. When the fadeout is finish, the fadein start.
Upvotes: 4