在Bootstrap模式中显示表单结果

Question

I have included a simple form on the home page of our website that posts its results to a page named Results.aspx.

Instead of the form's results returning on the same page, I'd like it if the results opened in a new modal.

How is this accomplished? To recap, the form is on the home page, and on submit, the results should be shown in a new modal window.

<form action="Results.aspx" method="post" name="myForm" onsubmit="return validateForm()">
<div id="blank-box-form">
<h2>Looking For Medicare Advantage Plans?</h2>
<label for="zipcode1"> Please enter your zip code</label>
<input id="zipcode1" class="wpcf7" name="zipcode1" type="text" />


<input type="submit" />

</div>

Answer 1

I would suggest that you post the form using ajax. When the ajax-call is complete you populate the body of the modal with the response-data and open it up :)

Answer 2

Try

<form action="Results.aspx" target="_blank" method="post" name="myForm" onsubmit="return validateForm()">

But ass @digi recommend, you should use ajax to get the results and then insert them in a modal.

This could guide you:

<script>
    $("form").submit(function(event){
        event.preventDefault();//to stop the submit
        $.get("url","data",function(results){
            $("#someModalStyledDiv").html(results).show();
        });
    });
</script>

http://api.jquery.com/jquery.get/