CODEWITHSUNDEEP
javascripthrefwindow.open
Jeff
Jeff

Reputation: 73

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

I've examined tons of examples over the past couple days, but still can't find an answer to my dilemma. In order for me to explain my dilemma first I'll show you an example of something I have that works, then explain how I would rather it work (but can't seem to achieve).

This 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'd rather do is capture the option and open the URL using an anchor tag (rather than input[type"submit"]), something like this (to 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 doesn't work, and I can't figure out how to form it correctly. Help?

I know this doesn't seem logical, especially since I already have it working using a submit button, but it's also not practical for me to explain exactly why I don't want to use input or button type="submit", , or PHP. Please, it really needs to be inline javascript in an anchor tag. Thanks.s :-)

Upvotes: 7

Views: 54616

Answers (5)

PrimosK
PrimosK

Reputation: 13918

Add your form name attribute like:

<form name="form">

... and then try it like that:

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

There is a working example.

Upvotes: 8

Nuwan
Nuwan

Reputation: 407

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

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

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

We then attached to the click event of the fakeLink anchor element.

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

We can perform the ajax call and retrieve the dynamically generated url from the server. then we can add that url to localstorage.

Landing page can have a text to indicate to the users that they will be redirected in a second. "You will be redirected to google in 1 second."

In the landing page, we can have a settimeout and inside that function, we can use a window.location to redirect 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 checked in IE 10 and Chrome since we are not using any browser related things.

Upvotes: 1

Tony
Tony

Reputation: 364

You can forget about using JavaScript because the browser controls whether or not it opens in a new tab. Your best option is to do something like the following instead:

<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 regardless of which browser a client uses due to the target="_blank" attribute.

If all you need is to redirect with no dynamic parameters you can use a link with the target="_blank" attribute: 

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

Upvotes: 0

Hirav
Hirav

Reputation: 21

I don't know why you have use the form if you just want to open a URL while selecting an option. Read the code below:

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

This works well on every browser Even on IE5.

Upvotes: 2

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

This worked so far, though it's long

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

Upvotes: 1

Related Questions