Go Back   CodingForums.com > :: Client side development > JavaScript programming > DOM and JSON scripting

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-26-2012, 12:09 AM   PM User | #1
SxN
New Coder

 
Join Date: Aug 2010
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
SxN is an unknown quantity at this point
Taming events (Firefox)

Hi All,

I am confronting a very interesting problem. First here is a code snippet:

Code:
<html>
<head>
<script type="text/javascript">
function phnA(evt) // auxiliary exit refocus function
{ evt = (evt) ? evt : event;
  var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
  if (charCode == 13 || charCode == 3)
  { document.getElementById('ddord').focus();
    return;
  }
}

function phnF() // format phone number
{ var lphnum = document.getElementById('phn').value.replace('(','').replace(')','').replace('-','');
  if (lphnum.substr(0,1) =='0' || lphnum.substr(0,1) == '1')
    lphnum = phnum;
  else
    for (var i=0; i<lphnum.length; i++)
      if (lphnum.substr(i,1) < '0' || lphnum.substr(i,1) > '9')
      { lphnum = phnum;
	    break;
      }
  phnum = lphnum;
  if (lphnum.length > 0) lphnum = '(' + lphnum;
  if (lphnum.length > 4) lphnum = lphnum.substr(0,4) + ')' + lphnum.substr(4);
  if (lphnum.length > 8) lphnum = lphnum.substr(0,8) + '-' + lphnum.substr(8);
  document.getElementById('phn').value = lphnum;
}

function cstC() // customer check
{ if(document.getElementsByName('cst')[0].value)
    if(document.getElementById('phn').value || document.getElementById('eml').value) bring('eml');
    else document.getElementById('eml').focus();
  else
  { alert('Please input customer\'s name');
    document.getElementsByName('cst')[0].focus();
  }
}

function emlC() // email check
{ eml=document.getElementById('eml').value;
  if(eml && eml.indexOf('@') > 0 && eml.indexOf('@')<eml.length-1 &&
     eml.indexOf('.')>0 && eml.substr(eml.length-4,2).indexOf('.')!=-1 && eml.substr(eml.length-2).indexOf('.')==-1 || !eml)
    if(document.getElementsByName('cst')[0].value)
      if(document.getElementById('phn').value) bring('o1');
	  else bring('phn');
    else
	{ alert('Please input customer\'s name');
	  document.getElementsByName('cst')[0].focus();
	}
  else
  { alert('Malformed email address');
    document.getElementById('eml').focus();
  }
}

function phnC() // phone check
{ if(document.getElementById('phn').value && document.getElementById('phn').value.length != 13) document.getElementById('phn').value = '';
  if(document.getElementsByName('cst')[0].value)
    if(document.getElementById('phn').value)
	  if(!document.getElementById('eml').value) bring('o1');
	  else document.getElementsByName('o1')[0].focus();
	else
	  if(!document.getElementById('eml').value)
	  { alert('Please provide phone number or email address');
	    document.getElementById('phn').focus();
	  }
	  else document.getElementsByName('o1')[0].focus();
  else
  { alert('Please input customer\'s name');
	document.getElementsByName('cst')[0].focus();
  }
}

function bring(next)
{ // brings data from DB, then
  document.getElementById(next).focus();
}
</script>

</head>
<body>
...
<select id=ddord onChange="pshow(this.value)" style="visibility:hidden"></select>
<br>
<input name=cst onKeyPress="phnA(event)" onBlur="cstC()" size=60>
<br>
<input id=eml onKeyPress="phnA(event)" onBlur="emlC()" size=60><input id=phn onInput="phnF(event)" onBlur="phnC()" onKeyPress="phnA(event)" size=13>
<input name=o1 onChange="addO(1)" style="width:100%">
</body>
</html>
What I want to accomplish is to validate the entry for name, email and phone. If they look OK, I allow advancing to the next entry field by using enter/return or the default tab. The user may as well use the mouse.

If I have a pair user/email or user/phone, I try to bring from a database whatever other elements are available, among them past orders in ddord. This is shown only if it has something; when is created is hidden.
addO is irrelevant here.

The trick used is to move the focus to ddord and let onBlur do the real work (including moving the focus to the real destination).

Now, the problem: I put something in the first field (name), press enter, and nothing happens.

If I add an alert(charCode); in phnA() before the if, all works well. Why is this happening and how to solve my problem?

Thanks,
SxN
SxN is offline   Reply With Quote
Old 02-29-2012, 02:33 PM   PM User | #2
SxN
New Coder

 
Join Date: Aug 2010
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
SxN is an unknown quantity at this point
Dumb question or too complicated?

SxN
SxN is offline   Reply With Quote
Old 03-03-2012, 07:00 PM   PM User | #3
TooCrooked
New Coder

 
Join Date: Aug 2009
Location: Dirty Jersey
Posts: 30
Thanks: 0
Thanked 2 Times in 2 Posts
TooCrooked is an unknown quantity at this point
i took a quick second to try and understand how this works. one of the problems i ran into is ambiguity. i can't easily determine what "cst" is supposed to represent (for one example). is it what you expect to be the "email" field? is it some phone field?

