We help IT Professionals succeed at work.

TextBox onclick losing focus

myleseven
myleseven asked
on
1,901 Views
Last Modified: 2008-07-22
I have a group of radio buttons and related textboxes on a form.
Currently all textboxes are set to readonly except for the text box whose related radio button is selected.
When you click on a new radio button it will first set all textboxs to readonly = true and then set the related textbox to readonly = false (enabling).

This system works well.
However I have a new requirement which is to alllow the user to click on any textbox thus enabling this ttextbox and setting all others to readonly = true.
To do this I thought that I could siply call the same code and it would work fine.
Well it does work well except that the textbox I click on loses focus and I need to click on it again to regain focus.
However if I had done the same thing through using the radio buttons then it gives focus to the related textbox.

would anyone know why.


//.css:
.disabledInputWidth300 
{
	background-color: #F0F0F0;	
	width: 300px;
}
 
.enabledInputWidth300
{
	background-color: white;	
	width: 300px;
}
 
//html and javascript:   
 
   function disableAllInputTextFields()
      {
        var sClass = 'disabledInputWidth300';
        readOnlyTrueInputWithClass(document.forms['FindClientPortfolioForm'].clientName, sClass);
        readOnlyTrueInputWithClass(document.forms['FindClientPortfolioForm'].personSurname, sClass);
        readOnlyTrueInputWithClass(document.forms['FindClientPortfolioForm'].personFirstName, sClass);
        readOnlyTrueInputWithClass(document.forms['FindClientPortfolioForm'].clientNumber, sClass);
        readOnlyTrueInputWithClass(document.forms['FindClientPortfolioForm'].origClientNumber, sClass);
        readOnlyTrueInputWithClass(document.forms['FindClientPortfolioForm'].origDatabase, sClass);        
        readOnlyTrueInputWithClass(document.forms['FindClientPortfolioForm'].externalRefNumber, sClass);        
        readOnlyTrueInputWithClass(document.forms['FindClientPortfolioForm'].externalSystem, sClass);           
      
      }
        
      function FindTypeClient_onClick(TextBox)
      {
        disableAllInputTextFields();
        if(TextBox)
        {
           document.forms['FindClientPortfolioForm'].findType[0].checked = true;
        }      
        readOnlyFalseInputWithClass(document.forms['FindClientPortfolioForm'].clientName, true, 'enabledInputWidth300'); 
        
      }
      
      function FindTypePerson_onClick(TextBox) 
      {
       //If clicking on TextBox and radio button not checked
       //or if clicking from RadioButton then
        if (((TextBox) && (document.forms['FindClientPortfolioForm'].findType[1].checked == false))
            || (TextBox == false))
        {
            disableAllInputTextFields();
            if (TextBox)
            {
                document.forms['FindClientPortfolioForm'].findType[1].checked = true;
            }        
            readOnlyFalseInputWithClass(document.forms['FindClientPortfolioForm'].personSurname, true, 'enabledInputWidth300');
            readOnlyFalseInputWithClass(document.forms['FindClientPortfolioForm'].personFirstName, false, 'enabledInputWidth300');   
        }  
      } 
 
function readOnlyTrueInputWithClass(eInput, sClassName)
{
  if ( null != eInput )
  {
  	  eInput.className = sClassName; 
	  eInput.readOnly = true;      
  }
}
 
function readOnlyFalseInputWithClass(eInput, bFocus, sClassName)
{
  if ( null != eInput )
  {
	  eInput.readOnly = false;  
	  eInput.className = sClassName; 
	  if (bFocus == true)
	  {   
	    eInput.focus();
	  }
  }
}
 
       <table width="550" border="0" class="viewDataTable">
        <tr>
            <td colspan="2">
            <dl> 
                <dt>
                <input type="radio"  onclick="FindTypeClient_onClick(false)"  value="client"  checked="checked"  name="findType"  />&nbsp;Client Portfolio
                </dt>
                <dd>Client Portfolio Name:</dd>
            </dl>
            </td>   
            <td width="100">
            <br /> 
            <input onKeyPress="SubmitOnEnter(event)" class="enabledInputWidth300" onclick="FindTypeClient_onClick(true)" type="text" name="clientName" id="clientName" value="" />
            </td>       
        </tr>   
        <tr>
            <td colspan="2">
                <dl> 
                    <dt>
                    <input type="radio"  onclick="FindTypePerson_onClick(false)"  value="person"  name="findType"  />&nbsp;Person
                    </dt>
                    <dd>Person Surname:</dd>
                    <dd>Person First Name:</dd>            
                </dl>
            </td>   
            <td width="100">
                <br /> 
                <input onKeyPress="SubmitOnEnter(event)" class="disabledInputWidth300" readonly="true" onclick="FindTypePerson_onClick(true)" type="text" name="personSurname" id="personSurname" value="" />
                <input onKeyPress="SubmitOnEnter(event)" class="disabledInputWidth300" readonly="true" onclick="FindTypePerson_onClick(true)" type="text" name="personFirstName" id="personFirstName" value="" />
            </td>      
        </tr>

Open in new window

Comment
Watch Question

Author

Commented:
Testing in I.E. 7
Cem TürkSenior Software Engineer

Commented:
use following onclick code fore textboxes
onclick="disableAllInputTextFields();this.readOnly=false"

Open in new window

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
I solved the problem by adding a select line to this function:
function readOnlyFalseInputWithClass(eInput, bFocus, sClassName)
{
  if ( null != eInput )
  {
	  eInput.readOnly = false;  
	  eInput.className = sClassName; 
	  if (bFocus == true)
	  {   
	    eInput.focus();
	    eInput.select();
	  }
  }
}

Open in new window

Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.