在“模态”对话框中提交表单

时间:2014-11-10 14:17:53

标签: javascript php jquery

我想在模态对话框中打开我的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>

1 个答案:

答案 0 :(得分:0)

您需要使用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

  });
});