通過模態框提交表單而不離開頁面/模態

Question

我正在使用http://okonet.ru/projects/modalbox/index.html的項目“ModalBox”來生成我的模態。

我還使用這個整體腳本，將通過表單提交的電子郵件保存到基本文本文件中，作為一種簡單/快速的解決方案。 http://www.knowledgesutra.com/forums/topic/25586-php-simple-newsletter-script/

我有一個兩難的選擇。 為了保持模式並顯示我的'mailing_thankyou.php'，我的表單必須有'onsubmit="return false"'，但是為了讓我的php腳本工作，我必須刪除那個return false，但隨后它變為一個新頁面以保留該信息。

有沒有人有任何想法？

這是有問題的主要部分：

myModal.html

<div id="signUp">
<form action="mailer/mailing.php" id="myForm" method="post" class="style16">
    <input type="text" name="email" size="30" value="your email here!">
    <input type="submit" value="Send link" name="submit" onclick="Modalbox.show('mailer/mailing_thankyou.php', {title: 'Form sending status', width: 500, params:Form.serialize('myForm') }); return false;">
    &nbsp;or&nbsp;<a href="#" title="Cancel &amp; close dialog" onclick="Modalbox.hide(); return false;">Cancel &amp; close</a>
    <!-- ><input type="submit" value="GO!" name="submit"> -->
    </form>
</div>

您可以從我的 git 存儲庫中提取我的文件： https://github.com/jwmann/Modal-Sign-up

Answer 1

我不擅長 Mootools，所以我會在 jQuery 中給你一個例子——如果你明白了，我很確定你也會找到適合 Mootools 的語法。

這個想法是使用 AJAX 調用表單提交（並保持onsubmit="return false;"以便瀏覽器 window 不會重新加載）：

var $form = $('#myForm');
$.post($form.attr('action'), $form.serialize(), function(response) {
    $('div#signUp').html(response);
});

這是做什么的：

將 jQuery 包裝的表單元素存儲到$form
使用表單的action屬性值作為請求目標地址
序列化和傳輸所有表單元素的值
執行回調 function，它采用返回的 HTML 代碼並用此 HTML 替換<div id='signUp'>...</div>的內容。

注意：確保 forms action中的腳本僅返回 html 用於注冊框的內容（意味着沒有<head> ， <body>等 - 只返回應該在框中的內容）

編輯/修正

這是我剛剛在Ajax/Request 的 MooTools 文檔頁面上發現的：

相當於我在 MooTools 中的 jQuery 片段將是

new Request.HTML({                     // Creates an AJAX request
    'url': $('myForm').get('action'),  // Sets request address to the form's action
    'update': $('signUp')              // Indicates that results should be auto-loaded into element with id='signUp'
}).post($('myForm'));                  // Indicates that this form has to be serialized and transferred; also starts the request process

這要求表單的操作返回要顯示的結果（感謝消息）。 可以通過在成功處理表單數據后從服務器端進行重定向來實現這一點，例如在 PHP header('Location: mailer/mailing_thankyou.php'); exit; header('Location: mailer/mailing_thankyou.php'); exit;

在查看了您的代碼之后，我意識到這並不完全是您想要的（我看到您不希望將表單替換為感謝消息 - 您希望它顯示在模式中）。 因此，您的案例的更新解決方案：

new Request.HTML({                     // Creates an AJAX request
    'url': $('myForm').get('action'),  // Sets request address to the form's action
    'onSuccess': function() {          // Defines what to do when request is successful (similarly you should take care of error cases with onFailure declaration
        Modalbox.show('mailer/mailing_thankyou.php', {
            title: 'Form sending status', 
            width: 500
            // I have removed params from here, because they are handled in the .post() below
        });
    }
}).post($('myForm'));                  // Indicates that this form has to be serialized and transferred; also starts the request process

如果其中任何一個不起作用，請原諒我（正如我所說，我更像是一個 jQuery 人 - 只是想在這里提供幫助）

Answer 2

讓表單提交到頁面上隱藏的 iframe。 為 iframe 指定名稱值，然后在表單上設置目標屬性。 您可以將 iframe 設置為 1x1 像素並將visibility設置為hidden （如果您通過display: none隱藏它可能不適用於所有瀏覽器。）

有關詳細信息，請參閱此問題：您如何發布到 iframe？

Answer 3

我從輸入提交的“onsubmit”（duhhh facepalm ）中刪除了“return false”，因為它首先嘗試使用prototype.js 對其進行序列化

然后我更改了 php 腳本，所以它會使用 $_GET 而不是 $_POST

不需要額外的功能或黑客。 感謝您的所有幫助。

通過模態框提交表單而不離開頁面/模態

問題描述

3 個解決方案

解決方案1
3 2011-06-01 07:11:29

解決方案2
0 2011-06-01 19:05:26

解決方案3
0 已采納 2011-06-02 22:15:54

通過模態框提交表單而不離開頁面/模態

問題描述

3 個解決方案

解決方案1 3 2011-06-01 07:11:29

解決方案2 0 2011-06-01 19:05:26

解決方案3 0 已采納 2011-06-02 22:15:54

解決方案1
3 2011-06-01 07:11:29

解決方案2
0 2011-06-01 19:05:26

解決方案3
0 已采納 2011-06-02 22:15:54