CODEWITHSUNDEEP
jquery
archytect
archytect

Reputation: 3715

jQuery to submit form to new tab?

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

 <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.

Without the jQuery if I just clicked on the button it'll open in a new tab.

How can I accomplish this with jQuery?

Upvotes: 25

Views: 108072

Answers (9)

evilReiko
evilReiko

Reputation: 20473

Add target="_blank" to your form.

Edit: To submit <form> to new tab/window, you don't even need JS/jQuery.

Upvotes: 0

velaiah
velaiah

Reputation: 101

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

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

Where #availability_players_form = form id

Upvotes: 10

Bradley
Bradley

Reputation: 2141

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.

Upvotes: 16

Php developer
Php developer

Reputation: 456

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>

Upvotes: -1

ppsreejith
ppsreejith

Reputation: 3438

Instead of catching the click event, try catching the submit event of the form and in case you find any error you can use event.preventDefault();
Update Here i tested with this code and it's working fine,

<!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

<form id="someForm" action="about:blank" target="newStuff" />
<input type="submit" value="12345" id="someid" />

Javascript Part

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

Upvotes: 21

crmpicco
crmpicco

Reputation: 17181

Something as simple as this would work for you, no need for Jake Weary - just vanilla JavaScript:

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

Upvotes: 0

Berker Y&#252;ceer
Berker Y&#252;ceer

Reputation: 7335

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 $.post without submitting or you can use ajax to keep data somewhere in the background and send it to the new tab..

$(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

$(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

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 {
             }
         });
     });
 });

fiddle: http://jsfiddle.net/BerkerYuceer/nfTWL/

Upvotes: 2

Dinkar Thakur
Dinkar Thakur

Reputation: 3103

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 :)

Upvotes: 1

sdespont
sdespont

Reputation: 14025

you can use target="_newtab"

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

Upvotes: 1

Related Questions