Open the page in a new tab using javascript window.open (elementName.elementValue) in the anchor tag

Question

I studied a lot of examples over the past couple of days, but still can not find the answer to my dilemma. So that I first explain my dilemma, I will show you an example of what I have and explain how I will work (but it seems that it cannot achieve).

It works:

<form> <select name="url"> <option selected="selected" value=""> Choose Donation Amount </option> <option value="http://www.url1.com">URL#1</option> <option value="http://www.url2.com">URL#2</option> <option value="http://www.url3.com">URL#3</option> <option value="http://www.url4.com">URL#4</option> <option value="http://www.url5.com">URL#5</option> <option value="http://www.url6.com">URL#6</option> </select> <input type="submit" value="Submit" onclick="if (url.value) window.open(url.value);" /> </form> 

But what I preferred to do was grab this option and open the URL using the anchor tag (instead of typing [type "submit"]), something like this (replace the input tag before the closing form tag):

 <a href="javascript:void(if (url.value) window.open(url.value));" target="_blank">Submit</a> 

The above line does not work, and I cannot figure out how to form it correctly. Help?

I know that this does not seem logical, especially since I already work with the submit button, but it is also not very convenient for me to explain why I do not want to use the input or the button type = "submit", or PHP. Please, it really should be inline javascript in the anchor tag. Thanks .s :-)

Answer 1

Add your name form as:

 <form name="form"> 

... and then try doing this:

 <a href="" onclick="window.open( form.url.value, 'windowName' ); return false" target="_blank">Submit</a> 

There is a working example .

Answer 2

It has worked so far, though for a long time

<a href="javascript:void((function(){ val=document.getElementsByName('url')[0].value; if(val) window.open(val)})())">click</a>

Answer 3

I don’t know why you use the form if you want to just open the URL when you select an option. Read the code below:

 <select name="url" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"> 

This works well in every browser, even on IE5.

Answer 4

You can forget about using JavaScript because the browser controls whether it opens in a new tab. The best thing to do is:

 <form action="http://www.yoursite.com/dosomething" method="get" target="_blank"> <input name="dynamicParam1" type="text"/> <input name="dynamicParam2" type="text" /> <input type="submit" value="submit" /> </form> 

This will always open in a new tab no matter which browser the client uses due to the target="_blank" attribute.

If you need to redirect without dynamic parameters, you can use the link with the target="_blank" attribute:

 <a href="http://www.youresite.com" target="_blank">redirect</a> 

Answer 5

We also had a similar requirement. We wanted to generate a server-side href url using an ajax call when the user clicks on it. after repeated searches, we found out that it is actually controlled by the browser. In chrome, a newly opened page opens as a popup and is blocked by a popup blocker. Most users of our application were confused by this behavior. This is the workaround we used. Hope this helps someone who has a similar issue.

We may have a regular link that points to the actual web page that we have on our site called LandingPage.html. We must set the target to "_blank" to open a window on the same browser tab.

 <a href="LandingPage.html" id="fakeLink" target="_blank">Click to open google in the same browser window</a> 

Then we join the click event of the fakeLink binding element.

  $('#fakeLink').click(function(){ $.ajax({ url: "" }).done(function() { localStorage.setItem('url', 'https://www.google.lk'); }); }); 

We can make an ajax call and get the dynamically generated URL from the server. then we can add this url to localstorage.

The landing page may have text that tells users that they will be redirected in a second. "You will be redirected to google in 1 second."

On the landing page, we can have a setting parameter, and inside this function, we can use window.location to redirect the user to the actual page.

  setTimeout(function(){ window.location.assign(localStorage.getItem('url')); }, 1000); 

Hope this helps.This should work in all browsers, I only tested in IE 10 and Chrome, since we do not use any actions related to the browser.