The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> open in new tab HTML
ldrmss
post Mar 26 2014, 06:25 PM
Post #1


Newbie
*

Group: Members
Posts: 10
Joined: 26-March 14
Member No.: 20,618



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 26 2014, 08:25 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,006
Joined: 10-August 06
Member No.: 7



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?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ldrmss
post Mar 27 2014, 03:11 AM
Post #3


Newbie
*

Group: Members
Posts: 10
Joined: 26-March 14
Member No.: 20,618



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 27 2014, 12:03 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,105
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 27 2014, 12:27 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,006
Joined: 10-August 06
Member No.: 7



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.)


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ldrmss
post Mar 27 2014, 07:06 PM
Post #6


Newbie
*

Group: Members
Posts: 10
Joined: 26-March 14
Member No.: 20,618



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 27 2014, 08:13 PM
Post #7


.
********

Group: WDG Moderators
Posts: 8,006
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ldrmss
post Apr 1 2014, 03:46 PM
Post #8


Newbie
*

Group: Members
Posts: 10
Joined: 26-March 14
Member No.: 20,618



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 post has been edited by ldrmss: Apr 1 2014, 03:48 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th January 2019 - 09:13 PM