点击提交后的模态框确认页面

时间:2013-07-17 22:47:27

标签: jquery modal-dialog simplemodal

我正在尝试设置一个表单,我们的客户可以在他们点击提交确认页面后填写表单,或者感谢您页面将在模态页面上而不是新页面。

我希望你能提供帮助。非常感谢你。

这是我的表单代码:

<form action="http://app.bronto.com/public/webform/process/" method="post"><input type="hidden"   name="fid" value="526jqvda4qbad5qgzy1xhz203whh0" /> <input type="hidden" name="sid" value="52c351afd4045042772a1f46b5faa787" /> <input type="hidden" name="delid" value="" /> <input type="hidden" name="subid" value="" />
<script type="text/javascript">// <![CDATA[
var fieldMaps = {};
// ]]></script>
<div id="row_113480" class="section">
<div id="column_136646" class="container" style="text-align: left;"><strong>Sign up for our newsletter</strong> </div>
<div style="clear: both;">&nbsp;</div>
</div>
<div id="row_113481" class="section">
<div id="column_136647" class="container" style="text-align: left;">
<div class="email field_block">
<div class="field"><span> <input class="text field fb-email" type="text" name="199075" value="" size="25" /> </span>
<div class="caption">Be the first to know about exclusive promotions, new products and more.</div>
<div class="field_error">&nbsp;</div>
</div>
</div>
</div>
<div id="column_136648" class="container" style="text-align: left;"><input type="hidden" name="199078[450111]" value="true" /></div>
<div style="clear: both;">&nbsp;</div>
</div>
<div id="row_113482" class="section">
<div id="column_136649" class="container" style="text-align: left;">
<div class="field_block">
<div class="field"><span> <input type="submit" value="Subscribe" /> </span></div>
</div>
</div>

</div>

1 个答案:

答案 0 :(得分:0)

您需要使用ajax向您的脚本发布form数据,而不是success功能,您可以打开dialog并在那里显示成功消息

$.ajax({
            type: "POST",
            url: "yourscripturl",
            data: 'var='+var,
            success: function(html){
                 $( "#dialog" ).dialog({
                            resizable: false,
                            height:350,
                            width:500,
                            modal: true,
                            buttons: {
                                CANCEL: function() {
                                    $("#dialog").dialog( "close" );
                                }
                            }
                        });
            }
       });

如果您不想使用ajax而不是http://app.bronto.com/public/webform/process/页面,则可以像这样打开对话框

$(document).ready(function(){
    $( "#dialog" ).dialog({
               resizable: false,
               height:350,
               width:500,
               modal: true,
               buttons: {
                           CANCEL: function() {
                              $("#dialog").dialog( "close" );
                           }
                         }
               });
});