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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy onChange - focus problem

    Hello,

    I am a newbie that is trying to validate a form as user completes each line. I have code working correctly in that if entry is not valid I set focus to the form element so that user can re-enter. The problem is that when I use onChange to call the "check" function, focus is indeed given but the keyboard is inactive. I have to use the mouse to select form field. In other words form is selected in right spot but I can't delete the incorrect entry using the keyboard - the mouse has to be moved to the form field and clicked to "activate" keyboard or if the mouse is just clicked anywhere keyboard is now "active"-but of course focus is lost then. If I use onBlur to call the function, focus is set and keyboard active but onBlur causes other problems I don't need. Is there something I am missing about onChange? Can anyone else duplicate this? I am testing out script on IE6. If more info is needed let me know. TIA.

    Chris

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Please post a simple test page so that we can see your problem in action.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, here is sample of code. Enter something other than a number and focus is "locked". I found that if I select and focus on another object and then select and focus on the form object I want, everything seems to be OK

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    <script language="JavaScript">
    // this is test script to add up number of students attending event
    function Checker(numb2chk)
    {
    var Count=0
    var test = numb2chk.substring(Count,Count+1)
    if (test.match(/^[0-9]+$/)||test=="" ||test==" "){
    alert ("First digit is OK = "+test)
    var test1=test}
    else
    { alert ("First digit is not OK = "+test1)
    return false
    }
    Count=Count+1
    test = numb2chk.substring(Count,Count+1)
    if (test.match(/^[0-9]+$/)||test=="" ||test==" "){
    alert ("2nd digit is OK = "+test)
    if ((test1==""||test1==" " ||test1=="0")&& (test==""||test==" "||test=="0")){
    alert ("Both digits are blank")
    return false}
    else
    {return true}}
    else
    { alert ("2nd digit is not OK = "+test)
    return false}

    }

    function Check_num(number2chk,var_name)
    {
    if (Checker(number2chk)==false)
    {alert("The value entered is not valid. Please enter an Integer between 1 and 99")
    //this is where I have problem with focus
    //if I add these next two lines things seem to work!
    //testform.kids3.select()
    //testform.kids3.focus()
    var_name.select()
    var_name.focus()
    }
    else
    {window.document.testform.kids2.value=parseInt(number2chk,10)+parseInt(window.document.testform.kids 2.value,10)}

    }
    </script>

    </head>

    <body>
    <form name='testform'>
    <table border="1" width="35%">
    <tr>
    <td width="75">Enter #<input type='text' size='2' name='kids1' maxlength="2" tabindex='9' value='' onChange="Check_num(testform.kids1.value,testform.kids1)"/></td>
    <td width="75">Total is <input type='text' size='2' name='kids2' maxlength="2" tabindex='9' value='12' /></td>
    <td><input type='text' name='kids3'</td>
    </tr>
    </table>
    </form>
    </body>

    </html>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I found out that it needs a little delay to set focus

    var_name.select()
    setTimeout("document.testform."+var_name.name+".focus()",1);

    but are you sure you want to use onchange? if the user does not correct the erroneous entry, onchange is not triggerred anymore, thus the user can do away with the checking.

    PS
    You can simplify your onchange code by using the this keyword which references the current object

    #<input type='text' size='2' name='kids1' maxlength="2" tabindex='9' value='' onChange="Check_num(this.value, this)" />
    Last edited by glenngv; 01-07-2004 at 01:29 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    if u used return condition, do it full, i guess... I have not verify but try:

    onChange="return Check_num(testform.kids1.value,testform.kids1)"

    Anyway... I would advise you to use a form validate better in form tag, onsubmit, then in any element's handler...

    <form onsubmit=" return Check_num(testform.kids1.value,testform.kids1)">

    and... maybe is a good ideea to give a focus...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Glenn And Kor. I will certainly use your advice. Most helpful - obviously you both are wise and generous!


  •  

    Posting Permissions

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