Javascript Form Open URL in new tab

Question

I have a piece of code that I have been getting help on and I have come across something that I find inconvenient. When I click the "Go" button it browses away from the current tab. I want to have the resulting URL from the form to open in a new tab. in addition I cannot hit the enter key because it will just load the whole form up in a new window. How do I correct the "enter" key usage problem and get my form to open the URL in a new tab. The forms function is to open a new URL that contains information I am searching for. Here is my code:

<script type="text/javascript">
function setSearchTermSN(n){
   var SN_VALUE = encodeURIComponent(document.getElementById("sn").value);
   location.href = "http://URL to site.com/perl/search?searchtype=sn&type=2&uid=" + SN_VALUE + "&visualtype=html%2Fen&tabset=person";
 }
</script>

<form target="_blank">
Last Name: <input id="sn" type="text" value="" />
<input type="button" value="Go" onclick="setSearchTermSN()" />
</form>

the idea is to enter a last name such as Jones into the input box. Click go and the form would substitute " + SN_VALUE + " with Jones and the load the URL like this:

http://URL to site.com/perl/search?searchtype=sn&type=2&uid=Jones&visualtype=html%2Fen&tabset=person

the form currently does the substitution but it browses away from the search box which defeats the purpose of having it. I have tried the <form target="_blank"> but it still opens the URL in the same page.

credit for the above code goes to https://stackoverflow.com/users/904428/david

The simple solution for the enter problem is to remove your input elements from inside a form, your not really doing anything with the form to have it wrapped around your elements, by having it when enter is pressed on your text box its submitting the form. Another option is on your form tag do <form onsubmit="return false;"> — Jeff Wilbert
– Jeff Wilbert, Commented Nov 29, 2011 at 14:27
Actually when I hit enter its not submitting the form. Its just loading the form all over in a new window. I want the functionality to be able to hit the enter key and have the form submit. — HarielA4
– HarielA4, Commented Nov 29, 2011 at 14:39

JaredMcAteer · Accepted Answer · 2011-11-29 14:21:41Z

1

window.location only deals with the current document. You need to use window.open

Missed the other part about the enter key. You need a onkeyup event listener and check the event keycode for the return key and then run the same function as the click.

answered Nov 29, 2011 at 14:21

JaredMcAteer

22.7k5 gold badges52 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bojan Bjelic · Accepted Answer · 2011-11-29 14:23:11Z

0

function setSearchTermSN(n){
   var SN_VALUE = encodeURIComponent(document.getElementById("sn").value);
  var newwindow = window.open("http://URL to site.com/perl/search?searchtype=sn&type=2&uid=" + SN_VALUE + "&visualtype=html%2Fen&tabset=person",'name');
   return false;
 }

answered Nov 29, 2011 at 14:23

Bojan Bjelic

3,5521 gold badge20 silver badges19 bronze badges

4 Comments

HarielA4 Over a year ago

tried this and it does not work when I click the button nothing happens now where as before the URL would load on the current page.

HarielA4 Over a year ago

well your example works beautifully but when I try to incorporate it into my page it just stops working. Im at a loss. I did find out something tho with your new code. While it does now submit on a press of the return key it still opens a brand new blank page with my search form.

HarielA4 Over a year ago

Here is my full page code. I have no idea what is wrong. jsbin.com/alagap/2/edit

HarielA4 Over a year ago

the only part left that I have not figured out is the reason that when I use the return key for data submission it opens both the target URL and another copy of the search tool.

Collectives™ on Stack Overflow

Javascript Form Open URL in new tab

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related