24

毎分トークンで更新する必要があるフォームのアクションリンクがあります。ユーザーが送信ボタンをクリックすると、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();

問題は、送信時にjs / jQueryを使用すると、ブラウザの一般的なメニューやボタンがなくても新しいウィンドウで開き、ポップアップウィンドウのサイズになることです。

jQueryがなくても、ボタンをクリックしただけで新しいタブが開きます。

jQueryでこれを達成するにはどうすればよいですか？

4

8 に答える 8

21

イベントをキャッチする代わりに、フォーム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"});ください。これがお役に立てば幸いです:)
更新：
タブを非同期で開きたい場合は、苦労するでしょう。これは、タブが取得できる最も近いものです。
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!
            }
        }
    });
 });
 });
于 2013-01-25T17:53:24.797 に答える
16

私はこれと同じ問題を抱えていました、これが私がそれを解決した方法です：

<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）に送信されます。

于 2013-04-25T20:34:50.517 に答える
8 
jQuery("#availability_players_form").attr("target","_blank");

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

どこ#availability_players_form = form id

于 2013-06-19T05:00:16.133 に答える
2

すでにターゲットを定義している"_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/

于 2013-01-25T18:21:06.577 に答える
1

あなたが使用することができますtarget="_newtab"

<a href="some url" target="_newtab">content of the anchor</a>
于 2013-01-25T17:51:51.743 に答える
1

デフォルトでは、フォームがモーダル/モードレスウィンドウダイアログ内にない限り、フォームは同じウィンドウに送信されます。フォームが実際にモーダル/モードレスダイアログ内にある場合は、フォームターゲットが何であれウィンドウ名を設定する必要があります。

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

フォームターゲットをに変更します

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

それが役立つかどうかを確認してください:)

于 2013-01-25T17:57:43.500 に答える
0

これがあなたのために働くのと同じくらい単純な何か、ジェイク・ウィアリーの必要はありません-ただバニラJavaScript：

<a href="javascript:document.forms['order_filter'].target='_blank';document.forms['order_filter'].submit();">Print</a>
于 2013-11-12T10:09:49.797 に答える
-1

これは私には問題なく機能します。私はこれを試しました。それはあなたを助けるかもしれません。要件に応じていくつかの変更を加えると、機能します。

<form action="..." method="GET" target="_blank">
   <input type="submit" id-"btn-form-submit"/>
</form>
<script>
   $('#btn-submit').click( function(){ $('#btn-form-submit').click(); } );
</script>
于 2013-06-19T05:08:58.293 に答える