從窗體輸入類型=「提交」

Question

打開Fancybox（或equiv）有沒有辦法讓一個fancybox（http://fancy.klade.lv/）或其他任何一個窗體提交一個FORM（帶圖像按鈕）的 ？

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(); 

任何人察覺我的錯誤或有解決方法或替代 腳本？在此先感謝

Answer 1

我相信所有其他的答案都會錯過問題的重點（除非我是一個誤解）。我認爲作者想要的是當表單提交時，其結果顯示在一個fancybox中。我沒有發現任何其他答案提供了該功能。

爲了達到這個目的，我使用了jQuery Form Plugin（http://malsup.com/jquery/form/）來輕鬆地將表單轉換爲ajax調用。然後，我使用成功回調將響應加載到fancybox中，使用$ .fancybox（）手動調用。

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

因此，與其連接的fancybox一些人工<一個>標籤，你附加給ajaxForm到窗體本身。

Answer 2

試試這個

$(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點擊按鈕的點擊。

希望這可以幫助

Answer 3

一個更好的主意是使用即時的HTML，即。

$("#buttontoclick").click(function() { 
    $('<a href="path/to/whatever">Friendly description</a>').fancybox({ 
     overlayShow: true 
    }).click(); 
}); 

Answer 4

您可以做一個表單數據的ajax提交，將數據存儲在會話中，然後觸發鏈接點擊。

Answer 5

我只需要這樣做。這是我如何去做的。

$('#elementid').fancybox({ 
    onStart : function() { 
     $.post($(this).attr('href'), $('#formid').serialize()); 
    } 
}); 

這樣你就可以一次性提交表單並調用fancybox。它確實提交了表單ajax樣式。 「提交」按鈕需要位於<a>標記中。

希望有所幫助。

Answer 6

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> 

Answer 7

我剛纔一直在努力與這一點，並找到一種方法來顯示看中箱的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> 

的proccess是：

點擊提交 - >通話功能 - >功能點擊FB鏈接 - >的onComplete

onComplete FB加載後提交表單到iframe！完成。

請注意我已經從我目前的項目中剔除了這些，並且只編輯了某些必需的部分，我仍然是一個業餘編碼器，如果可以的話，會推薦使用ajax。也只使用FB1！ FB2現在可用。

Answer 8

基於從

• 加蘭教皇的原始解決方案[更少.ajaxForm]由Paolo Bergantino
• AJAX調用方案作爲替代，以.ajaxForm]
• 的fancybox加載動畫處理由我自己[等等用戶知道內容正在加載中]

-

$(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 
    }); 

}); 

Answer 9

該解決方案可滿足您的目的：

• 沒有AJAX調用
• 使用的fancybox的IFRAME型選項
• 通網址[+數據，通過jQuery的連載方法]在的fancybox的href選項
• 加載動畫是自動的

-

$(document).ready(function(){ 
     $('#yourform').submit(function() { 
      var url = $(this).attr("action") + "?" + $(this).serialize(); 
      $.fancybox({ 
       href: url, 
       'type': 'iframe' 
      }); 
      return false; 
     }); 
});