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 TorontoSoftware DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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 ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
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>
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
for float value validation:

<input type="text" id="myText2" onblur="validate('myText2','float')">
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
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>
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

APD TorontoSoftware DeveloperAuthor 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

Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
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?

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 TorontoSoftware DeveloperAuthor 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?
APD TorontoSoftware DeveloperAuthor Commented:
I just noticed that in Safari and Chrome the select works, but not in Firefox.
APD TorontoSoftware DeveloperAuthor Commented:
I found for FireFox you need to add a 10ms delay
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.