archytect archytect - 1 year ago 65
jQuery Question

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?

Answer Source

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