jquery - jQuery将表单提交到新标签？

Question

我有一个表单中的操作链接，需要每分钟更新一个令牌。当用户单击提交按钮时，我从 api 调用中获取新的 url/token。我正在使用这样的东西

 <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 做到这一点？

score 21 · Accepted Answer

不要捕获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>

这样做是，如果您输入“便便”，它不会提交表单，对于其他任何事情，它都会将表单提交到新选项卡。希望这会有所帮助:)
更新：
关于您的评论，如果出现错误，您想打开其他选项卡，然后替换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 部分

$(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!
            }
        }
    });
 });
 });

score 16 · Accepted Answer

我遇到了同样的问题，这是我解决它的方法：

<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) 中，而无需使用本机提交按钮。

score 8 · Accepted Answer

jQuery("#availability_players_form").attr("target","_blank");

jQuery("#availability_players_form").submit();

在哪里#availability_players_form = form id

score 2 · Accepted Answer

您已经定义了目标，"_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/

score 1 · Accepted Answer

1

您可以使用target="_newtab"

<a href="some url" target="_newtab">content of the anchor</a>

于 2013-01-25T17:51:51.743 回答

score 1 · Accepted Answer

默认情况下，除非表单位于模态/非模态窗口对话框中，否则表单会提交到同一个窗口。如果您的表单确实位于模态/非模态对话框中，则需要使用表单目标设置窗口名称。

<head>
<script type="text/javascript">
window.name = "posthereonly";
</script>
</head>

并将表单目标更改为

  <form id="somelink" action="http://some.external.url/" target="posthereonly" />

看看它是否有帮助:)

score 0 · Accepted Answer

像这样简单的东西对你有用，不需要 Jake Weary - 只是香草 JavaScript：

<a href="javascript:document.forms['order_filter'].target='_blank';document.forms['order_filter'].submit();">Print</a>

score -1 · Accepted Answer

这对我来说很好。我试过这个。它可能会帮助你。根据您的要求进行一些更改，它将起作用。

<form action="..." method="GET" target="_blank">
   <input type="submit" id-"btn-form-submit"/>
</form>
<script>
   $('#btn-submit').click( function(){ $('#btn-form-submit').click(); } );
</script>

jquery - jQuery将表单提交到新标签？

8 回答 8

Related

Reference