提交表單並使用href標記在彈出窗口中打開

Question

我想使用href標記提交表單並在彈出窗口中加載提交表單。

<form method='post' action='" . $paymentURL . "' id='frmPaymentDtl' onsubmit='target_popup(this)'> 
    <a id=\"submit_full_payment\" onclick=\"target_popup(get_form(this).submit())\">Make Full Payment</a> 
    <input type='hidden' name='customer_id' value='" . $customer_id . "'/> 
    <input type='hidden' name='account_id' value='" . $account_id . "'/> 
    <input type='hidden' name='invoice_number' value='" . $invoice_model[0]->number . "'/> 
    <input type='hidden' name='detail_id' value='" . $bean->id . "'/> 
    <input type='hidden' name='header_id' value='" . $_GET['record'] . "'/> 
    <input type='hidden' name='detail_number' value='" . $bean->detail_id . "'/> 
    <input type='hidden' name='amount' value='" . number_format($bean->amount,2) . "'/> 
    <input type='hidden' name='description' value='" . $paymentSchedule->description . "'/> 
    <input type='hidden' name='invoice_id' value='" . $invoice_model[0]->id . "'/> 
    <input type='submit' name='submit_btn' class=\"listViewTdToolsS1\" value='Submit Bank/Credit Payment'/> 
</form> 
<script type='text/javascript'> 
    function get_form(element) 
    { 
    while(element) 
    { 
     element = element.parentNode 
     if(element.tagName.toLowerCase() == \"form\") 
     { 
     //alert(element) //debug/test 
     return element 
     } 
    } 
    return 0; //error: no form found in ancestors 
    } 

    function target_popup(form) { 
    window.open('', 'formpopup', 'width=800,height=600,resizeable,scrollbars'); 
    form.target = 'formpopup'; 
    } 
</script> 

這裏發生的是彈出窗口被顯示，但是當主窗口被加載到彈出頁面時，窗體被加載到主頁面上。另外，由於不允許提交按鈕，因此我只能使用鏈接訪問表單。

Answer 1

您正在提交表格和，然後將呼叫submit()的返回值傳遞給target_popup()。

您需要第一呼叫target_popup()，並通過它形式，然後你需要提交表單。

onclick="var frm = get_form(this); target_popup(frm); frm.submit()"> 

---

這就是說，你會過得更好使用普通的提交按鈕，應用CSS使它看起來你想要的方式。

Answer 2

您需要使用Ajax。這裏是清單你需要做什麼：

1. 停止表單提交事件（你可以用e.preventDefault();）
2. 發送數據與阿賈克斯，然後

你要什麼都阿賈克斯的成功或錯誤回調..

請讓我知道如果您需要任何進一步的幫助:)

這是我以前的答案，我也得到一個礦該如此樂我解釋一下..

1-）你不需要使用window.open()作爲彈出頁面。你可以簡單地創建一個模態（這是一個引導元素：http://getbootstrap.com/javascript/#modals）並顯示你想要的模態。在你的情況下，如果我正確理解你的問題，它將再次成爲你的表單元素。

$('#frmPaymentDtl').submit(function(e) 
    { 
     e.preventDefault(); 
     //Take form's all data with this 
     var data = $('#frmPaymentDtl').serialize(); 
     //Or you can assign all id's to a new variable if you'd like that way. 
     //After this open your modal which you have a form inside that. 
     //then write all data into input's from "data" variable. 
    }); 

我知道這個人是有點不同，但我知道這會爲你工作，以及：如果你想停止頁面的重裝上提交使用這種

2-）。

還有一件事。如果你想發送這個「數據」變量到另一個頁面，你需要使用Ajax。

如果你不知道如何檢查：jQuery AJAX submit form

OWW順便說一下，如果你會嘗試用我的方式，請刪除您的窗體的onclick事件。 :)

Answer 3

Ajax代碼提交的細節並得到結果：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
$('#submit_full_payment').click(function() { 
    var url = 'YOUR_URL'; 
    $.ajax({ 
     type: 'POST', 
     url: url,//url to post data 
     data: "customer_id=" + $('name=customer_id').val() + "&account_id=" + $('name=account_id').val(),//add other form fields here 
     success: function (data) {//process data here 
      alert(data); 
     }, 
     error: function (data) { 
     alert(data); 
     } 
    }); 
}); 

第二步：使用對話框顯示形式和紐帶。請參考link這將隱藏主頁上的表單並使用上面給出的ajax來處理表單並僅保留在彈出窗口中。如果你不想保持在彈出的上面，可以忽略。