Javascript and links

[mbengi.bongi83]

Hi Guys,

I wonder if you can tell me if the following is possible, I have run out of steam here.

I'm assuming that this requires Javascript??

My friend's website has a button which links to his "admin" page, he was wondering if by adding a checkbox (or 2) and by clicking them then pressing the button the user would be directed to another url.

Any help would be appreciated.

 

[cdh47315]

No, it's called a "form."

 

[ellescuba27]

No Javascript required. In a form (follow the guy above me's link) you can use the <form> tag, and set the following attributes:

method - can equal "post" or "get"
If the attribute method equals post, the information in the form, like whether those two checkboxes are checked or not, will be hidden from the user. If set to get, then the information in the form will be visible to the user in the address bar. So the code is:
method="post" or method="get"

action - where to go to after the user presses the button.
Once the user presses a button, normally called a submit button, the button makes the user go to another page. Set action to the page you want to go to. So the code is:
action="webpage.html"

After the form tag and it's attributes, add the checkboxes, like you suggested, or other stuff. You can see an example at the guy above me's link. Now add a submit button. You can do so by creating an <input> tag, with the type attribute set to "submit". Remember also to set the value attribute (to whatever words you want on the button) too. Once the user presses this button, it will redirect the user to the page that was set with the action attribute on the form tag. If the form action was set to "get" you can just take what the user submitted out of the address bar, but if you set it to "post", only server side scripts can get it.

Now add a </form> tag.

Example code:
<form method="get" action="webpage.html">
(insert checkboxes, textboxes and radiobuttons here)
<input type="submit" value="Done!"></input>
</form>

In this code, the <form> tag has method set to "get" meaning that the information, like weather some checkboxes were checked, will be in the address bar when the user presses a submit button. The user changes textboxes, checkboxes and stuff, and then, presses the submit button which says "Done!". When the user presses that, the user will be at "webpage.html" on your site and the information will appear in the address bar after the address in a code (because the method was set to "get" in the form tag). You can take that code in the address bar using Javascript and use it wherever you like, or if you want to get advanced, use PHP.

Forms are great for many uses. I'm sure you will find some!

 

[callumacrae]

It can either be done server-side, using PHP, or client-side, using JavaScript. I would recommend the latter, but I'll explain both possibilities:

The HTML:

<form action="goto.php" 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" /> home

If you chose to use PHP, this is what you would put in goto.php:

<?php

if ($_GET['goto'] === 'admin') {
    header('Location: admin.php');
} else if ($_GET['goto'] === 'home') {
    header('Location: index.php');
} else {
    echo 'Invalid input.';
}

Using 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 = 'admin.php';
    } else if (goto === 'home') {
        document.location = 'index.php';
    } else {
        alert('Invalid input');
    }
    e.preventDefault();
});

 

[mbengi.bongi83]

Thanks very much guys,

I think the Javascript option is what is needed here, after having spoken to my friend.

Just another couple of points; Where does the Javascript go? I assume it's within the <form> tags?

Also, if no checkbox is checked, rather than an alert, I assume that

        alert('Invalid input');

Can be changed to:

        document.location = 'anotherlocation.php';

Or do further changes need to be made?

 

[essellar]

The JavaScript can go just about anywhere on the page as long as the DOM is ready when it's called. The current "best practice" is to put scripts like this at the bottom of the HTML page, before the closing body tag. And yes, you can change the else clause in exactly the way you described.

 

[callumacrae]

The else statement will only be called if you have done something wrong, and should only really be used for debugging.

 

[mbengi.bongi83]

The JavaScript can go just about anywhere on the page as long as the DOM is ready when it's called. The current "best practice" is to put scripts like this at the bottom of the HTML page, before the closing body tag. And yes, you can change the else clause in exactly the way you described.

That's great, I will let my friend know.

Just one thing, I assume the HTML will be different as my friend isn't using PHP? Also for the button, he is using a custom image with hover/visited states in CSS so I assume that

<input type=[COLOR=#0000ff]"submit"[/COLOR] value=[COLOR=#0000ff]"Go"[/COLOR] />

Can be replaced with something like:

<input type="image" name="submit" src="image.jpg" width="126" height="18">

Sorry to be a pest

 

[lehiligan_xvi97]

it really helps to me also... thanks

 

[essellar]

Anything that acts to submit the form (inputs of type submit and image, as well as buttons with type submit --which is the default) will work, since the code is attached to the onsubmit event of the form rather than to the input/button itself.

 

[ellescuba27]

If you want to use an image, try the javascript submit code, like:
<a href="javascript:" onClick="document.(put the form name here).submit();"><input type="image" name="submit" src="image.jpg" width="126" height="18"></a>
Just make sure you set the name attribute of the form to whatever you like and edit the code above appropriately.

 

[callumacrae]

If you want to use an image, try the javascript submit code, like:
<a href="javascript:" onClick="document.(put the form name here).submit();"><input type="image" name="submit" src="image.jpg" width="126" height="18"></a>
Just make sure you set the name attribute of the form to whatever you like and edit the code above appropriately.

Instead of wrapping it in an anchor, why not just said the on click attribute of the input? Also, onclick should be all lowercase, and you should probably be using event listeners. You should also never use javascript:.

 

[mbengi.bongi83]

Thanks for the advice guys.

Does the above apply to CSS Sprites? My friend forgot to tell me that the image is a sprite. The image has hover/visited states at the moment declared in a css id tag.

 

[callumacrae]

Haven't a clue, give it a try

 

[ellescuba27]

Sorry for my coding, I learned Javascript 1.5 with a pretty bad tutorial book which had just as bad coding as that. As for the javascript: thing, it's just a placeholder because otherwise the link would lead to another page, and the reason I didn't put the event handler onto the image itself is that older versions of Netscape (I think that's the right browser) don't support it. You are right though, onClick should be lowercase - another habit of mine from the javascript tutorial book.

 

[callumacrae]

Sorry for my coding, I learned Javascript 1.5 with a pretty bad tutorial book which had just as bad coding as that. As for the javascript: thing, it's just a placeholder because otherwise the link would lead to another page, and the reason I didn't put the event handler onto the image itself is that older versions of Netscape (I think that's the right browser) don't support it. You are right though, onClick should be lowercase - another habit of mine from the javascript tutorial book.

Use e.preventDefault() in an error handler to prevent the link from going elsewhere. Don't support the old versions of Netscape ;-)

Try this for a good JavaScript book.

 

[mbengi.bongi83]

What is the correct way of incorporating the Javascript into the HTML? I assume the HTML given will be different as the code given refers to goto.php