[英]Submitting form without opening new window or tab
So I'm trying to submit a form using Ajax in order to prevent it from opening a new tab upon submition (Which gets very annoying when creating several images, since a new tab would be generated with every image) 因此,我尝试使用Ajax提交表单,以防止提交时打开新标签页(创建多个图像时会很烦人,因为每张图像都会生成一个新标签页)
This will submit the form, and function properly, however it will open a new tab. 这将提交表单并正常运行,但是会打开一个新选项卡。
// Submits form
$("#image-base-edit").submit();
However I tried @abc123 suggestion on this post and I modified his code to look like the snippet below, however by submitting it this way, the image isn't actaully created. 但是,我在这篇文章上尝试了@ abc123建议,并修改了他的代码,使其看起来像下面的代码段,但是通过这种方式提交,图像并不是实际创建的。
/* attach a submit handler to the form */
$("#image-base-edit").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $(this),
term1 = $form.find('input[name="id"]').val(),
term2 = $form.find('input[name="title"]').val(),
term3 = $form.find('input[name="image_file"]').val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post(url, {
name: term1,
title: term2,
image_file: term3
});
/* Prints Done */
posting.done(function(data) {
console.log("done");
});
});
// Submits form
$("#image-base-edit").submit();
Here is the HTML form: 这是HTML表单:
<!--Image Create FORM-->
<form name="edit_form" method="post" enctype="multipart/form-data" class="enableUnloadProtection enableAutoFocus enableFormTabbing enableUnlockProtection d-none" action="" id="image-base-edit" target="_blank">
<fieldset id="fieldset-default" class="formPanel" style="display: block;">
<legend id="fieldsetlegend-default" style="visibility: hidden; font-size: 0px; padding: 0px; height: 0px; width: 0px; line-height: 0;">Default</legend>
<input name="id" value="image.2018-05-10.9629264509" originalvalue="image.2018-05-10.9629264509" type="hidden">
<div class="field ArchetypesStringWidget kssattr-atfieldname-title" data-fieldname="title" data-uid="0fd3d162687e4bd8917bc9830d616043" id="archetypes-fieldname-title">
<input name="title" class="blurrable firstToFocus" id="title" value="" size="30" maxlength="255" placeholder="" type="text">
</div>
<div class="field ArchetypesImageWidget kssattr-atfieldname-image" data-fieldname="image" data-uid="0fd3d162687e4bd8917bc9830d616043" id="archetypes-fieldname-image">
<div id="appendInputhere">
</div>
</div>
</fieldset>
<div class="formControls">
<input name="form.submitted" value="1" originalvalue="1" type="hidden">
<input class="context" name="form.button.save" value="Save" type="submit">
</div>
</form>
And the content that gets appened into the "appendInputhere" looks like this. 并且添加到“ appendInputhere”中的内容看起来像这样。
<input size="30" name="image_file" id="image_file" type="file">
If there is an easier way to do this, that I may be overlooking please let me know. 如果有更简单的方法可以避免,请告诉我。 Basically I want the form to function the exact same way it currently does, other than opening a new tab, or loading a new page in the users window, I want the user to not have to see a change.
基本上,除了要打开新标签页或在用户窗口中加载新页面外,我希望表单功能与当前的功能完全相同,我希望用户不必看到更改。
So while reading around more, and trying to find a way to do the original method I wrote about above, I learned that it is possible to set the target of a form to an iframe. 因此,在阅读更多内容并尝试找到一种方法来实现我上面写过的原始方法的同时,我了解到可以将表单的目标设置为iframe。 So to solve my issue above, created this iframe...
因此,要解决上述问题,请创建此iframe ...
<iframe name="formSubmitFrame" name="formSubmitFrame" tile="Holds Submitted form data" rel="nofollow" class="d-none"></iframe>
and had it set to not display anywhere. 并设置为不显示在任何地方。 Then, I set the target of my iframe to "formSubmitFrame".
然后,将iframe的目标设置为“ formSubmitFrame”。
This ultimately achieved my goal of submitting a form without the user seeing any window or tab changes. 最终达到了我提交表单的目标,而用户没有看到任何窗口或选项卡的更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.