通过模态框提交表单而不离开页面/模态

Question

I am using the project 'ModalBox' from http://okonet.ru/projects/modalbox/index.html in order to generate my modal.我正在使用http://okonet.ru/projects/modalbox/index.html的项目“ModalBox”来生成我的模态。

I am also using this overall script that persists e-mails submitted via form into a basic text file as a simple/quick solution.我还使用这个整体脚本，将通过表单提交的电子邮件保存到基本文本文件中，作为一种简单/快速的解决方案。 http://www.knowledgesutra.com/forums/topic/25586-php-simple-newsletter-script/ http://www.knowledgesutra.com/forums/topic/25586-php-simple-newsletter-script/

I have a dilemma though.我有一个两难的选择。 In order to keep the modal and display my 'mailing_thankyou.php' my form has to have 'onsubmit="return false"' but in order for my php script to work, I have to remove that return false, but then it changes to a new page in order to persist that information.为了保持模式并显示我的'mailing_thankyou.php'，我的表单必须有'onsubmit="return false"'，但是为了让我的php脚本工作，我必须删除那个return false，但随后它变为一个新页面以保留该信息。

Does anyone have any ideas?有没有人有任何想法？

This is the main part in question:这是有问题的主要部分：

myModal.html 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>

You may pull my files from my git repo: https://github.com/jwmann/Modal-Sign-up您可以从我的 git 存储库中提取我的文件： https://github.com/jwmann/Modal-Sign-up

Answer 1

I'm not good at Mootools, so I will give you an example in jQuery - if you get the idea, I'm pretty sure you will find the right syntax for Mootools too.我不擅长 Mootools，所以我会在 jQuery 中给你一个例子——如果你明白了，我很确定你也会找到适合 Mootools 的语法。

The idea is to use AJAX call for form submission (and keep the onsubmit="return false;" so that browser window isn't reloaded):这个想法是使用 AJAX 调用表单提交（并保持onsubmit="return false;"以便浏览器 window 不会重新加载）：

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

What this does is:这是做什么的：

Stores jQuery wrapped form element into $form将 jQuery 包装的表单元素存储到$form
Uses form's action attribute value as a request target address使用表单的action属性值作为请求目标地址
Serializes and transfers all form elements' values序列化和传输所有表单元素的值
Executes callback function, which takes returned HTML code and replaces contents of <div id='signUp'>...</div> with this HTML.执行回调 function，它采用返回的 HTML 代码并用此 HTML 替换<div id='signUp'>...</div>的内容。

Note: make sure that the script at forms action only returns html for the contents of the sign up box (meaning no <head> , <body> , etc. - only what should be in the box afterwards)注意：确保 forms action中的脚本仅返回 html 用于注册框的内容（意味着没有<head> ， <body>等 - 只返回应该在框中的内容）

EDIT/AMENDMENT编辑/修正

This is what I've just found out on MooTools Docs page for Ajax/Request :这是我刚刚在Ajax/Request 的 MooTools 文档页面上发现的：

The equivalent of my jQuery snippet in MooTools would be相当于我在 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

This requires that the form's action returns the result to display (a thank you message).这要求表单的操作返回要显示的结果（感谢消息）。 One could achieve that by making redirect from the server-side after form data has been successfully processed, eg in PHP header('Location: mailer/mailing_thankyou.php'); exit;可以通过在成功处理表单数据后从服务器端进行重定向来实现这一点，例如在 PHP header('Location: mailer/mailing_thankyou.php'); exit; header('Location: mailer/mailing_thankyou.php'); exit;

After looking longer at your code I realized, that this is not entirely what you want (as I see you don't want the form replaced with the thank-you message - you want it to be shown in the modal).在查看了您的代码之后，我意识到这并不完全是您想要的（我看到您不希望将表单替换为感谢消息 - 您希望它显示在模式中）。 Hence the updated solution for your case:因此，您的案例的更新解决方案：

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

Pardon me if any of this doesn't work (as I said, I'm more of a jQuery guy - just trying to help here)如果其中任何一个不起作用，请原谅我（正如我所说，我更像是一个 jQuery 人 - 只是想在这里提供帮助）

Answer 2

Have the form submit to a hidden iframe on the page.让表单提交到页面上隐藏的 iframe。 Give the iframe a name value and then set a target propery on the form.为 iframe 指定名称值，然后在表单上设置目标属性。 You can make the iframe 1x1 pixel and set the visibility to hidden (if you hide via display: none it might not work in all browsers.)您可以将 iframe 设置为 1x1 像素并将visibility设置为hidden （如果您通过display: none隐藏它可能不适用于所有浏览器。）

See this question for details: How do you post to an iframe?有关详细信息，请参阅此问题：您如何发布到 iframe？

Answer 3

I removed the 'return false' from the input submit's 'onsubmit' (duhhh facepalm ) because it was trying to serialize it in the first palce with prototype.js我从输入提交的“onsubmit”（duhhh facepalm ）中删除了“return false”，因为它首先尝试使用prototype.js 对其进行序列化

Then I changed the php script so it would grab with $_GET instead of $_POST然后我更改了 php 脚本，所以它会使用 $_GET 而不是 $_POST

no added functionality or hacks needed.不需要额外的功能或黑客。 Thank you for all the help though.感谢您的所有帮助。

通过模态框提交表单而不离开页面/模态

问题描述

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