How to create input form with multiple options?

Question

I'm trying to set up a form that allows you enter a password that grants access to a specific URL.

For example, enter "facebook", and it takes you to www.facebook.com Enter, "yahoo", it sends you to www.yahoo.com Enter, "google",.... you get it. If one enters anything but those words, it gives an error.

This is what I have so far:

    <script language="javascript">
<!--//
/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function pasuser(form) {
        if(form.id.value=="google") { location="http://www.google.com" } 
        else if(form.id.value=="facebook") { location="http://www.facebook.com" } 
        else if(form.id.value=="yahoo") { location="http://www.yahoo.com" } 

    else {alert("Invalid Password")}
                        }
//-->
</script>

<form name="login">
<input name="id" type="text">
<input type="button" value="Enter Class" onClick="pasuser(this.form)">
</form>

However, this doesn't work! Can someone help me set this up! I'd really like to have more than 3 options.

Thanks!

It would be just super if you would specify the error you received... I left my psychic mind at home today. — Ben Everard
– Ben Everard, Commented Dec 8, 2009 at 11:11
Please reword the question as to avoid the use of password. Unless you really mean password in the credentials sense. In that case: DON'T. — R. Martinho Fernandes
– R. Martinho Fernandes, Commented Dec 8, 2009 at 11:13

MBO · Accepted Answer · 2009-12-08 11:23:55Z

2

I don't know what doesn't work in this particular example (it works, on clicking submit button, not hitting ENTER). But if you want to have more than 3 sites, you could make it easier:

<script>
// ...
sites = {
    "google": "http://www.google.com",
    "facebook": "http://www.facebook.com",
    "yahoo": "http://www.yahoo.com"
};
function pasuser(form) {
    if (sites[form.id.value]) {
        window.location = sites[form.id.value];
    } else {
        alert("Invalid Password")
    }
}
</script>

answered Dec 8, 2009 at 11:23

MBO

31.2k5 gold badges53 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:13:26Z

2

You shouldn't use "id" as the name of an HTML element since it may conflict with the id property. For the rest of my answer, look at MBO's answer

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Dec 8, 2009 at 11:25

Justin Johnson

31.3k7 gold badges67 silver badges89 bronze badges

Comments

Jamie Dixon · Accepted Answer · 2009-12-08 11:14:19Z

1

If you're wanting to send your user to a specific location, you might want to use window.location instead of just location.

answered Dec 8, 2009 at 11:14

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Comments

Jacob Relkin · Accepted Answer · 2009-12-08 11:26:30Z

1

I think you meant to write something along the lines of this:

function redirect( ) {
   var textfield = document.getElementById( 'textfield' );
   var location = '#';
   switch( textfield.value ) {
      case 'facebook':
        location = 'http://facebook.com';
        break;
      case 'google':
        location = 'http://google.com';
        break;
      // add as many as you like
   }
   window.location.href = location;
}

HTML:

 <input id="textfield" type="text" value=""/>
 <input type="button" value="Enter Class" onclick="redirect()"/>

You do not need a form to do this URL redirection.

Good luck.

edited Dec 8, 2009 at 11:26

answered Dec 8, 2009 at 11:13

Jacob Relkin

164k34 gold badges352 silver badges321 bronze badges

2 Comments

Jamie Dixon Over a year ago

Except you do need a form to have input elements and valid HTML right?

Jacob Relkin Over a year ago

No. You can have input elements outside of a form.

Amarghosh · Accepted Answer · 2009-12-08 11:27:03Z

0

I tried your code on Firefox 3.5 and IE 8 and it works when you click the button, not when you hit Enter after typing the string. To make it work from enter key, call return pasuser(this) from the onsubmit of the form and return false; from end of the pasuser function.

<form name="login" onsubmit="return pasuser(this)">
function pasuser(form) 
{
    //other code
    else {alert("Invalid Password")}
    return false;
}

answered Dec 8, 2009 at 11:27

Amarghosh

59.5k11 gold badges95 silver badges122 bronze badges

Collectives™ on Stack Overflow

How to create input form with multiple options?

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related