Solved

Blur event

Posted on 2002-05-28
16
1,060 Views
Last Modified: 2007-11-27
I have a form on wich I have a textbox, that on the event OnBlur goes and check, using JavaScript, that the field is not empty, and checks an array that returns other data, on that form there's also a cancel button, how do I know that the user clicked the cancel button, and not the submit button or any other place on the site.
The way it is now, is that if the user clicks outside the textbox a confirmation comes up asking if you want to save the information, but what I want is that if the user clicks the cancel button a confirmation appears and ask "are you sure to cancel?".

Can this be done? if so, how?
0
Comment
Question by:lingtrin
  • 6
  • 3
  • 3
  • +2
16 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 7039708
show us the code you are using for the textbox and for the cancel button.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 7039711
I don't think that you can; onBlur is not conditional you either have focus or you don't, and once you try to click on the cance button, you have lost focus.

That is why I prefer to call all of my validation code at once (it is also less annoying to the user).

Fritz the Blank
0
 

Author Comment

by:lingtrin
ID: 7039762
So, is not possible to know wich button the user clicked after a OnBlur event?
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7039769
again, I can't know exactly what you are trying to do without seeing the code ... but you can certainly know when the cancel button is clicked ...
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 7039773
You can determine what key is pressed, but it will still fire the onBlur event, i.e., you cannot conditionally fire the onBlur event. You can, if you like, put conditional logic in your code that tests for that perhaps, but I haven't tested doing so.

Fritz the Blank
0
 

Author Comment

by:lingtrin
ID: 7039840
I have something like this on my code:
<script lamguage="javascript">
function validate(){
if (document.form1.text1.value == ''){
    if (confirm('do you want to send the info?'){
        document.form1.submit()}
}
//a lot of other things happening here
}
</script>
<form name="form1" method="post" action="page2.asp">
<input type="text" name="text1" onBlur=validate()>
<input type="submit" name="submit">
<input type="button" value="cancel" name="cancel1" onClick="JavaScript:window.parent.location = 'page1.asp'">
</form>

This is just a fragment of my code, but I think with this I can explain better what I want, wich is that if the user leaves the textbox blank, but clicks the cancel button, instead of asking "do you want to send the info?" and submiting the form, the confirm ask's, "are you sure to cancel"

How can this be done?
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7039864
I see now ...
In theory what you are asking for can but done, but it would be very klugy to maintain.  Therefore I agree with FTB on this one ... I would do all of the validation in the onSubmit handler of the form:


<form name="form1" method="post" action="page2.asp" onSubmit='return(validate(this));'>


then change your validate function:

function validate(theForm){
   if (theForm.text1.value != ''){
      if (confirm('do you want to send the info?')){
          return true;
      }
   }
   else {
      alert("text1 is required");
   }
   return false;
}
0
 
LVL 4

Expert Comment

by:DJDoug
ID: 7039920
Or, try it this way.

<SCRIPT language=javascript>
function validate() {
if (confirm("Do you want to send the info?")==false){
  return false;
  }else{
  // All your other stuff...
  return true;
  }
}
</SCRIPT>
<form name="form1" method="post" action="page2.asp" onsubmit="return validate();">
<input type="text" name="text1" onBlur=validate()>
<input type="submit" name="submit">
<input type="button" value="cancel" name="cancel1" onClick="javascript:if (confirm('Are you sure you want to cancel?')){window.parent.location.href='page1.asp'}">
</form>
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 4

Expert Comment

by:DJDoug
ID: 7039928
Oops, take out the "onBlur=validate()" in "text1" above.  ...My bad with the cut/paste.  Thus, it should look like this:

<SCRIPT language=javascript>
function validate() {
if (confirm("Do you want to send the info?")==false){
  return false;
  }else{
  // All your other stuff...
  return true;
  }
}
</SCRIPT>
<form name="form1" method="post" action="page2.asp" onsubmit="return validate();">
<input type="text" name="text1">
<input type="submit" name="submit">
<input type="button" value="cancel" name="cancel1" onClick="javascript:if (confirm('Are you sure you want to cancel?')){window.parent.location.href='page1.asp'}">
</form>
0
 

Author Comment

by:lingtrin
ID: 7039950
Thanks for your answers, but the problem here is that the client want's to validate each row, this is if the code that the user input's is valid, and can be sell to a specified client, and if all this is true, then return the name of the product.

That's why I can't do it on the form, I have to do it when the text box fires the OnBlur event.

Thanks any way
0
 
LVL 4

Expert Comment

by:DJDoug
ID: 7039972
You're saying there's another box somewhere that is dependent on text1's data??

Why not use the onchange event instead of onblur?  Then you wouldn't have to make sure that text1 has the focus to fire your onblur data validation.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7039977
ok then ... here is one way to do it.



create a global cancel flag:

<HEAD>
<SCRIPT language='javascript'>
 var gCancel = false;
</script>
</head>



on the cancel button, set the flag to true:

<input type="button" value="cancel" name="cancel1" onClick="gCancel=true;self.parent.location='page1.asp';">



then delay the onBlur:

<input type="text" name="text1" onBlur='setTimeout("validate()",10);'>



then check the flag in the function:

function validate(){
   if ( document.form1.text1.value=='' && gCancel==false ){
      if (confirm('do you want to send the info?'){
         document.form1.submit();
      }
   }
   gCancel = false;
}

0
 
LVL 33

Expert Comment

by:knightEknight
ID: 7039988
actually ... since you are leaving the page when the cancel button is clicked, it might be sufficient just to delay the onBlur:

<input type="text" name="text1" onBlur='setTimeout("validate()",10);'>
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 100 total points
ID: 7039990
... and none of that other stuff is necessary.
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 7040168
Why don't you ask your client why he wants that? You'd do better if you adviced against this as it is very annoying to the enduser. And a cool gadget is not always functional for business.

CJ
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 7040212
Really,

Write all of you validation code in a series of functions that return error messages and false or a true. Then for each page, make a final validation script that calls and passes parameters to each of you smaller scripts. That way you can reuse your code, maintain it in one place, and save the user loads of irritation.

Fritz the Blank
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now