Jump to content

Can't Reset Form


Elemental

Recommended Posts

Hey Folks, Not sure if this post should go here, but...I now have the re-type / confirm email validation script working, thanks to "jesh":

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

But I wanted the input field to regain or maintain its Focus if it didn't validate so I added the following right after the alert:

document.getElementById("email2").focus();

Here's the html for the input fields:

<p>E-mail:   <input id="email1" type="text" name="textfield4" size="30" maxlength="30"></p><p>Confirm E-mail:   <input type="text" name="textfield5" onBlur="confirmEmail(this.form);" size="30" maxlength="30" id="email2"></p>

However, now, unless the fields validate, I can't Reset the form, the focus keeps going back to the re-type / confirm email field. This is happening, although with variations, in IE, Opera and Safari but not in FF.If I remove the code I added, the alert fires but the user can move on through the form (All Browsers) without having to make the correction. I suppose I could add an onSubmit event to recheck the form fields but I was hoping to get an explanation as to why this could be happening and perhaps a suggestion on how to correct it.Peace,Elemental

Link to comment
Share on other sites

I don't know if I understood your problem exactly, but here's something you can do and we can see if it helps.Just save the true or false and don't use it until you have reached the end of the function.Also, use getElementById() rather than other methods to access the form elements.

function confirmEmail() {  var returnValue;  if (document.getElementById("email1").value == document.getElementById("email2").value) {	returnValue = true;  } else {	alert('Please check or re-type your email address');	returnValue = false;  }  document.getElementById("email2").focus();  return returnValue;}

Link to comment
Share on other sites

I don't know if I understood your problem exactly, but here's something you can do and we can see if it helps.Just save the true or false and don't use it until you have reached the end of the function.Also, use getElementById() rather than other methods to access the form elements.
function confirmEmail() {  var returnValue;  if (document.getElementById("email1").value == document.getElementById("email2").value) {	returnValue = true;  } else {	alert('Please check or re-type your email address');	returnValue = false;  }  document.getElementById("email2").focus();  return returnValue;}

Ingolme, Thanks for the reply, Señor, it's appreciated.(Just an FYI, I'm working on an existing site DOCTYPE HTML 4.01 created with Dreamweaver MX)I sometimes explain things to much and it causes more confusion, yeah that's me.All I want to do is to confirm the email address before the user tabs out of the confirmEmail field and to be sure that the cursor stays in the confirmEmail field until the correction is made but I still want the Reset button to work regardless if the user made the correction or not. Is this a better explanation?Your code puts the focus on the confirmEmail field onLoad, and keeps it there (can't tab out of it) even though I have an onLoad="setFocus" event in the body tag to focus on the id="firstName" of the form, not sure how it's doing that.Are you placing the function call in the form tag or the input field?Peace,Elemental
Link to comment
Share on other sites

The function I gave you is supposed to fire with the same event you had at first.You haven't shown me how the Reset button works so I can't know why this is conflicting.

Link to comment
Share on other sites

The function I gave you is supposed to fire with the same event you had at first.You haven't shown me how the Reset button works so I can't know why this is conflicting.
Ingolme, Thanks again amigo, and I hope this makes sense.Okay, try this http://www.treekingtrees.com/test/contact.htmI placed the code you gave me within the page. I did notice that once I did that the onLoad="setFocus" worked but the cursor's still getting stuck in the confirmEmail field, even with no data in the form; if I refresh the page the focus stays in the confirmEmail fieldThe above mentioned is happening in IE, Opera and Safari (however, the refresh issue is only happening in IE and then only if the cursor is already in the confirmEmail field)Peace,Elemental
Link to comment
Share on other sites

Oh, of course. That's what happens when you tell it to focus on the field as soon as it is blurred.I think it would be better if the correction was done upon submitting the form instead.

document.getElementById("cntcForm").onsubmit = function(e) {  var returnValue = true;  if (document.getElementById("email1").value != document.getElementById("email2").value) {	alert('Please check or re-type your email address');	returnValue = false;  }  document.getElementById("email2").focus();  return returnValue;}

But rather than an alert box, I'd suggest having a special warning div at the top or bottom of the form that fills in with the information of what form elements aren't correct.

Link to comment
Share on other sites

Oh, of course. That's what happens when you tell it to focus on the field as soon as it is blurred.I think it would be better if the correction was done upon submitting the form instead.
document.getElementById("cntcForm").onsubmit = function(e) {  var returnValue = true;  if (document.getElementById("email1").value != document.getElementById("email2").value) {	alert('Please check or re-type your email address');	returnValue = false;  }  document.getElementById("email2").focus();  return returnValue;}

But rather than an alert box, I'd suggest having a special warning div at the top or bottom of the form that fills in with the information of what form elements aren't correct.

Ingolme, Thanks again for the reply and all your help.I thought an onSubmit would be the way to go but I wanted to create an "alert" right off the bat and have the onSubmit do the Form Validation instead; I could do both. I too thought of creating a div, like you said, but next to the field and have it show up if need be. I would like, in time to have the whole field selected, like if highlighted, but that will have to wait till I gain a little more knowledge of this stuff.Thanks again, I'll give your suggestion a shot.Peace,Elemental
Link to comment
Share on other sites

You can do anything within the onsubmit event handling function. Test all the things and then do something on the page based on what data is not valid.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...