Submit form in Modal dialog box

Question

I want to Open my php Submit page in a Modal dialog box. I know it can be accomplished with jquery but I am still learning jquery I will like to use the function myModalFunction() to open customp1.php after visitor clicked on submit button. I need help to write the jquery that will do the think. Thank you in advance.

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./action/scripts/global.js" type="text/javascript"></script>
<form action="../action/subs/customp1.php/" method="post" id="ccomputer" onsubmit="myModalFunction()" >



<form action="../action/subs/submit1.php/" method="post" id="ccomputer">


    <div id="orderwrap">

         <input id="article" name="article" type="text" /> 
         <input id="quantity" name="quantity" type="text" />

    </div>

    <input id="submit" type="submit" value="Submit Order" name="submission"/>

</form>

What is use of first form? i.e. <form action="../action/subs/customp1.php/" method="post" id="ccomputer" onsubmit="myModalFunction()" > — Apul Gupta
The form above shows in a normal window. The one I want to show as modal is customp1.php that is the page that save the input and shows confirmation of input — James Mirel
I have tried your solution but nothing happen when I click on submit. — James Mirel

Apul Gupta Apul Gupta · Accepted Answer · 2014-11-10T15:37:46

You need to submit your form using ajax. Your code should be like this:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
 $('form#ccomputer').submit(function (e) {
    e.preventDefault(); // To prevent form submit
    $(this).find('input:submit').attr('disabled', true); // To prevent re-submission

    var formData = $(this).serializeArray(); // data 
    var action   = $(this).attr('action');   // action

    // using POST method to send data & get response
    $.post(action, {data: formData}, function (response) {
        // show dialog
        $('<div></div>').html(response).dialog({
            title: 'Dialog title',
            modal: true,
            close: function () {
                $(this).dialog("destroy").remove();
            }
        });
    });

    $(this).find('input:submit').removeAttr('disabled');     // re-enabling submit button

  });
});

Submit form in Modal dialog box

1 Answers