Javascript/HTML issue

Mbengi Bongi · Dec 9, 2011

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

Groovetube · Dec 10, 2011

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.

5altyFX · Dec 10, 2011

What software are you using for making the site?

if Adobe Dreamweaver then i can explain...

Mbengi Bongi · Dec 11, 2011

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.

Groovetube · Dec 11, 2011

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.

Mbengi Bongi · Dec 12, 2011

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.

Groovetube · Dec 12, 2011

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

Mbengi Bongi · Dec 13, 2011

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.

Groovetube · Dec 13, 2011

hey, check out that link I posted, it actually has the code you need.

Mbengi Bongi · Dec 13, 2011

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:

dekan · Dec 13, 2011

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!

Mbengi Bongi · Dec 13, 2011

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.

dekan · Dec 13, 2011

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!

Mbengi Bongi · Dec 14, 2011

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:

Groovetube · Dec 14, 2011

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.

dekan · Dec 14, 2011

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>

Mbengi Bongi · Dec 14, 2011

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

dekan · Dec 14, 2011

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?

Mbengi Bongi · Dec 14, 2011

That's right - sorry if that wasn't clear from the beginning :Oops:

dekan · Dec 15, 2011

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?