如何模仿自定义模式窗体的提交按钮

时间:2011-08-07 02:46:17

标签: jquery jqgrid

我有一个表单来显示网格数据(index.php)和一个自定义模式表单(frmbts.php)来编辑网格中的数据。我不知道如何从模态表单提交/发布数据,然后在提交后关闭模式表单,如jqgrid的表单添加/编辑。如果我将提交按钮放在frmbts.php中,我可以提交数据。但这不是我想实现的(我提交后无法关闭模态表格)。

这是网格的代码(index.php)

   jQuery(document).ready(function(){ ...
      jQuery("#list").jqGrid('navGrid','#page',{edit:true,add:true,del:true,search:true,refresh:true,position:'right',
            editfunc: function(id){ 
                jQuery('#frmbts').load('frmbts.php?id='+id);
                jQuery('#frmbts').dialog({width:670,height:550,modal:true,title:'Edit Data',
                buttons: { "Cancel": function() {
                    jQuery(this).dialog("close"); 
                }, "Save": function() { <-- i want use this to submit data
                    //code to submit the form then close the form
                    jQuery(this).dialog("close"); 
                } },
                });
            }}, ...
    <div id="content">
        <form id="frm" method="post" action="csvExport.php">
            <div id="frmbts"></div>
            <table id="list"></table>
            <div id="page"></div>
            <input id="csvBuffer" name="csvBuffer" type="hidden" value="">
            <input id="typeinfo" name="typeinfo" type="hidden" value="">
        </form>
    </div>

模态表单代码(frmbts.php)

<?php

    $id = $_REQUEST['id'];

    if(isset($_POST['submit']))
    {
    //update data
    }
?>

<form name="frmsubmit" method="post" action="frmbts.php">
    <table>...</table>
    <input type="button" name="cancel" value="cancel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" name="save" id="save" value="Save"> <--- just test. not the way i want 
</form>

2 个答案:

答案 0 :(得分:1)

好的,所以你想提交表单但是保持在同一页面,没有页面重新加载,并关闭模式div。你需要使用ajax。

首先,在表单中将所有名称更改为id,然后更改普通按钮的提交按钮并使用:

$.post('frmbts.php', {
    cancel: $('#cancel').value(),
    save: $('#save').value()
}, function(response) {
    // close your modal div here.
});

我不明白你是如何展示你的表格因为我看到它是在frmbts.php中定义的,所以这样做有点奇怪。考虑使用新的PHP来处理POST数据并了解JSONAJAX的含义,jQuery有很多功能,它非常简单和强大。

因此,正确的实现是将您的POST处理代码放入一个新的PHP并使该PHP响应一些JSON响应,因此您的$ .post调用可以接收一个JSON响应,其中包含有关该过程是否成功的数据或者您希望获得的任何其他数据以回复您的帖子。另请查看MVC是什么。

答案 1 :(得分:0)

是的,所以你从frmbts.php加载到模态弹出窗口?我会在jQuery中给提交输入一些内容来检查它是否被点击,而是调用类似下面的内容。注意我给你的新表格ID值“frmbtsform”,改变这一点并确保测试!

jQuery("#save").click(function(ev){
    ev.preventDefault();
    jQuery("#frmbtsform").submit();
});