JQuery отправить форму на новую вкладку?
У меня есть ссылка на действие в форме, которую нужно обновлять с помощью токена каждую минуту. Я получаю новый url/токен из вызова api, когда пользователь нажимает кнопку отправки. Я использую что-то вроде этого
<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();
проблема заключается в использовании js/jQuery, когда он отправляет его, открывается в новом окне без типичного меню и кнопок в браузере и размер всплывающего окна.
Без jQuery, если я просто нажал на кнопку, он откроется на новой вкладке.
Как я могу выполнить это с помощью jQuery?
Ответы
Ответ 1
Вместо того, чтобы ловить событие 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>
Что это значит, если вы введете "poop", он не отправит форму, для чего-либо еще она отправит форму на новую вкладку. Надеюсь, это поможет:)
Обновление:
Что касается вашего комментария, если в случае ошибки вы хотите открыть другую вкладку, замените e.preventDefault()
на $(this).attr({"action":"http://www.someothersite.com"});
. Надеюсь, это поможет:)
Update:
Если вы хотите открыть вкладку асинхронно, вам будет трудно, это будет самое близкое к ней.
Часть HTML
<form id="someForm" action="about:blank" target="newStuff" />
<input type="submit" value="12345" id="someid" />
Часть 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 link in newly opened tab!
}
}
});
});
});
Ответ 2
У меня была эта же проблема, вот как я ее решил:
<form action="..." method="POST" target="_blank">
<input type="submit" id="btn-form-submit"/>
</form>
<script>
$('#btn-submit').click( function(){ $('#btn-form-submit').click(); } );
</script>
Это отправляет форму в новую вкладку (_blank) без использования собственной кнопки отправки.
Ответ 3
вы можете использовать target="_newtab"
<a href="some url" target="_newtab">content of the anchor</a>
Ответ 4
jQuery("#availability_players_form").attr("target","_blank");
jQuery("#availability_players_form").submit();
Где #availability_players_form = form id
Ответ 5
По умолчанию форма отправляется в одно и то же окно, если форма не находится внутри диалогового окна модального/модельного окна. Если ваша форма действительно находится в модальном/немодальном диалоге, вам нужно установить имя окна с любым типом формы.
<head>
<script type="text/javascript">
window.name = "posthereonly";
</script>
</head>
и измените цель формы на
<form id="somelink" action="http://some.external.url/" target="posthereonly" />
посмотреть, помогает ли это:)
Ответ 6
Вы уже определили цель как "_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
});
});
или используя 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
});
});
См. этот пример:
http://jquerybyexample.blogspot.com/2012/05/open-link-in-new-tab-or-new-popup.html
Изменить:
$(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 {
}
});
});
});
скрипт: http://jsfiddle.net/BerkerYuceer/nfTWL/
Ответ 7
Что-то простое, как это сработает для вас, не нужно Джейк Уайри - просто ванильный JavaScript:
<a href="javascript:document.forms['order_filter'].target='_blank';document.forms['order_filter'].submit();">Print</a>
Ответ 8
Это отлично работает со мной. Я пробовал это. Это может вам помочь. Внесите некоторые изменения в соответствии с вашим требованием, и оно будет работать.
<form action="..." method="GET" target="_blank">
<input type="submit" id-"btn-form-submit"/>
</form>
<script>
$('#btn-submit').click( function(){ $('#btn-form-submit').click(); } );
</script>