从表单输入type =“submit”打开Fancybox（或equiv） [英] Open Fancybox (or equiv) from Form input type="submit"

问题描述

有没有办法让一个fancybox（ http://fancy.klade.lv/ ）或任何
其他灯箱从提交表格（与图像按钮）？

HTML看起来像这样：

 < form action =/ ACTION / FastFindObjmethod =post> 
< input name =fastfindclass =fastfindvalue =3463type =text> 
< input name =weitertype =submit> 
< / form> 
  

这些都不行：

  $（form）。fancybox（）; 
 $（input）。fancybox（）; 
 $（input [name ='weiter']）。fancybox（）; 
  

任何人发现我的错误或有一个解决方法或替代
脚本？在此先感谢

解决方案

我相信所有其他答案都会错过问题的重点（除非我是一个误解）。我认为作者想要的是当表单提交时，其结果显示在一个fancybox中。我没有发现任何其他答案提供了该功能。为了实现这一点，我使用了jQuery Form Plugin（）。 malsup.com/jquery/form/rel =noreferrer> http://malsup.com/jquery/form/ ）可轻松将表单转换为ajax调用。然后，我使用成功回调将响应加载到fancybox中，使用$ .fancybox（）手动调用。

  $（文件）.ready（function（）{
 $（＃myForm）。ajaxForm（{
 success：function（responseText）{
 $ .fancybox（{
'content '：responseText 
}）; 
} 
}）; 
}）; 
  

因此，不要将fancybox附加到某些人工< a>标记，您将ajaxForm附加到表单本身。

is there a way to get a fancybox (http://fancy.klade.lv/) or any other lightbox from submitting a FORM (with an image button)?

HTML looks like this:

<form action="/ACTION/FastFindObj" method="post">
  <input name="fastfind" class="fastfind" value="3463" type="text">
  <input name="weiter" type="submit">
</form>

These won't do:

    $("form").fancybox();
    $("input").fancybox();
    $("input[name='weiter']").fancybox();

Anyone spotting my mistake or having a workaround or an alternative script? Thanks in advance

解决方案

I believe all the other answers miss the point of the question (unless I am the one misunderstanding). What I think the author wanted was to have it such that when a form is submitted, its results are displayed in a fancybox. I didn't find that any of the other answers provided that functionality.

To achieve this, I used the jQuery Form Plugin (http://malsup.com/jquery/form/) to easily convert the form to an ajax call. Then I used the success callback to load the response into a fancybox using a manual call to $.fancybox().

$(document).ready(function() {
    $("#myForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                'content' : responseText
            });
        }
    }); 
});

So instead of attaching fancybox to some artificial <a> tag, you attach ajaxForm to the form itself.

这篇关于从表单输入type =“submit”打开Fancybox（或equiv）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！