Javascript/HTML issue

Joined
Dec 16, 2006
Messages
33
Reaction score
0
Points
6
Hi guys,

I wonder can someone help here, a friend of mine wrote some Javascript code for me, but he has gone on holiday without telling me one thing - how to add it to my web page!

the code is:

Code:
document.getElementById('gotoform').addEventListener('submit', function(e) {
    for (var goto = '', i = 0; i < this.goto.length; i++) {
        if (this.goto[i].checked) {
            goto = this.goto[i].value;
            break;
        }
    }
    
    if (goto === 'admin') {
        document.location = 'pageB.html';
    } else if (goto === 'home') {
        document.location = 'pageC.html';
    } else {
        alert('Invalid input');
    }
    e.preventDefault();
});

I have a button which links to Page A but the code should introduce 2 checkboxes which when checked should re-direct to Page B or Page C.

Any help would be much appreciated :D
 
Joined
Nov 15, 2011
Messages
953
Reaction score
154
Points
43
Location
Toronto
Your Mac's Specs
MBP 16” M1max 32/1tb and bunch of other mac/apple stuff
well, it appears you'll need to make a form, a submit button with 2 checkboxes with the id I guess of gotoform. That code isn't going to generate it for you. It merely attaches an event listener to the submit button to check the value of your checkbox, and send you to the page according to it's value.

not sure if you know javascript.
I have to wonder about this javascript though, I'm not sure that I've seen a var declared inside a for declaration before the counter assign ( i=0 ). I don't think JS needs a var to be declared so I don't know why goto is is assigned an empty value.

did he test the script? he should have included a form bit that goes with this.
 
Joined
Dec 10, 2011
Messages
26
Reaction score
0
Points
1
What software are you using for making the site?

if Adobe Dreamweaver then i can explain...
 
OP
M
Joined
Dec 16, 2006
Messages
33
Reaction score
0
Points
6
Thanks for the replies guys;

I forgot, my friend did leave some html, but it looks like it's more for the PHP option [which I don't want to use] he told me about, anyway the code is:

Code:
<form action="goto.php" method="get" id="gotoform">
<input type="submit" value="Go" />
Go to: <input type="checkbox" name="goto" value="admin" checked="checked" /> PageB   <input type="checkbox" name="goto" value="home" /> PageC

In terms of software, I only use a text editor (Smultron) as I can't afford the like of Dreamweaver.
 
Joined
Nov 15, 2011
Messages
953
Reaction score
154
Points
43
Location
Toronto
Your Mac's Specs
MBP 16” M1max 32/1tb and bunch of other mac/apple stuff
is this part of a larger form? I have to ask why even bother with all this when you could just make links?

or you could just do an option dropdown with an onChange event right in the form code that will redirect when the user selects. Easier.
 
OP
M
Joined
Dec 16, 2006
Messages
33
Reaction score
0
Points
6
The reason is I have a row of 6 buttons along the bottom of my website and I want to triple their functionality without tripling the amount of buttons, doing that would ruin the theme of the website.

That was all the code my friend gave me. Can anyone suggest a better way?

The buttons on the site are CSS Sprites in <a> tags with hover/active states.
 
Joined
Nov 15, 2011
Messages
953
Reaction score
154
Points
43
Location
Toronto
Your Mac's Specs
MBP 16” M1max 32/1tb and bunch of other mac/apple stuff
this makes absolutely no sense. You'll have to post the page.

If you really want to have a form object allow users to select a page and go, I would highly recommend using the option dropdown form and use onChange or similar.

That code is all over the internet, this page would save me a lot of typing:
Dropdown / Select Box Navigation with JavaScript
 
OP
M
Joined
Dec 16, 2006
Messages
33
Reaction score
0
Points
6
The site is Mbengi Bongi - Home Page

The buttons labelled Red - Purple link to different sites - I was wanting to add functionality to them to link to some new pages within the main site.

I don't really want to use a drop-down menu if I can avoid it.
 
Joined
Nov 15, 2011
Messages
953
Reaction score
154
Points
43
Location
Toronto
Your Mac's Specs
MBP 16” M1max 32/1tb and bunch of other mac/apple stuff
hey, check out that link I posted, it actually has the code you need.
 
OP
M
Joined
Dec 16, 2006
Messages
33
Reaction score
0
Points
6
Thanks very much that looks great.

The only thing is I only want 2 checkboxes so that they interact with all 6 buttons - not 2 per individual button.

