Open Fancybox (or equiv) from form imput with a href [duplicate]
This question already has answers here:
jQuery plugin conflicts - please assist
(6 answers)
Closed 7 years ago.
Attempting to open a Fancybox once a form is submitted. I am also trying to do an ajax call to a php script ... don't exactly know where to put that in. Here is the code. If anyone has any ideas I would really appreciate it. As you can probably tell I have no idea what I am doing with AjaxForm.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43"></script>
<link href="xtras/css/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<!--[if IE 6]><link href="xtras/css/style-ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="xtras/css/style-ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript">
$(document).ready(function() {
$("#signup").ajaxForm(function() {
alert("TEST")
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="container">
<div id="开发者_Go百科pillar">
<h1>Test</h1>
<form action="GET" id="signup" name="signup" >
<input name="email" id="email"></input>
<input id="submit" name="submit" type="submit"></input>
<a href="javascript:document.signup.submit();" >SUBMIT</a>
</form>
</div>
</div>
</body>
I also tried this:
$(document).ready(function() {
$("#myForm").ajaxForm({
success: function(responseText){
$.fancybox({
'content' : responseText
});
}
});
});
Anyone know where I am going wrong? Thanks in advance.
I adapted this from the examples on the FancyBox page (tip #5) to work with the Forms plugin. IT may work out of the box or you might need to tweak. However if you were to instead use the example minus the validation from that blog page that should work without fail and it does the same thing youre doing with the forms plugin anyhow.
JS:
$(document).ready(function() {
$('a#signup').fancybox();
$("#signup_form").ajaxForm({
beforeSubmit: function(){ $.fancybox.showActivity();},
success: function(data){
$.fancybox(data);
}
});
});
HTML:
<a href="#signup_form" id="signup">Signup</a>
<div style="display: none;">
<form action="POST" id="signup_form" name="signup">
<input name="email" id="email" />
<input id="submit" name="submit" type="submit" value="Sign Up" />
</form>
</div>
加载中,请稍侯......
精彩评论