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?
open() Features. To submit form to new window, we set the target attrubutes to '_blank'.
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.
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.
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! } } }); }); });
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With