New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

Javascript/HTML issue


Post Reply New Thread Subscribe

 
Thread Tools
Mbengi Bongi

 
Member Since: Dec 16, 2006
Posts: 25
Mbengi Bongi is on a distinguished road

Mbengi Bongi is offline
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
QUOTE Thanks
Groovetube

 
Groovetube's Avatar
 
Member Since: Nov 15, 2011
Location: Toronto
Posts: 290
Groovetube has a spectacular aura about
Mac Specs: Retina MBP 2.7 768ssd/16gig ram /30" dell 3008. and bunch of other mac/apple stuff

Groovetube is offline
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.
QUOTE Thanks
5altyFX

 
5altyFX's Avatar
 
Member Since: Dec 10, 2011
Posts: 26
5altyFX is on a distinguished road

5altyFX is offline
What software are you using for making the site?

if Adobe Dreamweaver then i can explain...
QUOTE Thanks
Mbengi Bongi

 
Member Since: Dec 16, 2006
Posts: 25
Mbengi Bongi is on a distinguished road

Mbengi Bongi is offline
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 &nbsp; <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.
QUOTE Thanks
Groovetube

 
Groovetube's Avatar
 
Member Since: Nov 15, 2011
Location: Toronto
Posts: 290
Groovetube has a spectacular aura about
Mac Specs: Retina MBP 2.7 768ssd/16gig ram /30" dell 3008. and bunch of other mac/apple stuff

Groovetube is offline
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.
QUOTE Thanks
Mbengi Bongi

 
Member Since: Dec 16, 2006
Posts: 25
Mbengi Bongi is on a distinguished road

Mbengi Bongi is offline
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.
QUOTE Thanks
Groovetube

 
Groovetube's Avatar
 
Member Since: Nov 15, 2011
Location: Toronto
Posts: 290
Groovetube has a spectacular aura about
Mac Specs: Retina MBP 2.7 768ssd/16gig ram /30" dell 3008. and bunch of other mac/apple stuff

Groovetube is offline
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
QUOTE Thanks
Mbengi Bongi

 
Member Since: Dec 16, 2006
Posts: 25
Mbengi Bongi is on a distinguished road

Mbengi Bongi is offline
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.
QUOTE Thanks
Groovetube

 
Groovetube's Avatar
 
Member Since: Nov 15, 2011
Location: Toronto
Posts: 290
Groovetube has a spectacular aura about
Mac Specs: Retina MBP 2.7 768ssd/16gig ram /30" dell 3008. and bunch of other mac/apple stuff

Groovetube is offline
hey, check out that link I posted, it actually has the code you need.
QUOTE Thanks
Mbengi Bongi

 
Member Since: Dec 16, 2006
Posts: 25
Mbengi Bongi is on a distinguished road

Mbengi Bongi is offline
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?
QUOTE Thanks
dekan

 
dekan's Avatar
 
Member Since: Mar 16, 2007
Posts: 756
dekan is a jewel in the roughdekan is a jewel in the rough

dekan is offline
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!

QUOTE Thanks
Mbengi Bongi

 
Member Since: Dec 16, 2006
Posts: 25
Mbengi Bongi is on a distinguished road

Mbengi Bongi is offline
I've done as you've said and nothing happens?

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.
QUOTE Thanks
dekan

 
dekan's Avatar
 
Member Since: Mar 16, 2007
Posts: 756
dekan is a jewel in the roughdekan is a jewel in the rough

dekan is offline
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!

QUOTE Thanks
Mbengi Bongi

 
Member Since: Dec 16, 2006
Posts: 25
Mbengi Bongi is on a distinguished road

Mbengi Bongi is offline
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 &nbsp; <input type="checkbox" name="goto" value="home" />

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
</body>

</html>
Bt all that happens is the same in the address bar.
QUOTE Thanks
Groovetube

 
Groovetube's Avatar
 
Member Since: Nov 15, 2011
Location: Toronto
Posts: 290
Groovetube has a spectacular aura about
Mac Specs: Retina MBP 2.7 768ssd/16gig ram /30" dell 3008. and bunch of other mac/apple stuff

Groovetube is offline
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.
QUOTE Thanks

Post Reply New Thread Subscribe


« Email Links Don't Work In IWeb | Print background, need help with simple coding Web page »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
2006 Macbook Startup Issue? rjt2116 Apple Notebooks 1 01-04-2011 07:47 PM
Mouse click menu issue iwonder2 Apple Desktops 0 12-27-2010 07:04 PM
Continuous Kernel Panic Issue Zilch Apple Notebooks 8 10-04-2010 06:17 AM
Disk Error, then FOLDER WITH QUESTION MARK ISSUE. rohit.dhamija Apple Notebooks 1 09-14-2010 01:52 PM
Issue with Mac Safari browser harryindia OS X - Apps and Games 4 11-21-2006 06:31 PM

All times are GMT -4. The time now is 11:58 PM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?