有没有办法得到一个花式框 (http://fancy.klade.lv/) 或任何 其他灯箱提交表单（带有图像按钮）？
HTML 看起来像这样：
<form action="/ACTION/FastFindObj" method="post">
<input name="fastfind" class="fastfind" value="3463" type="text">
<input name="weiter" type="submit">
</form>
这些不行：
$("form").fancybox();
$("input").fancybox();
$("input[name='weiter']").fancybox();
任何发现我的错误或有解决方法或替代方法的人 脚本？在此先感谢
【问题讨论】：
标签： jquery forms submit fancybox
我一直在努力解决这个问题，并找到了一种在花哨的 iframe 中显示结果的方法，我不擅长 ajax，所以需要一个使用 jquery 的 php 解决方案，我的第一个答案！ ：
需要在您的 jquery.fancybox js 文件中进行一些调整，我使用的是jquery.fancybox.1.3.4.pack.js。用任何编辑器等打开它，然后搜索：name="fancybox-frame：就是这样，应该只找到一个实例，看起来像：
name="fancybox-frame'+(new Date).getTime()+'"
现在你想重命名整个：
fancybox-frame'+(new Date).getTime()+'`
你想要的任何东西，我都叫它："fbframe" 并保存文件。现在添加 jquery 设置，如下所示，它应该可以正常工作：
//activate jquery on page load and set onComplete the most important part of this working
$(document).ready(function(){
$("#a").fancybox({
'width' : '75%',
'height' : '100%',
'autoScale' : false,
'type' : 'iframe',
'onComplete':function (){$('#formid').submit();},
});
});
//function called onclick of form button.
function activatefancybox(Who){
$("#setID").val(Who); // i set the value of a hidden input on the form
$("#a").trigger('click');//trigger the hidden fancybox link
}
// hidden link
<a id="a" href='#'></a>
// form to submit to iframe to display results.
// it is important to set the target of the form to the name of
// the iframe you renamed in the fancybox js file.
<form name='iduser' id='iduser' action='page.php' target='fbframe' method='post'>
<input />
<input />
<input id='setID' type='hidden' name='userid' value='' />
<input type="button" onClick='testfb(123)' />
</form>
过程是：
点击提交->调用函数->函数点击FB链接->onComplete
onComplete 在 FB 加载后将表单提交到 iframe！完成。
请注意，我已经从我当前的项目中删除了这个，并且刚刚编辑了某些必需的部分，我仍然是一个业余编码人员，如果可以的话，我会推荐 ajax。而且我只使用FB1！ FB2 现在可用。
【讨论】：
此解决方案可能会达到您的目的：
--
$(document).ready(function(){
$('#yourform').submit(function() {
var url = $(this).attr("action") + "?" + $(this).serialize();
$.fancybox({
href: url,
'type': 'iframe'
});
return false;
});
});
【讨论】：
基于
--
$(document).ready(function() {
$("#myForm").submit(function() {
$.fancybox.showLoading(); // start fancybox loading animation
$.ajax({
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$.fancybox({ 'content' : response }); // target response to fancybox
},
complete: function() { // on complete...
$.fancybox.hideLoading(); //stop fancybox loading animation
}
});
return false; // stop default submit event propagation
});
});
【讨论】：
Fancybox 可以直接处理 ajax 请求，无需额外的 jQuery 脚本。
$("#login_form").bind("submit", function() {
$.ajax({
type : "POST",
cache : false,
url : "/login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
<form action="/login.php" method="POST" id="login_form">
<input type="input" size="20" name="username" />
<input type="submit" value="Login" />
</form>
【讨论】：
我相信所有其他答案都没有抓住问题的重点（除非我是一个误解）。我认为作者想要的是，当提交表单时，它的结果会显示在一个精美的框中。我没有发现任何其他答案都提供了该功能。
为了实现这一点，我使用了 jQuery 表单插件 (http://malsup.com/jquery/form/) 轻松地将表单转换为 ajax 调用。然后我使用成功回调通过手动调用 $.fancybox() 将响应加载到fancybox。
$(document).ready(function() {
$("#myForm").ajaxForm({
success: function(responseText){
$.fancybox({
'content' : responseText
});
}
});
});
所以不是将fancybox附加到一些人工的标签上，而是将ajaxForm附加到表单本身。
【讨论】：
我只需要这样做。以下是我的做法。
$('#elementid').fancybox({
onStart : function() {
$.post($(this).attr('href'), $('#formid').serialize());
}
});
这样您就可以一次性提交表单并调用fancybox。它确实提交了表单 ajax 样式。 “提交”按钮需要在 标签中。
希望对您有所帮助。
【讨论】：
您可以对表单数据进行 ajax 提交，将数据存储在会话中，然后触发链接点击。
【讨论】：
一个更好的主意是使用即时 html，即。
$("#buttontoclick").click(function() {
$('<a href="path/to/whatever">Friendly description</a>').fancybox({
overlayShow: true
}).click();
});
【讨论】：
试试这个
$(document).ready(function() {
$("#link").fancybox();
$("#btn").click(function(){
$("#link").trigger('click');
});
});
<input type="button" id="btn" value="Button" />
<div style="display:none;">
<a href="#test" id="link">Click</a>
</div>
<div id="test" style="display:none;">fancy box content</div>
点击按钮，触发点击隐藏的 href。
希望对你有帮助
【讨论】：