JS Set Focus and Select Text

Hi Experts,

I have the following general functions for validation, and everything works in it except when I try to set focus back to the problematic element and select its text.

    function validate(elemID, intORfloat){
     
        var element = document.getElementById(elemID);
        
        var text = element.value;
        var ctlName = element.dataset.name;
        var valid = true;
        if (intORfloat === 'int'){            
            if (text != parseInt(text)){
                alert ('The ' + ctlName + ' must be a valid whole number.');
                element.focus();
                element.select();
                valid = false;
            }                
        }
        else if (intORfloat === 'float'){            
            if (text != parseFloat(text)){
                alert ('The ' + ctlName + ' must be a valid valid decimal number.');
                element.focus();
                element.select();
                valid = false;
            }                
        }
        
        return valid;
    }

Open in new window


By the way, this function is called by another function, which function is called by the element's onchange trigger.

Any feed back would be greatly appreciated.

Thank you
APD TorontoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongCommented:
try:

<input type="text" id="myText" onblur="validate('myText','int')">


<script language="javascript">

    function validate(elemID, intORfloat){
      
        var element = document.getElementById(elemID);
       
        var text = element.value;
        var ctlName = element.name;
        var valid = true;
       
      if (intORfloat === 'int'){            
            if (text != parseInt(text)){
                alert ('The ' + ctlName + ' must be a valid whole number.');
                element.focus();
                element.select();
                valid = false;
            }                
        }
        else if (intORfloat === 'float'){            
            if (text != parseFloat(text)){
                alert ('The ' + ctlName + ' must be a valid valid decimal number.');
                element.focus();
                element.select();
                valid = false;
            }                
        }
       
        return valid;
    }

</script>
0
Ryan ChongCommented:
for float value validation:

<input type="text" id="myText2" onblur="validate('myText2','float')">
0
Ryan ChongCommented:
ooops try this instead:

<input type="text" id="myText" name="myText" onblur="validate(this,'int')">
<input type="text" id="myText2" name="myText2" onblur="validate(this,'float')">

<script language="javascript">

    function validate(element, intORfloat){
      
        var text = element.value;
        var ctlName = element.name;
        var valid = true;
       
      if (intORfloat === 'int'){            
            if (text != parseInt(text)){
                alert ('The ' + ctlName + ' must be a valid whole number.');
                element.focus();
                element.select();
                valid = false;
            }                
        }
        else if (intORfloat === 'float'){            
            if (text != parseFloat(text)){
                alert ('The ' + ctlName + ' must be a valid valid decimal number.');
                element.focus();
                element.select();
                valid = false;
            }                
        }
       
        return valid;
    }

</script>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

APD TorontoAuthor Commented:
It still does not set focus back and select the text.

Below is a prototype of what I need to do. Because I have many fields to validate, I am using the "Qty" to determine if Int or Float.

<html>
<head>
<title>PHP2JS Array</title>
</head>
<body onload="loadAgents();">
    
    <form>
        Prod # <input type="text" id="txtNum" data-name="Product Number" onchange="recalc(this);">
        
        <br><br>
        
        
        Family Qty <input type="text" id="txtFamilyQty" data-name="Family Quantity" onchange="recalc(this);"> 
        Adult Qty <input type="text" id="txtAdultQty" data-name="Adult Quantity" onchange="recalc(this);">
    </form>
    
<h1>PHP2JS Array</h1>
  <script type="text/javascript">
    
    function recalc(element){
        
        var validated = true;
        
        //Validate input if not automatic        
        if (element !== 'none'){
            validated = validate(element);
        }
        if (validated == false){
            return false;
        }
        
        //All Validated, start re-calculation
        
    }
    
    function validate(element){
     
        var valid = true;
        var elemID = element.id;
        var elemType;
        var tempInt;

        tempInt = elemID.length;
        elemType = elemID.substr(tempInt - 3, 3);
        
        var validType = 'float';
        if (elemType === 'Qty'){
           validType = 'int';       
        }
        
        var text = element.value;
        var ctlName = element.dataset.name;
        var valid = true;
        
        if (validType === 'int'){            
            if (text != parseInt(text)){
                alert ('The ' + ctlName + ' must be a valid whole number.');
                element.focus();
                element.select();
                valid = false;
            }                
        }
        else if (validType === 'float'){            
            if (text != parseFloat(text)){
                alert ('The ' + ctlName + ' must be a valid valid decimal number.');
                element.focus();
                element.select();
                valid = false;
            }                
        }
        
        
        return valid;
    }      
      
</script>

</body>
</html>

                                          

Open in new window

0
Ryan ChongCommented:
what do u mean by >> using the "Qty" to determine if Int or Float. ?

Can you provide us an example? Also what values you will be filling in the form?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APD TorontoAuthor Commented:
If you look at my lines 43-49 from my last code you will see that I am looking if the last 3 letters of my id are 'Qty', and if they are I am using it, otherwise float.

This part works fine, but it does not focus back and select the text.

Did you try running my last code?
0
APD TorontoAuthor Commented:
I just noticed that in Safari and Chrome the select works, but not in Firefox.
0
APD TorontoAuthor Commented:
I found for FireFox you need to add a 10ms delay
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.