jQuery 将表单提交到新选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14527436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery to submit form to new tab?
提问by archytect
I have an action link in a form that needs to be updated with a token every minute. I get the new url/token from an api call when the user clicks on the submit button. I'm using something like this
我有一个表单中的操作链接，需要每分钟更新一个令牌。当用户单击提交按钮时，我从 api 调用中获取新的 url/令牌。我正在使用这样的东西
<form id="somelink" action="http://some.external.url/" target="_blank" />
$('#somebutton').click(function(e) {
e.preventDefault();
var url = '/apicall?id=' + $('#someid').val();
$.post(url, function(data) {
$('#somelink').attr('action', data);
$('#somelink').submit();
problem is, using js/jQuery when it submits it opens in a new window without the typical menu and buttons in the browser and it's the size of a popup window.
问题是，在提交时使用 js/jQuery 会在一个新窗口中打开，浏览器中没有典型的菜单和按钮，并且它是一个弹出窗口的大小。
Without the jQuery if I just clicked on the button it'll open in a new tab.
没有 jQuery，如果我只是单击按钮，它将在新选项卡中打开。
How can I accomplish this with jQuery?
我怎样才能用 jQuery 做到这一点？
采纳答案by ppsreejith
Instead of catching the clickevent, try catching the submitevent of the form and in case you find any error you can use event.preventDefault();
UpdateHere i tested with this code and it's working fine,
不要捕获click事件，而是尝试捕获submit表单的事件，如果发现任何错误，可以使用 event.preventDefault();
更新这里我用这段代码测试过，它工作正常，
<!doctype html />
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"/></script>
</head>
<body>
<form action='http://someSite.com' id='somelink' target='_blank'>
<input type='text' name='lol' id='lol'/>
<input type='submit'/>
</form>
<script type="text/javascript"/>
$('#somelink').on('submit',function(e) {
if($('#lol').val() == "poop"){ //Sample error check
e.preventDefault();
alert($('#lol').val());
}
});
</script>
</body>
</html>
What this does is, if you enter "poop" it does not submit the form, for anything else it submits the form to new tab. Hope this helps :)
Update:
Regarding your comment, if in case of error you want to open some other tab, then replace e.preventDefault()with $(this).attr({"action":"http://www.someothersite.com"});. Hope this helps :)
Update:
If you want to open a tab asynchronously, then you would have a hard time, this is the closest it can get.
HTML Part
这样做的作用是，如果您输入“poop”，它不会提交表单，对于其他任何内容，它都会将表单提交到新选项卡。希望这会
有所帮助 :)
更新：
关于您的评论，如果您想打开其他选项卡出现错误，请替换e.preventDefault()为$(this).attr({"action":"http://www.someothersite.com"});. 希望这
会有所帮助:)
更新：
如果您想异步打开一个选项卡，那么您将很难，这是最接近的。
HTML 部分
<form id="someForm" action="about:blank" target="newStuff" />
<input type="submit" value="12345" id="someid" />
Javascript Part
Javascript 部分
$(document).ready(function() {
$('#someForm').submit(function(e) {
$.ajax({
url: 'http://search.twitter.com/search.json?',
dataType: 'jsonp',
success: function(data) {
if (data != "") {
var link = "http://www.google.com/";
window.open(link,'newStuff'); //open's link in newly opened tab!
}
}
});
});
});
回答by Bradley
I had this same issue, here's how I solved it:
我遇到了同样的问题，这是我解决的方法：
<form action="..." method="POST" target="_blank">
<input type="submit" id="btn-form-submit"/>
</form>
<script>
$('#btn-submit').click( function(){ $('#btn-form-submit').click(); } );
</script>
This submits the form into a new tab (_blank) without using the native submit button.
这会将表单提交到新选项卡 (_blank) 中，而无需使用本机提交按钮。
回答by velaiah
jQuery("#availability_players_form").attr("target","_blank");
jQuery("#availability_players_form").submit();
Where #availability_players_form = form id
在哪里 #availability_players_form = form id
回答by Berker Yüceer
You already defined the target as "_blank"so try the code below and see the example link than you will see how it works.. and try $.postwithout submitting or you can use ajaxto keep data somewhere in the background and send it to the new tab..
您已经定义了目标，"_blank"因此请尝试下面的代码并查看示例链接，而不是您将看到它是如何工作的……并尝试$.post不提交，或者您可以使用ajax将数据保留在后台某处并将其发送到新选项卡。
$(document).ready(function() {
$('#YourForm').submit(function() { // <---- Your form submit event
$(this).target = "_blank"; // <---- to new tab
$.post(url, function(data) {
// whatever you wanna post do it here
});
window.open($(this).prop('action')); // <---- form action attribute = url
return false; // <---- prevents submit
});
});?
or using ajax
或使用 ajax
$(document).ready(function() {
$('#YourForm').submit(function() { // <---- Your form submit event
$(this).target = "_blank"; // <---- to new tab
var json = $.toJSON({ yourjsondata1: data1, yourjsondata2: data2 });
$.ajax({
url: "/some/url",
type: "POST",
dataType: "json",
data: json,
contentType: "application/json; charset=utf-8",
success: function (data) {
window.open($(this).prop('action')); // <---- form action attribute = url
}
});
return false; // <---- prevents submit
});
});?
See this example :
请参阅此示例：
http://jquerybyexample.blogspot.com/2012/05/open-link-in-new-tab-or-new-popup.html
http://jquerybyexample.blogspot.com/2012/05/open-link-in-new-tab-or-new-popup.html
Edit:
编辑：
$(document).ready(function() {
$('#someid').click(function() {
// lets say you got ur data from your post method
var url = '/api?id=' + $('#someid').val();
$.post(url, function(data) {
if (data != '') {
// update your link
$('#somelink').attr('action', data);
// update target to new tab
$("#somelink").target = '_blank';
// than go
window.open($("#somelink").attr('action'));
return false;
} else {
}
});
});
});
回答by Dinkar Thakur
By default, form submits to the same window unless the form is inside a modal/modeless window dialog .If your form is indeed inside modal/modeless dialog, you need to set the window name with whatever the form target is.
默认情况下，表单提交到同一个窗口，除非表单在模态/无模式窗口对话框内。如果您的表单确实在模态/无模式对话框内，则需要使用表单目标设置窗口名称。
<head>
<script type="text/javascript">
window.name = "posthereonly";
</script>
</head>
and change the form target to
并将表单目标更改为
<form id="somelink" action="http://some.external.url/" target="posthereonly" />
see if it helps :)
看看它是否有帮助:)
回答by sdespont
you can use target="_newtab"
您可以使用 target="_newtab"
<a href="some url" target="_newtab">content of the anchor</a>
回答by crmpicco
Something as simple as this would work for you, no need for Jake Weary - just vanilla JavaScript:
像这样简单的东西对你有用，不需要 Jake Weary - 只是普通的 JavaScript：
<a href="javascript:document.forms['order_filter'].target='_blank';document.forms['order_filter'].submit();">Print</a>
回答by Php developer
This works fine with me. I have tried this. It may help you. Make some changes as per your requirement and it will work.
这对我来说很好用。我试过这个。它可能会帮助你。根据您的要求进行一些更改，它将起作用。
<form action="..." method="GET" target="_blank">
<input type="submit" id-"btn-form-submit"/>
</form>
<script>
$('#btn-submit').click( function(){ $('#btn-form-submit').click(); } );
</script>
