2016-09-16 47 views
0

這裏是我的形式:發佈形式多時間,一個隱藏的iframe

<FORM id="webgrants" NAME="webgrants" action="updateDashPermissions.do" method="post" target="hidden-form"> 
<input type="hidden" name="property(userId)" value=""> 
<input type="hidden" name="property(dashboardSettings)" id="dashboardSettings" value="1"> 
</FORM> 

在提交表格隱藏的iframe的閱讀後,我意識到我需要刪除,每次我需要時間重建的iframe發佈表單。這裏是JavaScript來做到這一點:

function deleteIframe() { 
    $("#hidden-form").remove(); 
} 

function sendSubmit() { /*Called when checkbox checked*/ 

    var my_iframe = $('<IFRAME style="display:none" name="hidden-form" id="hidden-form"></IFRAME>'); 
    $('body').append(my_iframe); 
    document.forms[0].submit(); 
    var t = setTimeout(deleteIframe, 2000); 
} 

然而,隱藏的iframe不被刪除,只有最近的表單提交正在處理中。有沒有辦法刪除iframe,以便表單將被處理?還是有更有效的方式多次發佈相同的表單到iframe?

回答

1

您可以簡單地使用常規的Form元素,通過使用JQuery來完成,而不需要iFrame。

<!doctype html> 
<html lang="en"> 
<head>  
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<form action="updateDashPermissions.do" method="post" id="searchForm"> 
    <input type="text" name="s" placeholder="Search..."> 
    <input type="submit" value="Search"> 
</form> 
<!-- the result of the search will be rendered inside this div --> 
<div id="result"></div> 

<script> 
// Attach a submit handler to the form 
$("#searchForm").submit(function(event) { 

    // Stop form from submitting normally 
    event.preventDefault(); 

    // Get some values from elements on the page: 
    var $form = $(this), 
    term = $form.find("input[name='s']").val(), 
    url = $form.attr("action"); 

    // Send the data using post 
    var posting = $.post(url, { s: term }); 

    // Put the results in a div 
    posting.done(function(data) { 
    var content = $(data).find("#content"); 
    $("#result").empty().append(content); 
    }); 
}); 
</script> 

</body> 
</html> 

甚至更​​簡單的方法是使用JQuery.POST任何數據發佈到你的服務器端的「updateDashPermissions.do」。

$.post("updateDashPermissions.do", { userID: "John", dashboardSettings: "2pm" }); 

或者你可以使用一個jQuery插件「的jQuery表單插件」,這個插件可以讓你輕鬆升級悄悄HTML表單中使用AJAX。主要方法ajaxForm和ajaxSubmit從表單元素收集信息以確定如何管理提交過程。這兩種方法都支持多種選項,使您可以完全控制數據的提交方式。用AJAX提交表單並不容易!

http://jquery.malsup.com/form/

引用:

+1

第一個代碼段沒有工作,但第二個完美。謝謝! – Turtle