Onblur Event Not Working

[Elemental]

Hey Folks, On a beautiful day in sunny California I'm in my office and %$@#!*&.....I'm working on a re-type / confirm email input box and I thought I would use the onBlur() event as follows, please note I'm using DOCTYPE HTML 4.01:java script: (within the head tags)

<script language="JavaScript" type="text/JavaScript"><!--function confirmEmail(theSame) {    if (theSame.textfield4.value != theSame.textfield5.value)    { 	  alert('Please check or re-type your email address'); 	  return false;    } else { 	  return true;    } }//--></script>

I placed the call in the Confirm E-mail input field so that when the user tabs out, or leaves the field, if the email addresses don't match they would get the alert message.HTML: (within the body tags)

<form name="form1" method="post" action="../formMail.cgi"><p>E-mail:   <input type="text" name="textfield4" size="30" maxlength="30"></p><p>Confirm E-mail:   <input type="text" name="textfield5" onBlur="confirmEmail(this);" size="30" maxlength="30"></p></form>

I took a look at the onBlur() example on the W3Schools site but not being one that compares the two fields ... What am I missing here?Peace,Elemental

[jesh]

When you pass "this" to the onblur event handler in your input element, you are passing a reference to the input element, not the form:

<input type="text" name="textfield5" onBlur="confirmEmail(this);" size="30" maxlength="30">

Either, modify your HTML so that you pass a reference to the form:

<input type="text" name="textfield5" onBlur="confirmEmail(this.form);" size="30" maxlength="30">

Or, modify your java script:

function confirmEmail(theInput) {	var theForm = theInput.form;	if(theForm.textfield4.value != theForm.textfield5.value)	{		alert('Please check or re-type your email address');		return false;	} else {		return true;	}}

[Elemental]

When you pass "this" to the onblur event handler in your input element, you are passing a reference to the input element, not the form:

<input type="text" name="textfield5" onBlur="confirmEmail(this);" size="30" maxlength="30">

Either, modify your HTML so that you pass a reference to the form:

<input type="text" name="textfield5" onBlur="confirmEmail(this.form);" size="30" maxlength="30">

Or, modify your java script:

function confirmEmail(theInput) {	var theForm = theInput.form;	if(theForm.textfield4.value != theForm.textfield5.value)	{		alert('Please check or re-type your email address');		return false;	} else {		return true;	}}

jesh, Thank you for the reply it's appreciated.If I understand you correctly, I mean to reference the input field and not the form as a whole that's why I targeted the input field with "this". My intent is for the "confirmEmail(theSame)" function to run when the user leaves, or tabs out of, that input field.Are you saying I need to refference the input field via the form and not by itself?Peace,Elemental

[jesh]

Here's the first part of your original java script:

function confirmEmail(theSame) {	if (theSame.textfield4.value != theSame.textfield5.value)	...}

This is trying to find the "textfield4" property of the object that you passed to the function, looking at its value property and then comparing that to the value property of the "textfield5" property of the passed object.If you pass "this" from the context of an input element, "theSame" is going to be an input element. So the code, as written, is trying to find a property of that input element called "textfield4" and another called "textfield5". Those aren't actually properties of the input element at all, they're properties of the input element's parent form element. That's why you would need to either modify your HTML so that you pass a reference to the form element to your function, or you modify your javascript so that you get the form element from the input element before you start your comparisons.Does that help?

[Elemental]

Here's the first part of your original java script:

function confirmEmail(theSame) {	if (theSame.textfield4.value != theSame.textfield5.value)	...}

This is trying to find the "textfield4" property of the object that you passed to the function, looking at its value property and then comparing that to the value property of the "textfield5" property of the passed object.If you pass "this" from the context of an input element, "theSame" is going to be an input element. So the code, as written, is trying to find a property of that input element called "textfield4" and another called "textfield5". Those aren't actually properties of the input element at all, they're properties of the input element's parent form element. That's why you would need to either modify your HTML so that you pass a reference to the form element to your function, or you modify your javascript so that you get the form element from the input element before you start your comparisons.Does that help?

jesh, Thank you, again, for the reply.For the record, I changed the html code to (this.form) and it worked like a charm.I'm not getting everything you said, I do understand the parent / child relationship but not how the argument "theSame" becomes an input element, I thought it acted as a reference, connecting the two input elements.If I understood you correctly, you mentioned that the argument takes on the value of an input field by my use of "this" as the argument within the function call but how that works I don't understand, yet.I'm sure it has nothing to do with your explanation and everything to do with my lack of knowledge on the subject which I'm working to rectify.I had originally tried (theSame) in the call but when that didn't work, and (this), which I thought it referenced the input element directly, didn't work either I called out for help.Again, thank you for your help, much appreciated, always open to learn new things.Peace,Elemental