blur and unblurring a text box on demand

i want to be able to unblur and blur a text box, if the name i choose from the pull down menu is Steve.


here is my html code

<select name="example" onchange="checkBlur();">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
<option value="Sue">Sue</option>
<option value="Steve">Steve</option>
</select>
<input type="text" name="textName" value="" onfocus="this.blur();" readonly="true">



<javascript>

checkBlur()
{
  var nameLabel = window.document.formName.example.options;
  var textLabel = window.document.formName.textName;
 
  if ((nameLabel.length - 1) ==  nameLabel.selectedIndex)
     {
       textLabel.readonly="false";
       textLabel.onfocus = "";
      }
    else
    {
       textLabel.readonly="true";
       textLabel.onfocus = "blur();";
      }
}


is my java script code correct?
jaxkewlAsked:
Who is Participating?
 
BatalfCommented:
An alternative solution for you could be to just hide and show the select box:

<form name="formName">
<select name="example" onchange="checkBlur();">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
<option value="Sue">Sue</option>
<option value="Steve">Steve</option>
</select>
<script type="text/javascript">
function checkBlur()
{
  var nameLabel = window.document.formName.example.options;
  var textLabel = window.document.formName.textName;
 
  if ((nameLabel.length - 1) ==  nameLabel.selectedIndex) {            
         textLabel.style.display='inline';
     }
    else
    {
         textLabel.style.display='none';
      }
}
</script>

<input style="display:none" type="text" id="textName" name="textName" value="">
</form>
0
 
jaxkewlAuthor Commented:
i use both blur and readonly because netscape and IE have problems understanding one or the other. according to a MS website.
0
 
BatalfCommented:
Here's an example.

The differences from your code is

1) Use the <script> tag and not <javascript>
2) Use the removeAttribute() and setAttribute() to manipulate the readonly attribute. Note the case-sensitive "readOnly"(capital "O").



<form name="formName">
<select name="example" onchange="checkBlur();">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
<option value="Sue">Sue</option>
<option value="Steve">Steve</option>
</select>
<script type="text/javascript">

function checkBlur()
{
  var nameLabel = window.document.formName.example.options;
  var textLabel = window.document.formName.textName;
 
  if ((nameLabel.length - 1) ==  nameLabel.selectedIndex)
     {

       textLabel.onfocus = "";
       textLabel.removeAttribute('readOnly');
      }
    else
    {

       textLabel.onfocus = "blur();";
       textLabel.setAttribute('readOnly',true);
      }
}
</script>

<input type="text" name="textName" value="" onfocus="this.blur()" readonly>
</form>
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.

 
jaxkewlAuthor Commented:
thanks, i will try this and give u the A if it works.
0
 
BatalfCommented:
Did it work?
0
 
jaxkewlAuthor Commented:
this works with IE, but not with netscape. it has a problem with blurring back. after i select steve, i am able to type in the text box, but then after i choose another name it will not make it back to readonly. again this is with netscape.

the statement:

textLabel.onfocus = "blur();";

does not blur the textbox back.
0
 
jaxkewlAuthor Commented:
also how do you highlight text with javascript?

more specifically, i want this textLabel.value="Highlight this text"; to be highlighted after it is chosen in this IF statement. is there like a textLabel.highlight();?

if ((nameLabel.length - 1) ==  nameLabel.selectedIndex)
     {

       textLabel.onfocus = "";
       textLabel.removeAttribute('readOnly');
       textLabel.value="Highlight this text";
       textLabel.value.highlight; ????????
      }

i will look into this to see if i can answer my own question in the meantime. thanks.
0
 
BatalfCommented:
Highlight can be done with the select() function.

In this example I have moved the blur() command to a separate function


<form name="formName">
<select name="example" onchange="checkBlur();">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
<option value="Sue">Sue</option>
<option value="Steve">Steve</option>
</select>
<script type="text/javascript">

function blurThis(){
      this.blur();      
}

function checkBlur()
{
  var nameLabel = window.document.formName.example.options;
  var textLabel = document.getElementById('textName');
 
  if ((nameLabel.length - 1) ==  nameLabel.selectedIndex)
     {

         textLabel.onfocus="";
       textLabel.removeAttribute('readOnly');
       textLabel.select();
     }
    else
    {
         textLabel.onfocus=blurThis;
       textLabel.setAttribute('readOnly',true);
      }
}
</script>

<input type="text" id="textName" name="textName" value="" onfocus="this.blur()" readonly>
</form>
0
 
jaxkewlAuthor Commented:
thanks everything is working AOK.
0
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.

All Courses

From novice to tech pro — start learning today.