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

我使用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

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

回答

相关问题