Can this be accomplished? :Confused:
 
Joined
Mar 16, 2007
Messages
756
Reaction score
14
Points
18
Are you building this website yourself by coding it in an editor? If so, you can just use the form code you posted above instead of the buttons and add more checkboxes - as many as you need. The "value" of each box needs to be updated with a unique name you can use to identify where you'd like to redirect to.

Once you have the checkboxes and one "goto" button you need to implement the javascript which will handle the request. In you HTML page in the "<header>" section add a "<script type='text/javascript'> ... </script>" section. Into this section you'll add the code you had in your very first post here. The "if (goto ==" part needs to be updated if you have more than 2 buttons. Add more "else if" to it with the options you used as values in the step above.

And that should be it...

What I don't like about using checkboxes is that your browser can only forward to one URL when the button is pressed. But you could select more than one checkbox. I guess right now it would simply forward to the first box the script finds selected. If it was me I would change the checkboxes to radio buttons - that way only one can be selected...

Hope that helps!
 
OP
M
Joined
Dec 16, 2006
Messages
33
Reaction score
0
Points
6
I've done as you've said and nothing happens? :Confused:

Is there a action="something" or something like that needed in the form tag?

When I press the 'Go' button with 'admin' checked all that happens is

Code:
http://mbengi.bongi.x10.mx/JTest.html?goto=admin

appears in the address bar.
 
Joined
Mar 16, 2007
Messages
756
Reaction score
14
Points
18
Ok, that means that everything is set up right. The reason why it's not actually forwarding to a different page might be the:
Code:
document.location = 'pageXX.html';

Change these locations to:
Code:
document.location = 'http://mbengi.bongi.x10.mx/pageXX.html';

...it's not good to hard code this in there and there are functions to make it more flexible by generating the full URL. but it will do for testing purposes for now.

Lemme know how it goes!
 
OP
M
Joined
Dec 16, 2006
Messages
33
Reaction score
0
Points
6
No luck at all - changed the code as you say (to 2 pages on my other host):


Code:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="Content-type"
		content="text/html; charset=UTF-8">
<meta name="DESCRIPTION" content=""> 
<meta name="KEYWORDS" content=""> 
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
document.getElementById('gotoform').addEventListener('submit', function(e) {
    for (var goto = '', i = 0; i < this.goto.length; i++) {
        if (this.goto[i].checked) {
            goto = this.goto[i].value;
            break;
        }
    }
    
    if (goto === 'admin') {
        document.location = 'http://mbengi-bongi.110mb.com/About.html';
    } else if (goto === 'home') {
        document.location = 'http://mbengi-bongi.110mb.com/Index.html';
    } else {
        alert('Invalid input');
    }
    e.preventDefault();
});                                                                                             

</script>
</head>

<body>
<form method="get" id="gotoform">
<input type="submit" value="Go" />
Go to: <input type="checkbox" name="goto" value="admin" checked="checked" /> admin   <input type="checkbox" name="goto" value="home" />

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
</body>

</html>

Bt all that happens is the same in the address bar. :Grimmace:
 
Joined
Nov 15, 2011
Messages
953
Reaction score
154
Points
43
Location
Toronto
Your Mac's Specs
MBP 16” M1max 32/1tb and bunch of other mac/apple stuff
I've looked at your page, and for the life of me I can't figure out what it is exactly you are trying to accomplish.

I see the colored buttons below, and I don't how you want this form to interact with buttons. I assumed you wanted the form options to be a separate thing. Perhaps if you explain in detail how these form elements are to interact with with the buttons and which button... and why the form is needed, maybe I can help.
 
Joined
Mar 16, 2007
Messages
756
Reaction score
14
Points
18
I write code a bit different so I just took what you posted last and reworked it a bit in a way I would have done it. This is what I came up with and when I run this on a simple html file on my system it redirects me no problem on submit.

Code:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="Content-type"
		content="text/html; charset=UTF-8">
