Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    SxN
    SxN is offline
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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

  • #2
    SxN
    SxN is offline
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Dumb question or too complicated?

    SxN

  • #3
    New Coder
    Join Date
    Aug 2009
    Location
    Dirty Jersey
    Posts
    30
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #4
    New Coder
    Join Date
    Aug 2009
    Location
    Dirty Jersey
    Posts
    30
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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

  • #5
    SxN
    SxN is offline
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #6
    New Coder
    Join Date
    Aug 2009
    Location
    Dirty Jersey
    Posts
    30
    Thanks
    0
    Thanked 2 Times in 2 Posts
    nm, im an idiot..

    troubleshooting

  • #7
    New Coder
    Join Date
    Aug 2009
    Location
    Dirty Jersey
    Posts
    30
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #8
    SxN
    SxN is offline
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    TooCrooked, you're totally right!

    Thanks a lot,
    SxN

  • #9
    New Coder
    Join Date
    Aug 2009
    Location
    Dirty Jersey
    Posts
    30
    Thanks
    0
    Thanked 2 Times in 2 Posts
    man... no "forum" thanks?! geez.. (:
    Last edited by TooCrooked; 03-05-2012 at 11:23 PM.

  • Users who have thanked TooCrooked for this post:

    SxN (03-06-2012)

  • #10
    SxN
    SxN is offline
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #11
    SxN
    SxN is offline
    New Coder
    Join Date
    Aug 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK, found the BIG green button...

    Now I have to find how to mark the issue "solved"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •