Solved

Blur event

Posted on 2002-05-28
16
1,059 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

708 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

16 Experts available now in Live!

Get 1:1 Help Now