Making a simple form work.

[bdenny20]

Hello!
First time here, and I am in need of a little guidance.
I have the vision for my website, I just lack a little in the technical know-how.

Let me give you an idea of what's going on here, I have the intro page set up. My goal is to have a simple login page, a really simple, basic password protection concept. The result I'm looking for is an 'if, else if, else' type script, where certain passwords take you to certain pages. It's bare-boned, and not super secure, but that's okay. Nothing sensitive is being hosted, it's more of a stepping stone for bigger projects down the road.

I know a bit about HTML, and am coming along nicely with CSS, but Javascript is still for the most part over my head. This is my first time ever using Javascript, I kind of skipped over 'Hello World' and right to conditionals. I've got the idea mostly worked out, while consulting Google for assistance, but I can not get it to work right. Here's what I have so far.

<script language="javascript">
function loadPage(form) {
if (form.id.value=="1") {
open.document="newcustomer.php"
} else {
alert("Invalid password")
}
}
</script>

That's the script so far, it's located in the body, I've tried the head, to no avail. For ease with troubleshooting, the only acceptable password is '1,' this is so I know for certain that I'm putting in the right password. Also, this script as of now only has one acceptable password, when I finally get this working right, and add more pages, I'll add more 'else if's.'

<form name="form">	
<CENTER><label for="enter">Enter Your Password:</label><input name="id" input type="text" class="box" name="pwd"/>  <input type="submit" class="submit" onClick="loadPage(this.form)" value="Enter Now"/></CENTER>
</form> 

This is the actual HTML markup for the form. Straight forward stuff here, just a simple text box (temporarily set to 'text' for the same troubleshooting assistance.)


The alert box does show up when an incorrect password is entered, but if I enter the correct password (1, in this case) the page simply refreshes, and 'pwd=1' appears at the end of the URL.

I'm puzzled, normally I can figure things out on my own, but this time I'm reaching out. Hopefully I've given you enough information, this is also my first attempt at looking for assistance for this sort of thing. If you need anymore, let me know!

Thanks for any and all help.

Bill



(Afterthought: I hit preview to make sure everything looked alright, then I noticed I have 'name=pwd' and 'input name=id' both in the form. I tried deleting the 'name=pwd' and trying again, same result, only 'id=1' appeared in the URL. Thought I had it there for a second, so close...


(Edit: Sorry, I posted without reading the post that tells you how to post. I'll put in descriptive titles in from now on...

[Philip M]

Originally Posted by bdenny20

Hello!
First time here, and I am in need of a little guidance.
I have the vision for my website, I just lack a little in the technical know-how.

Lots of problems.

<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).

Assigning a name to a form is also deprecated and obsolete. Forms should have an id only.

You may not name an HTML element with the reserved word id. It is simply silly to give a name the name id. A sensible name/id for a password field is, er, say pwd. And you realise that have assigned two different names to the field.

There is no Javascript keyword "open". Have a look at window.location

label for="enter" // There is no field named enter.

But your script is totally insecure and hence virtually useless. Anyone can see the password and the redirect page simply by using View Source. Any non-trivial password or log-in script requires server-side coding.

The trouble with scraping bits of code from the internet when you do not really understand what you are doing is that you are likely to end up with obolete stuff or even complete rubbish. Presumably you would not attempt to service or repair a machine or appliance without any experience or understanding of how it worked.

You say you have now read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.

Adam and Eve were created from an apple tree. Noah's wife was Joan of Ark. Noah built an ark and the animals came on in pears. - Pupil's answer to Catholic Elementary School test.

[bdenny20]

Thanks for the reply. I re-named the post, I tried earlier, but didn't see the option to change the title originally. I was more successful the second time around.

I originally had the 'text/javascript' in lieu of the latter, but in my increasingly odd attempts to get this to work, I started trying peculiar things...

The enter label thing has something working for it on the style sheet, it formats the wording nicely, conventional methods proved unsuccessful. (There's a theme here if you can not tell...)

I finally got it to work using 'window.open()'. It's not exactly what I was looking for, since this opens a new tab rather simply changing the page on the current tab. I'll keep tinkering with that later.

Yes, I'm sorry it's blatantly obvious that I'm skewering Google for bits and pieces of other code to make something work. I am not just copying and pasting, I'm re-typing, looking up, and studying the purpose of each and every element. We all have to start out somewhere.

Speaking of that, it's not entirely useless. It's a similar concept as 'Hello World,' which is arguably just as useless, albeit that is it's objective. I'm just trying to get my feet wet, and make script that does something somewhat productive at the same time.

Thank you for your two cents though, I'm sure I'll be back after I botch more things up.

Bill

[Philip M]

The trouble with "skewering Google for bits and pieces of other code" is that you are likely to encounter obsolete, deprecated, antiquated or just-plain-wrong-nowadays code, which you then have to un-learn if you want to gain competence. A good deal of the stuff posted on the internet is wildly outdated. You want to learn modern Javascript, not A History of Javascript.

[WolfShade]

Google suggestion for code searching: "more search tools", "within last year".

[Old Pedant]

As Philip said, this is about as secure as tying your house door closed with a piece of string.

But...

<form action="newcustomer.php" onsubmit="return checkPassword(this);">
Enter your password: <input name="pwd"/>
<br/>
<input type="submit"/>
</form>
<script type="text/javascript">
function checkPassword(form)
{
    if ( form.pwd == "1" ) { return true; // form will be submitted }
    alert("Invalid password"); // alert is also obsolete...you should *NOT* use it
    return false; // the form submit is cancelled
}
</script>

Learn to use the standard HTML controls so much as possible.

The advantage of the coding here is that if a user disables JavaScript, the <form> will *STILL* be submitted to your "newcustomer.php" page and then you can (and should!) re-check the password in the PHP code.

Of course, this begs the question of why you are checking the password in the JavaScript code in the first place.

Again, if a user disables JavaScript, the JS check is worthless.

So just do it all in the PHP code and be safer and have it work no matter what.

[bdenny20]

Thanks for the input. Once it finally started working, it was removed. Essentially for reasons already mentioned. It's not even necessary for me to have a password here, a enter link suffices.

That 'script' was archived, and hopefully I can look back on it one day with the same incredulous expressions I'm sure you all had when you first saw it.