Отправить форму в модальном диалоговом окне

Question

Я хочу открыть свою страницу отправки PHP в диалоговом окне «Модальное». Я знаю, что это может быть выполнено с помощью jquery, но я все еще участвую в jquery. Мне нравится использовать функцию myModalFunction(), чтобы открыть customp1.php после того, как посетитель нажал кнопку отправки. Мне нужна помощь, чтобы написать jquery, который будет думать. Спасибо заранее.

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

Answer 1

Вам необходимо отправить свою форму с помощью ajax. Ваш код должен быть таким:

<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 

    }); 
});