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脚本能够工作，我必须删除该返回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 repo中提取我的文件： https://github.com/jwmann/Modal-Sign-up

Answer 1

我不擅长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属性值作为请求目标地址
序列化并传输所有表单元素的值
执行回调函数，该函数接收返回的HTML代码并用此HTML替换<div id='signUp'>...</div>的内容。

注意：请确保表单action中的脚本仅返回注册框内容的html（表示没有<head>，<body>等等 - 只应该是什么在后面的方框中）

修改/修订

这是我刚刚在MooTools Docs page for Ajax/Request上发现的：

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;

在仔细查看你的代码后，我意识到，这并不完全是你想要的（因为我看到你不希望用感谢信息替换表单 - 你希望它在模态中显示）。因此，针对您案例的更新解决方案：

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隐藏，则可能无法在所有浏览器中使用。）

有关详细信息，请参阅此问题： How do you post to an iframe?

Answer 3

我从输入提交的'onsubmit'（duhhh facepalm ）中删除了'return false'，因为它试图在第一个目录中使用prototype.js序列化它

然后我更改了php脚本，因此它会使用$ _GET而不是$ _POST

来获取

不需要添加任何功能或黑客。谢谢你的帮助。

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

3 个答案: