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 14 of 14

Thread: setfocus()

  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    45
    Thanks
    8
    Thanked 0 Times in 0 Posts

    setfocus()

    Hi

    I can seem to figure out how to set the focus back on a form box with an invalid entry.

    Code:
    function isFilledNum(number) {
    
    	var number = parseInt(number.value)
    	
    
    if( number< 0 || number > 100 || isNaN(number) == true) 
    
    {
    alert("Enter a number between 0 and 100 ");
    setfocus(document.getElementById(this));
    
    }
    I get the error "Uncaught TypeError: Cannot call method 'focus' of null".

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    document.getElementById(this).focus(); might do it. I rarely use this for anything.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    45
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    document.getElementById(this).focus(); might do it. I rarely use this for anything.
    Returns

    Uncaught TypeError: Cannot call method 'focus' of null

    If i type in an invalid number.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    what is "this" meant to be referring to in your code?

    and why not
    Code:
    document.getElementById("whatever_the_actual_id_of_the_input_is").focus();
    ?

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Yeah, it really should be the actual id of the element. Pass it along as an argument.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    New Coder
    Join Date
    Feb 2013
    Posts
    45
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Would this still apply if i have several boxes that need verifying using the same function. i.e different test results. As each box is filled and clicked out of it calls the function to verify.

    What would the id be in this case as it changes every box as far as i know?

    I see it always reverts back to the 1st id used even if the 3rd or 4th box is wrong. Any way of making it change depending on box tested?
    Last edited by trancecommunity; 02-18-2013 at 09:29 PM.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Code:
    1 <input type ="text" id = "text1" onblur = "check(this)";><br>
    2 <input type ="text" id = "text2" onblur = "check(this)";><br>
    3 <input type ="text" id = "text3" onblur = "check(this)";><br>
    
    <script type = "text/javascript">
    function check (which) {
    var box = which.id;
    var val = which.value;
    // check that val is a number within a certain range
    alert ("You have checked box " + box + " whose value is " + val);
    if (val != "OK") {
    document.getElementById(box).focus();
    }
    }
    </script>
    var number = parseInt(number.value); // two variables with the same name! In any case it is not a good idea to use the word number which can be confused with Number().
    should be
    var num = Math.floor(number.value);

    parseInt() is used to convert numbers from one base to another, and if you use it you need to specify the radix (10).
    Last edited by Philip M; 02-18-2013 at 09:49 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New Coder
    Join Date
    Feb 2013
    Posts
    45
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Cheers for the reply but that doesnt setfocus back to the wrong box.

    edit. sorry i see what you mean there when it just alerts where the problem is but it needs to setfocus.

  • #9
    New Coder
    Join Date
    Feb 2013
    Posts
    45
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Might help if i add this.

    Code:
    <label for="mark1">Mark One</label>
     <input type="text" name="mark1" id="mark1" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)">
    </div>
    <div>
    <label for="mark2">Mark Two</label>
     <input type="text"  name="mark2" id="mark2" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)" >
    </div>
    <div>
    <label for="mark3">Mark Three</label>
    <input type="text"  name="mark3" id="mark3" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)">
    </div>
    <div>
    <label for="mark4">Exam Mark</label>
    <input type="text"  name="mark4" id="mark4" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)">
    </div>
    Code:
    function isFilledNum(number) {
    
    	var number1 = parseInt(number.value)
    	
    
    if( number1< 0 || number1 > 100 || isNaN(number1) == true) {
    
    var box = number.id;
    var val = number.value;
    
    alert ("You have checked box " + box + " whose value is " + val);
    }

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Use this:-


    Code:
    <div>
    <label for="mark1">Mark One</label>
     <input type="text" name="mark1" id="mark1" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" />
    </div>
    
    <div>
    <label for="mark2">Mark Two</label>
    <input type="text" name="mark2" id="mark2" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" />
    </div>
    
    <div>
    <label for="mark3">Mark Three</label>
    <input type="text" name="mark3" id="mark3" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" />
    </div>
    
    <div>
    <label for="mark4">Exam Mark</label>
    <input type="text" name="mark4" id="mark4" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" />
    </div>

    The advantage of this approach is that the validity of the entry can vary with textbox, i.e. one box may have a limit of 100, another a limit of 20 etc.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    New Coder
    Join Date
    Feb 2013
    Posts
    45
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Great stuff. Cheers

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Add to each input

    Code:
    onblur= "if(this.value == ''){this.value = 0}"

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #13
    New Coder
    Join Date
    Feb 2013
    Posts
    45
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Add to each input

    Code:
    onblur= "if(this.value == ''){this.value = 0}"
    With the rest of the code you gave?

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by trancecommunity View Post
    With the rest of the code you gave?
    Yes, that's what I meant by "add to each input". To spell it out:-

    Code:
    <div>
    <label for="mark1">Mark One</label>
     <input type="text" name="mark1" id="mark1" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" onblur= "if(this.value == ''){this.value = 0}"/>
    </div>
    That means that the field must have a value in it whether one is entered by the user or not.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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