Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery to submit form to new tab?

Tags:

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?

like image 452
archytect Avatar asked Jan 25 '13 17:01

archytect


People also ask

How do you open a new window on Form submit in JavaScript?

open() Features. To submit form to new window, we set the target attrubutes to '_blank'.

Which attribute is used for the submitted form will open in a new tab or same window?

The <form> target Attribute in HTML is used to specify whether the submitted result will open in the current window, a new tab, or on a new frame ie., this attribute specifies a name or a keyword that shows where to display the reply, once the form is submitted.

How do you submit in JavaScript?

In the body tag, created an HTML form and specify the id, method, and action of the form. In the form, specify an anchor tag with an event onclick. Create a function for JavaScript that will get executed when the link is clicked.


2 Answers

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!             }         }     });  });  }); 
like image 164
ppsreejith Avatar answered Sep 28 '22 09:09

ppsreejith


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.

like image 20
Bradley Avatar answered Sep 28 '22 08:09

Bradley