jQuery href behavior (waiting on a form completion from href link)
As you can see below.. I would like to embed a simple HTML form in a hidden DIV.. I would like to SHOW that div on click.. Folding out the DIV and allowing the user to complete the form开发者_如何学Go.. Once the Form Submit happens.. I would like to resume the action i.e. proceed to google.com
I'm stuck on the slide out and redirect behavior.. (is it possible to force the toggle open until form completion is successful?)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
</head>
<body>
<div id="container">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<a href="http://www.google.com" class="show_hide">check out google.com!</a><br />
<div class="slidingDiv">
<form>
some form... AJAX post
</form>
</div>
</div>
</body>
</html>
So you're looking for a link that triggers a form, and then after that form is submitted, to proceed with the link?
You need to disable the default behavior of the link and cache the URL. Then slide open the form and allow the user to do whatever. When the user submits the form (which is either a "Are you sure you want to leave?" question or a collection form processed with with AJAX) you then proceed with the link.
You want something to the effect of (on http://jsfiddle.net/Sb6CD/ too):
CSS:
body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
.slidingDiv {
display:none;
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
JS:
$(document).ready(function(){
$('a.show_hide').click(function(e){
e.preventDefault();
e.stopImmediatePropagation();
var url = $(this).attr('href');
$('.slidingDiv').slideDown();
$('form').submit(function() {
document.location = url;
return false;
})
});
});
I think I got your question. You want to follow the link only after the toggle is done sliding.. right?
This should be done like this:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var el_link = $(this);
$(".slidingDiv").slideToggle(1000, function() {
document.location.href = el_link.attr('href');
});
return false;
});
});
</script>
Or something like this...
加载中,请稍侯......
精彩评论