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

标签 javascript jquery html forms 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?

最佳答案

您可以通过使用常规 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 Form Plugin”,该插件允许您轻松且不显眼地升级 HTML 表单以使用 AJAX。主要方法 ajaxForm 和 ajaxSubmit 从表单元素收集信息以确定如何管理提交过程。这两种方法都支持多种选项,使您可以完全控制数据的提交方式。使用 AJAX 提交表单没有比这更容易的了!

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

引用文献:

关于javascript - 将表单多次发布到隐藏的 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39522893/

相关文章:

javascript - js中如何去掉两个特殊字符之间的内容

javascript - 宽恕是真也是假

javascript - JQuery GET 请求不会从 php echo 获取正确的数据

javascript - 多个 ajax 调用的延迟调用

html - Firefox::-moz-selection 选择器错误(?)有解决方法吗?

javascript - 扩展 Material UI ListItem 的正确方法是什么?

javascript - 如何使用 "Enter" key 提交 SAPUI5 SimpleForm?

javascript - 从ajax获取元素失败

html - CSS: "text-transform: capitalize"和意大利语、西类牙语、葡萄牙语、法语等

javascript - 将单选按钮链接到下拉菜单