Help - Search - Members - Calendar
Full Version: open in new tab HTML
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
ldrmss
hello

Using the script below as an example Im trying to open in a new tab when you click on a button.

Can some one advise how? i tried to use examples from google but could not make it work.


<html><body>
<script type="text/javascript">
function goToPage1() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.amazon.co.uk/dp/" + page1;
}
function goToPage2() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www." + page2 ".co.uk/dp/B003XIDAPI" ;
}
3
function goToPage3() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www." + page2 ".co.uk/dp/" + page1;
}
</script>
Value A: <input id="param1"><br>
Value B: <input id="param2"><br>
<input type="submit" value="Amazon" onclick="goToPage1()">
<input type="submit" value="Google" onclick="goToPage2()">
</body></html>
Christian J
QUOTE(ldrmss @ Mar 27 2014, 12:25 AM) *

Using the script below as an example Im trying to open in a new tab when you click on a button.

To make a button act like a link, see http://htmlhelp.com/faq/html/links.html#button-link (but note that an ordinary link is more user friendly).

To make the button open a new window, use a TARGET attribute in it, similar to this: http://htmlhelp.com/faq/html/links.html#new-window

QUOTE
<html><body>
<script type="text/javascript">
function goToPage1() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www.amazon.co.uk/dp/" + page1;
}
function goToPage2() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www." + page2 ".co.uk/dp/B003XIDAPI" ;
}
3
function goToPage3() {
var page1 = document.getElementById('param1').value;
var page2 = document.getElementById('param2').value;
window.location = "http://www." + page2 ".co.uk/dp/" + page1;
}
</script>
Value A: <input id="param1"><br>
Value B: <input id="param2"><br>
<input type="submit" value="Amazon" onclick="goToPage1()">
<input type="submit" value="Google" onclick="goToPage2()">
</body></html>

What do you want to achieve with the above script, besides opening a new window? Any particular reason to use javascript at all?

ldrmss
thank for the reply.

the script above is an example of what I actually have.

the button + param completes the link and would take you to the webpage target but for functionality it is best that it opens in a different tab.

i tried to use form but could not get it to work and take to target weblink.

I searched the web and found that java would be the best and it did give me what I was looking for.

I have tried the suggestions from your links but the prpblem is I dont know how to make it work.

I have replaced/ modified the line : window.location = .....

and have tried to use different scripts found in the web but none will open in a new tab.

Please understand i have no HTML skills I have been using 3schools.com as my tutor and google.

thank you
pandy
Use window.open() instead of window.location. If a new window is opened as a tab or not is a feature of the browser, I believe it's often a user setting in tabbed browsers. You can't, from a page, force a tab instead of a window.
Christian J
QUOTE(ldrmss @ Mar 27 2014, 09:11 AM) *

the button + param completes the link and would take you to the webpage target

I didn't know if that part of the script was intentional. To do something like that you need scripting.

QUOTE
have tried the suggestions from your links but the prpblem is I dont know how to make it work.

No, they just dealt with the new window part, not creating a URL from a textfield.

A server-side script like PHP is more reliable than javascript, so let's try that first. Save the code below as e.g. test.php (make sure it's at the very top of the file, with no blank lines/space above it) and upload to the server:

CODE
<?php
if(isset($_GET['site']))
{
    $site=$_GET['site'];
    $param=htmlspecialchars($_GET['param']);
    if($site=='Amazon')
    {
        $url="http://www.amazon.co.uk/dp/$param";
        header("Location: $url");
        exit;
    }
    else if($site=='Google')
    {
        $url="http://www.$param.co.uk/dp/B003XIDAPI";
        header("Location: $url");
        exit;
    }
}
?>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
</head>
<body>

<form target="_blank">
value: <input type="text" name="param" value="">
<input type="submit" name="site" value="Amazon">
<input type="submit" name="site" value="Google">
</form>

</body>
</html>

(I use htmlspecialchars() to sanitize the user input from XSS attempts, but I'm not sure if it's really necessary in this case.)


ldrmss
Thank you very much for the replies and the help

I have to admit i tried to use many times the window.open many times before posting here but never got it right and just found why it was the () and where they were suppose to go.

well it buttons are now opening on a new tab which is perfect


I also tried the script above and it does open in a new tab but cant get it to actually complete the link: .html?param=B0011Z8ZTG&site=Amazon

also to use the script above it would mean I would have to start all over again, and at this point the final script have 13 functions with 4 parameters. it wouldn't be a problem if i had to start again, i just need to understand how it works.
below is an example of the script i actually have, the functions are not what i actually have on my final script but it represents what i need.

***

On a side note I am really enjoying this HTML coding and actually create something.

Once again i thank you for the help provided I am sure I will come back with more questions
Christian J
QUOTE(ldrmss @ Mar 28 2014, 01:06 AM) *

I also tried the script above and it does open in a new tab but cant get it to actually complete the link: .html?param=B0011Z8ZTG&site=Amazon

Sounds like the PHP script doesn't run (the URL above is created by the HTML form alone, even without PHP). You did test the page on a web server, and not just from your local file system? Also note that pages with PHP often need a .php file extension (it can work with an .html extension too, but you may have to configure the server a little first).

QUOTE
below is an example of the script i actually have, the functions are not what i actually have on my final script but it represents what i need.

***

You forgot that part. tongue.gif
ldrmss
Sorry for the late reply

Yeah just notice that i forgot to add the script, the thing was I had written the post but at the same time I was still trying to get the script to work and when it just worked I went to edit the post.

Have to say it is hard work, it is hard work cos i dont really understand how things work and then I get some ideas that I would like to add but theres no nohow smile.gif

Thanks everyone for the help.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.