如何模仿提交按鈕從自定義模式形式

我有一個窗體來顯示網格數據（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>

來源

2011-08-07 satria

好了，你想提交表單，但留在同一頁面，沒有頁面重新加載，並關閉模態分區。你需要爲此使用ajax。

首先，更改所有名的爲ID在你的表格，然後改變你對一個普通按鈕提交按鈕，使用此：

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

什麼，我不明白的是你如何顯示您的形式，因爲我發現它是在frmbts.php中定義的，所以這樣做有點奇怪。想想用一個新的PHP來處理POST數據，並學習一下JSON和AJAX的意思，jQuery有很多功能，它非常簡單和強大。

因此，正確的實現是將您的POST處理代碼放入一個新的PHP中，並使該PHP回顯一些JSON響應，因此您的$ .post調用可以接收JSON響應以及有關該過程是否爲成功的，或任何其他數據，你想獲得迴應你的帖子。也看看MVC是什麼。

來源

2011-08-07 02:51:48

嗨Sergi拉蒙，謝謝。這行得通。但在提交模態表單後不要關閉。即使頁面重定向到frmbts.php。提交後如何關閉模式表單而不重定向到frmbts？我已經把jQuery（this）.dialog（「close」），但它不工作。 – satria

這是一個完全不同的解決方案，你需要爲此使用ajax，我會改變答案。 –

對不起，我感到困惑。實際上我想說的是模式表單在提交後關閉，但index.php重定向到frmbts.php，我不想。 – satria

正確，你正在從frmbts.php加載到你的模態彈出窗口？我會在jQuery中給提交輸入一些東西，以檢查它是否被點擊，而不是像下面那樣調用類似的東西。注意我給你的新表單ID值「frmbtsform」，改變這一點，並確保測試！

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

來源

2011-08-07 03:11:51 Jake

嗨Jake Rocheleau，我想你的答案和SergiRamón的答案是一樣的。這行得通。但下一個問題是模式表單在提交後不關閉。即使它重定向到frmbts.php。 – satria

看來你可以通過jQuery對話框（）方法添加第二個按鈕.. [這篇文章很棒]（http://www.jensbits.com/2009/08/10/modal-confirmation-dialog-on-form -submit-javascript-jquery-ui-and-thickbox-varieties /）很好地概括了代碼。我會複製它在這裏，但有限的空間... 只是搜索「jQuery UI」部分，她的代碼是幾段落。你應該看看我在哪裏。除此之外，請嘗試移動。對話框（「關閉」）在操作的其他地方。 – Jake

對不起，我感到困惑。實際上我想說的是模式表單在提交後關閉，但index.php重定向到frmbts.php，我不想。 – satria

如何模仿提交按鈕從自定義模式形式

回答

相關問題