confirmation page on modal box after hitting submit

Question

I'm trying to set up a form where our customer could fill out the form once they click submit the confirmation page or thank you page will be on modal page instead of new page.

I hope you can help. Thank you very much.

Here's my form code:

<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>

Answer 1

You need to use ajax to post form data to your script than in the success function you can open a dialog and show the success message there

$.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" );
                                }
                            }
                        });
            }
       });

And if you dont want to use ajax than on your http://app.bronto.com/public/webform/process/ page you can just open the dialog like this

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