i don't want to have to reverse engineer someone's work to troubleshoot it when they're able to directly disambiguate the relationships in the code.
TooCrooked is offline   Reply With Quote
Old 03-03-2012, 07:03 PM   PM User | #4
TooCrooked
New Coder

 
Join Date: Aug 2009
Location: Dirty Jersey
Posts: 30
Thanks: 0
Thanked 2 Times in 2 Posts
TooCrooked is an unknown quantity at this point
if you gave me exact function and field names, and gave me a step by step guide on how to walk the code, i could possibly provide insight

e.g.:

1) put cursor into "cst" field
2) type ..
3) put cursor into "ol" field
4) type ..
5) x should happen
TooCrooked is offline   Reply With Quote
Old 03-04-2012, 02:01 PM   PM User | #5
SxN
New Coder

 
Join Date: Aug 2010
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
SxN is an unknown quantity at this point
TooCrooked, thanks for your reply.

onLoad the focus moves automatically on cst, which is customer's name. This is not shown here.

After typing the name, the user should advance to the next field, by pressing enter, return, tab, or with the mouse. tab's role is built in, so there is no special treatment, the other two keys are recognized by phnA().

With tab the next field is eml (email address), with mouse click depends on user's will. With enter and return the next field is artificially set on ddord, which is hidden at this point.

Checking that the field is not left empty is done onBlur by cstC(). Also, here is where the definitive decision regarding the new focus is taken.

In cstC() is considered the possibility that the user came back in the cst field after filling some other fields. If this is the case, there is an attempt to bring from database whatever is known about the customer. For that to happen, I need a pair cst+phn (phone number) or cst+eml. If I succeed retrieving something from DB, ddord becomes visible, and existing order numbers are placed there (other fields, not mentioned, are activated too). Focus goes next on ddord. Otherwise, focus is moved to the next field, which is eml.

So, that's the general pattern:
- input fields value
- onBlur() check validity and attempt data retrieval from DB, also decide where to focus next (next natural field, or ddord). If validity test fails, go back on the current field
- to implement return and enter I use phnA()

The "natural" succession of fields is cst, eml, phn, o1
This sequence may be broken if data is brought from DB, in which case the focus moves at ddord. If there is selected an existing order for review (from ddord), bring() fills the relevant fields, then moves focus as instructed. If it is a new order, the natural succession resumes.

Thanks,
SxN
SxN is offline   Reply With Quote
Old 03-04-2012, 08:08 PM   PM User | #6
TooCrooked
New Coder

 
Join Date: Aug 2009
Location: Dirty Jersey
Posts: 30
Thanks: 0
Thanked 2 Times in 2 Posts
TooCrooked is an unknown quantity at this point
nm, im an idiot..

troubleshooting
TooCrooked is offline   Reply With Quote
Old 03-04-2012, 08:34 PM   PM User | #7
TooCrooked
New Coder

 
Join Date: Aug 2009
Location: Dirty Jersey
Posts: 30
Thanks: 0
Thanked 2 Times in 2 Posts
TooCrooked is an unknown quantity at this point
figured it out... mostly.

it works if you put an alert in there because when you clear the alert, cstC() is called as the result of onblur (put an alert in cstc there to see what i mean)

i would speculate that the reason

Code:
document.getElementById('ddord').focus();
isn't working is because the target element is hidden... how is it supposed to focus to a hidden element? i speculate that the script "stalls" in some way or basically quits at this point. it can't continue because it can't set focus to the hidden element, maybe? as a side effect of doing an alert, triggering "onblur" seems to "wake the script back up". i dont know, im guessing. but when i removed the visibility (or if you change the hidden element's style before you focus), everything works as expected.

Last edited by TooCrooked; 03-04-2012 at 08:42 PM..
TooCrooked is offline   Reply With Quote
Old 03-05-2012, 04:48 AM   PM User | #8
SxN
New Coder

 
Join Date: Aug 2010
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
SxN is an unknown quantity at this point
TooCrooked, you're totally right!

Thanks a lot,
SxN
SxN is offline   Reply With Quote
Old 03-05-2012, 12:51 PM   PM User | #9
TooCrooked
New Coder

 
Join Date: Aug 2009
Location: Dirty Jersey
Posts: 30
Thanks: 0
Thanked 2 Times in 2 Posts
TooCrooked is an unknown quantity at this point
man... no "forum" thanks?! geez.. (:

Last edited by TooCrooked; 03-05-2012 at 11:23 PM..
TooCrooked is offline   Reply With Quote
Users who have thanked TooCrooked for this post:
SxN (03-06-2012)
Old 03-06-2012, 01:24 AM   PM User | #10
SxN
New Coder

 
Join Date: Aug 2010
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
SxN is an unknown quantity at this point
OK, how do I "forum thank"?

I posted Q's in the past, I got the right pointers, I expressed my gratitude, but don't know how to make it "official".

SxN
SxN is offline   Reply With Quote
Old 03-06-2012, 01:26 AM   PM User | #11
SxN
New Coder

 
Join Date: Aug 2010
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
SxN is an unknown quantity at this point
OK, found the BIG green button...

Now I have to find how to mark the issue "solved"
SxN is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:22 AM.


Advertisement
Log in to turn off these ads.