将表单多次发布到隐藏的 iframe答案

【问题标题】：Posting a form multiple time to a hidden iframe将表单多次发布到隐藏的 iframe
【发布时间】：2017-01-24 04:12:42
【问题描述】：

这是我的表格：

<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？

【问题讨论】：

标签： javascript jquery html forms iframe

【解决方案1】：

您可以通过使用常规表单元素、使用 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/

参考：

【讨论】：

第一个代码段不起作用，但第二个代码段完美。谢谢！