Hey, let me start off telling you what I would like from this script. I want the user to type in both passwords in the fields, then automatically I want my script to check if the passwords match. If they do, I want an image to be shown in the input box. I've attempted two gather two sources and make them work together, but so far nothing. Here is my non-working Javascript:
| Code: |
function checkpasswords(theForm) {
doc = document.getElementById('password');
if (theForm.password.value != theForm.password2.value) {
doc.style.background="url('images/checkx.gif')";
}
else
{
doc.style.background="url('images/checka.gif')";
}
} |
And my form:
| Code: |
<form action="register.php?page=register" method="post" name="Form1">
<table width="100%" cellspacing="2" cellpadding="0">
<tr>
<td colspan="3" style="height:20px; font-weight:bold;">Account Options</td>
<td rowspan="6" style="vertical-align:top; padding:6px;">The following fields are required.</td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" size="45" name="username"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" size="45" name="password" id="password" script="javascript: checkpasswords(this);" /></td>
</tr>
<tr>
<td>Password Again:</td>
<td><input type="password" size="45" name="password2" id="password2"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" size="45" name="email"/></td>
</tr>
</table><br />
<center><input type="submit" value="Register"></center></td>
</form> |
I thought of putting the onsubmit value on the form, but I don't want it to check the form when it's being submitted but to check it while users are typing. Please help a newbie with Javascript out!
Thanks, and kind regards. Try onkeyup:
| Code: |
<tr>
<td>Password:</td>
<td><input type="password" size="45" name="password" id="password" onkeyup="javascript: checkpasswords(this);" /></td>
</tr>
<tr>
<td>Password Again:</td>
<td><input type="password" size="45" name="password2" id="password2" onkeyup="javascript: checkpasswords(this);></td>
</tr> |
When the user lets go of a key (which is what happens when you click the key) it will throw that event. You don't want to use something like onchange, as it only registers as a change after you have deselected the box.
Using onkeyup will run the script each time a key is pressed.
Let me know if it works, it should, however it isn't tested. I'm sorry to say, but this didn't do anything. 
I am starting to wonder if the image paths are right, but I have no way of checking. To debug, you can put in the function. This way you know if the function gets called or not. If it does, you can put | Code: |
| alert(theForm.password.value); |
in the function. That way you know if it can retrieve the password. Keep doing that until you find out exactly which step fails, and if you can't find why, tell us, so we will be able to see what's wrong probably. I have tried the alert('test'); and no go. I don't actually think that the script is being called properly. Here is what I did:
| Code: |
function checkpasswords(theForm) {
doc = document.getElementById('password');
if (theForm.password.value != theForm.password2.value) {
doc.style.background="url('images/checkx.gif')";
}
else
{
doc.style.background="url('images/checka.gif')";
}
alert('test');
} |
I, personally, think that is has to do with the onkeyup call like the javascript doesn't know what to do. I am probably horribly wrong, but I tried. | Diablosblizz wrote: |
I have tried the alert('test'); and no go. I don't actually think that the script is being called properly. Here is what I did:
| Code: | function checkpasswords(theForm) {
doc = document.getElementById('password');
if (theForm.password.value != theForm.password2.value) {
doc.style.background="url('images/checkx.gif')";
}
else
{
doc.style.background="url('images/checka.gif')";
}
alert('test');
} |
I, personally, think that is has to do with the onkeyup call like the javascript doesn't know what to do. I am probably horribly wrong, but I tried. |
Two things:
Try putting the alert('test'); at the beginning of your function, to make sure there isn't an error that stops the function.
Give us the code of the form. Or is it exactly as Star Wars Fanatic posted?K, I've found the problem.
You had your ids all set wrong, in fact, your form didn't even have one.
This is tested and works, however, you may want to change where you display the image, as it looks quite silly right now:
Javascript:
| Code: |
function checkpasswords() {
theForm = document . getElementById ( 'Form1' ) ;
doc = theForm . password ;
if (theForm . password.value != theForm . password2 . value) {
doc . style . background = "url('images/checkx.gif')" ;
}
else {
doc . style . background = "url('images/checka.gif')" ;
}
} |
And Form:
| Code: |
<form action="register.php?page=register" method="post" name="Form1" id="Form1">
<table width="100%" cellspacing="2" cellpadding="0">
<tr>
<td colspan="3" style="height:20px; font-weight:bold;">Account Options</td>
<td rowspan="6" style="vertical-align:top; padding:6px;">The following fields are required.</td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" size="45" name="username"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" size="45" name="password" id="password" onkeyup="javascript: checkpasswords();" /></td>
</tr>
<tr>
<td>Password Again:</td>
<td><input type="password" size="45" name="password2" id="password2" onkeyup="javascript: checkpasswords();" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" size="45" name="email"/></td>
</tr>
</table><br />
<center><input type="submit" value="Register"></center></td>
</form> |
The form you can change, but you have to have keep the ids of the form itself, and the two password fields.
Let us know if you need to change some things and it breaks it somehow. Woot, you are my life saver! One question though, is there anyway I can wait until both fields are filled before it checks? I figure that using an if would do it well, but I can't seem to implement it. I figure that if the field is filled that the script would do nothing until the second field is filled.
Also, after some image editing the images it doesn't look silly anymore. Or, that's at least my perspective.
Thank you again!
Change the code to this:
| Code: |
function checkpasswords() {
theForm = document . getElementById ( 'Form1' ) ;
doc = theForm . password ;
if (theForm.password2.value != '' && theForm.password.value != ''){
if (theForm . password.value != theForm . password2 . value) {
doc . style . background = "url('images/checkx.gif')" ;
}
else {
doc . style . background = "url('images/checka.gif')" ;
}
}
} |
| Diablosblizz wrote: |
| Also, after some image editing the images it doesn't look silly anymore. Or, that's at least my perspective. |
Sorry, didn't mean to be so forceful, it was just my opinion. And you are welcome, I'm glad to help.
| Stubru Freak wrote: |
Change the code to this:
| Code: | function checkpasswords() {
theForm = document . getElementById ( 'Form1' ) ;
doc = theForm . password ;
if (theForm.password2.value != '' && theForm.password.value != ''){
if (theForm . password.value != theForm . password2 . value) {
doc . style . background = "url('images/checkx.gif')" ;
}
else {
doc . style . background = "url('images/checka.gif')" ;
}
}
} |
|
That would be it, the thing you would be adding is the iif (theForm.password2.value != '' && theForm.password.value != '') which checks if both password fields have something in them before checking if they match.Okay, thanks guys! Last question, is it possible for Javascript to visit a page, get the text from the page (will just be yes or no) and then do an if to show an image. I'm trying to make the form check if the username is already in use, and do the same usage of the passwords.
Thanks, and kind regards.
Yes and no.
Lol, that may not be what you're looking for, but it is true.
You would use JavaScript in conjunction with PHP using something called AJAX.
If you would like to do that, it will take a bit of experience in both JavaScript and PHP.
Here is a basic tutorial that will get you up and running with exactly the sort of thing you want.
What you will need is a PHP script to interface with where ever the usernames are being stored to check if they are the same.
And from what you are saying, are you storing the usernames and passwords in text files? AJAX is a bit too complex for me at this time. Heh, I am still learning Javascript let alone learn a whole different language. I've googled a bit and haven't came up with anything so I guess it's impossible without AJAX. Perhaps I will learn it at a later data, but for now I am unable.
Still, thank you very much.
onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.
I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it?
| Diablosblizz wrote: |
AJAX is a bit too complex for me at this time. Heh, I am still learning Javascript let alone learn a whole different language. I've googled a bit and haven't came up with anything so I guess it's impossible without AJAX. Perhaps I will learn it at a later data, but for now I am unable.
Still, thank you very much. |
AJAX isn't another language. You just use something called an XMLHttpRequest in Javascript to do exactly what you want: get a page from the internet.
Most people who have trouble with AJAX don't know exactly what they want, they just want to use AJAX, and then they get in trouble. | jmlworld wrote: |
onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.
I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it? |
I tested it in Firefox, and it works, lol. | Star Wars Fanatic wrote: |
| jmlworld wrote: | onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.
I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it? |
I tested it in Firefox, and it works, lol. |
May be you are using different version of FF. I'm Using ForeFox the latest stable 2.0.0.14. I think Firefox 3 will fully support this. | jmlworld wrote: |
| Star Wars Fanatic wrote: | | jmlworld wrote: | onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.
I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it? |
I tested it in Firefox, and it works, lol. |
May be you are using different version of FF. I'm Using ForeFox the latest stable 2.0.0.14. I think Firefox 3 will fully support this. |
Did you test it? Because I am using the latest stable version of Firefox 2...
Check out the working version here:
http://www.swf.frih.net/PHP%20Testing%20Site/test.html
Working in Firefox... | Star Wars Fanatic wrote: |
| jmlworld wrote: | | Star Wars Fanatic wrote: | | jmlworld wrote: | onkeyup only works on IE5+, but not on Firefox. I've personally the Starwars Fanatic solution, and it worked only on IE, not on FireFox.
I'm sure I've seen a solution for this though, but I totally forgot it. Can you please help me about this as I wanted to know about it? |
I tested it in Firefox, and it works, lol. |
May be you are using different version of FF. I'm Using ForeFox the latest stable 2.0.0.14. I think Firefox 3 will fully support this. |
Did you test it? Because I am using the latest stable version of Firefox 2...
Check out the working version here:
http://www.swf.frih.net/PHP%20Testing%20Site/test.html
Working in Firefox... |
It's working, may be it was something wrong with my code or Test server configuration..
Thank you SWF. | Stubru Freak wrote: |
Change the code to this:
| Code: | function checkpasswords() {
theForm = document . getElementById ( 'Form1' ) ;
doc = theForm . password ;
if (theForm.password2.value != '' && theForm.password.value != ''){
if (theForm . password.value != theForm . password2 . value) {
doc . style . background = "url('images/checkx.gif')" ;
}
else {
doc . style . background = "url('images/checka.gif')" ;
}
}
} |
|
In jQuery this would be for example:
| Code: |
var password = $('#password');
var password2 = $('#password2');
password.add(password2).change(function() {
if ( password.val() == password2.val() ) {
password.css('background', 'url("images/checka.gif")');
} else {
password.css('background', 'url("images/checkx.gif")');
}
}); |
I prefer to read about jQuery, it is lots of smarter way to write javascript. http://jquery.comHmm, I thought AJAX was another language. Maybe I'll look into it after I don't have so much to do with schools and stuff. Culminating project and exams don't mix too well. 
The onkeyup worked perfectly for FF2+ and IE7. Though, I didn't really like the onkeyup too too much so I changed it to check after the field has been fully changed.
Thank you a lot for your help! | SamiTheBerber wrote: |
| Stubru Freak wrote: | Change the code to this:
| Code: | function checkpasswords() {
theForm = document . getElementById ( 'Form1' ) ;
doc = theForm . password ;
if (theForm.password2.value != '' && theForm.password.value != ''){
if (theForm . password.value != theForm . password2 . value) {
doc . style . background = "url('images/checkx.gif')" ;
}
else {
doc . style . background = "url('images/checka.gif')" ;
}
}
} |
|
In jQuery this would be for example:
| Code: | var password = $('#password');
var password2 = $('#password2');
password.add(password2).change(function() {
if ( password.val() == password2.val() ) {
password.css('background', 'url("images/checka.gif")');
} else {
password.css('background', 'url("images/checkx.gif")');
}
}); |
I prefer to read about jQuery, it is lots of smarter way to write javascript. http://jquery.com |
For simple tasks like this, jQuery is way too complicated, and also harder to read. And are you sure your code does the same? Does it check if both are filled in first? | Stubru Freak wrote: |
| For simple tasks like this, jQuery is way too complicated, and also harder to read. And are you sure your code does the same? Does it check if both are filled in first? |
No matter how simple the task is. I personnally find jQuery to be much simpler to read.
Yes, the code is a bit different, just replace | Code: |
| if ( password.val() == password2.val() ) |
with this | Code: |
| if ( password.val() == password2.val() && password.val() && password2.val()) |
change() should be keyUp(). if I remember the function correctly. | SamiTheBerber wrote: |
| Stubru Freak wrote: | | For simple tasks like this, jQuery is way too complicated, and also harder to read. And are you sure your code does the same? Does it check if both are filled in first? |
No matter how simple the task is. I personnally find jQuery to be much simpler to read.
Yes, the code is a bit different, just replace | Code: | | if ( password.val() == password2.val() ) |
with this | Code: | | if ( password.val() == password2.val() && password.val() && password2.val()) |
change() should be keyUp(). if I remember the function correctly. |
No it isn't, that would say the passwords don't match, even though no password is filled in. You want to have it show nothing until both passwords are filled in. That's an extra if structure, so your jQuery gets almost just as big as a normal Javascript code, only harder to read for most people.
Also, it requires a whole library of extra code, so more bandwidth, and the possibility of bugs or browser incompatibilities being in jQuery instead of your code.
So for tasks like this, you should really go for just Javascript. Of course when he wants to use AJAX, jQuery can become useful.thanx a lot friend i need that kind of code
im new java buti will teach very soon
