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

Posted

技术标签:

【中文标题】将表单多次发布到隐藏的 iframe【英文标题】：Posting a form multiple time to a hidden 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？

【问题讨论】：

【参考方案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/

参考：

https://api.jquery.com/jquery.post/ http://api.jquery.com/jquery.ajax/

【讨论】：

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

以上是关于将表单多次发布到隐藏的 iframe的主要内容，如果未能解决你的问题，请参考以下文章

如何将数据从一个表单发布到另一个 iFrame 表单

使用下一个 js 将表单发布到 iframe 而不渲染到正文

将表单发布到 iframe 并在父页面上回显结果文本

通过 iframe 上传 Amazon S3

动态 iframe 高度取决于隐藏/显示

键盘使用 iFrame/object 和 JQTouch 隐藏 PhoneGap Build 3.1 中的 iOS 输入字段