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

我使用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腳本能夠正常工作，我必須刪除那個返回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

來源

2011-06-01 jwmann

嘗試ajax後onsubmit到您的mailing.php文件，然後成功，你可以調用Modalbox.show。你可以使用jQuery嗎？它非常簡單，例如： $ .post（'mailer/mailing.php'，function（data）{ Modalbox.show（...）; }）; – squidbe 2011-06-01 07:20:57

我刪除了「返回false 「從輸入提交的‘的onsubmit’（duhhh 捂臉），因爲它試圖序列化與prototype.js中

第一。安迪然後，我改變了PHP腳本，以便將與$ _GET代替$ _POST搶

沒有添加功能或黑客需要。儘管謝謝你的幫助。

來源

2011-06-02 22:15:54 jwmann

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

的想法是使用AJAX調用的形式提交（並保持onsubmit="return false;"所以不會重新加載該瀏覽器窗口）：

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

這樣做是：

商店jQuery的包裹表單元素轉換爲$form
使用表格的action屬性值作爲請求目標地址
Se rializes並傳輸所有表單元素的值
執行回調函數，該函數接收返回的HTML代碼並用此HTML替換<div id='signUp'>...</div>的內容。

注：確保在形式action腳本只返回HTML的註冊框（即沒有0，<body>等 - 只應在框中什麼之後）的內容

編輯/修訂

這是我剛剛發現的MooTools Docs page for Ajax/Request：

我的jQuery片段的MooTools的等效是

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;

在查看更長的代碼後，我意識到，這並不完全是你想要的（因爲我看到你不希望用感謝信息替換表單 - 你希望它顯示在模態）。因此，對於你的情況下，更新的解決方案：

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的傢伙 - 只是想幫助這裏）

來源

2011-06-01 07:11:29 mkilmanas

我寧願不使用2個JavaScript庫，你會知道如何用mootools做到這一點？ – jwmann 2011-06-01 17:54:40

或者我會如何將其融入我已有的？我添加了你所說的（包括jQuery），它只是打破了模式（它沒有抓住myModal.html文件） – jwmann 2011-06-01 18:22:22

我同意你的看法，混合不同的框架不是一個好主意（雖然可能採取預防措施，像'jQuery.noConflict（）'）。請在MooTools代碼中找到添加的解決方案 – mkilmanas 2011-06-01 18:57:13

有表單提交給頁面上的隱藏iframe。給iframe一個名稱值，然後在表單上設置一個目標文件。您可以在iframe 1x1像素，並設置visibility到hidden

詳見這個問題（如果您通過display: none隱藏它可能無法在所有的瀏覽器。）： How do you post to an iframe?

來源

2011-06-01 19:05:26

爲什麼在有解決方案時使用黑客？ – mkilmanas 2011-06-01 19:07:00

這更短，並具有跨域工作的額外好處。這是大多數跨域解決方案在內部執行的。 – 2011-06-02 05:41:49

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

回答

相關問題