<meta name="DESCRIPTION" content=""> 
<meta name="KEYWORDS" content=""> 
<meta name="AUTHOR" content="Steven A. Horne"> 
<script type="text/javascript">
function onsubmitform( redirectform )
{
	if( redirectform != null )
	{
		var newUrl = '';
	    var radioButtons = document.redirectform.nextPage;
	    
	    for ( var i = 0; i < radioButtons.length; i++) {
    	    if( radioButtons[i].checked ) 
    	    {
	            newUrl = radioButtons[i].value;
            	break;
        	}
    	}
    	
	    if ( newUrl === 'admin' ) 
	    {
	    	//alert('in admin');
    	    window.location = 'http://www.google.co.uk';
    	    return false;
	    } 
	    else if ( newUrl === 'home' ) 
	    {
	    	//alert('in home');
    	    window.location = 'http://mbengi-bongi.co.nr';
    	    return false;
	    } 
	    else 
	    {
    	    alert('Invalid input');
	    }
	}
}
</script>
</head>

<body>
<form method="post" id="redirectform" name="redirectform" onsubmit="return onsubmitform( this )">
<input type="submit" value="Go" />
Go to: <input type="radio" name="nextPage" value="admin" checked="checked" /> admin   <input type="radio" name="nextPage" value="home" /> home
</form>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
</body>

</html>
 
OP
M
Joined
Dec 16, 2006
Messages
33
Reaction score
0
Points
6
Yep, that is spot on! I note your javascript is somewhat different to what I was given!

How do I rework the form so it interacts with the 6 buttons on my website? In other words the functionality of the submit button is replaced by either of the 6 buttons so that when 'nothing' is selected the buttons perform their original task, but when either radio button is selected the user is directed elsewhere.

I'm guessing I replace the <input> tag and/or it's contents with something similar. The original buttons bearing in mind are CSS Sprites in <a> tags having hover and active states which I would like to preserve.

Thanks again ;)
 
Joined
Mar 16, 2007
Messages
756
Reaction score
14
Points
18
So just to re-cap: You have 6 buttons that have their own action/link when just clicked. But, when either "admin" or "home" is selected, you want to forward to a different site than the default?
 
Joined
Mar 16, 2007
Messages
756
Reaction score
14
Points
18
I would do that quite different then:

Code:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="Content-type"
		content="text/html; charset=UTF-8">
<meta name="DESCRIPTION" content=""> 
<meta name="KEYWORDS" content=""> 
<meta name="AUTHOR" content="Steven A. Horne"> 
<script type="text/javascript">
function onbuttonclick( defaultLink, adminLink )
{
	if( defaultLink != null && adminLink != null )
	{
		var selectedOption = '';
	    var radioButtons = document.redirectform.nextPage;
	    
	    for ( var i = 0; i < radioButtons.length; i++) 
	    {
    	    if( radioButtons[i].checked ) 
    	    {
	            selectedOption = radioButtons[i].value;
            	break;
        	}
    	}
    	
	    if ( selectedOption === 'admin' ) 
	    {
	    	//alert('in admin');
    	    window.location = adminLink;
    	    return false;
	    } 
	    else 
	    {	
    	    window.location = defaultLink;
    	    return false;
	    }
	}
}
</script>
</head>

<body>
Action: <br />
<form method="post" id="redirectform" name="redirectform">
	<input type="radio" name="nextPage" value="default" checked="checked"/> default<br />
	<input type="radio" name="nextPage" value="admin" /> admin<br /><br />
</form>

<input type="submit" value="Button 1" onclick="onbuttonclick('http://www.google.ca/search?q=button1+default', 'http://www.google.ca/search?q=button1+admin')"/>
<input type="submit" value="Button 2" onclick="onbuttonclick('http://www.google.ca/search?q=button2+default', 'http://www.google.ca/search?q=button2+admin')"/>
<input type="submit" value="Button 3" onclick="onbuttonclick('http://www.google.ca/search?q=button3+default', 'http://www.google.ca/search?q=button3+admin')"/>
<input type="submit" value="Button 4" onclick="onbuttonclick('http://www.google.ca/search?q=button4+default', 'http://www.google.ca/search?q=button4+admin')"/>
<input type="submit" value="Button 5" onclick="onbuttonclick('http://www.google.ca/search?q=button5+default', 'http://www.google.ca/search?q=button5+admin')"/>
<input type="submit" value="Button 6" onclick="onbuttonclick('http://www.google.ca/search?q=button6+default', 'http://www.google.ca/search?q=button6+admin')"/>

</body>

</html>

You can see the radio buttons where you select either if a default action is supposed to be performed or some admin link. When a button gets clicked, you call the javascript function and this function now has 2 parameters: The link to go to when default is selected and the admin link. I have used google search pages as example. On click you'll see a google page with the button that was clicked and if it's default or admin.

Is that what you had in mind?
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top