Link to home
Start Free TrialLog in
Avatar of toros
toros

asked on

enabling / disabling input fields

Hi.

I'm making a form that contains three columns of inputfields. All these fields are disabled when the user enters the page. On the first row of each column I want a icon/picture that the user can click to unlock(enable) all fields in that column to edit the values. What I need would be something like this :

<form ...>
<table...>
etc..

<img src="locked.gif" onClick="OpenCol()">

<script>
function OpenCol()
{
   document.form.image.src = "blankimg.gif";
   document.form.edit1.enabled = true;
   document.form.edit2.enabled = true;
   ...
   etc
   ...
   document.form.edit.SetFocus();
}
</SCRIPT>

</TABLE>
</FORM>

Is this problem possible to solve by using something like the pseudocode I've written above. If so , have you got any suggestions about how the OpenCol is to be written ??

TIA

TorOS
Avatar of Member_2_242582
Member_2_242582
It certainly is possible in IE. I don't know if it will work in Netscape though.
It would look something like:

---------

<form name="myform" ...>

<img name="img1" src="locked.gif" onClick="OpenCol('img1')">

<script>
function OpenCol(ImageName)
{
   document.ImageName.src = "blankimg.gif";
   document.myform.edit1.disabled = false;
   document.myform.edit2.disabled = false;
   ...
   etc
   ...
   document.myform.edit1.focus();
}
</script>

......

</form>

-------

It's just something to get you started, but I hope it'll be of use.


Arjan.
Avatar of toros
toros

ASKER

I tried the code that you wrote but I get two error messages. First when I enter the page I get :
Invalid Character - Line 24.
When I click the image I get :
Object Expected - Line 14.
The complete source code looks like this :

<html>
<head>
<title>Testpage</title>
</head>
<body>
<form method="POST" name="myform">
<table border="1" width="246">
  <tr>
    <td width="85"><img border="0" name="img1" src="noway.gif" onClick="OpenCol('img1')"></td>
    <td width="145">
      <p><input type="text" name="edit1" size="20"></p>
    </td>
  </tr>
</table>
<script language="JavaScript">
<!--
function OpenCol(ImageName)
{
   document.ImageName.src = "blank.gif";
   document.myform.edit1.disabled = false;
   document.myform.edit1.focus();
}
-->
</script>
</form>
</body>
</html>

Has anyone got any ideas about where I'm wrong ???

btw. I use IE5 to test the page.

TIA

TorOS
Avatar of knightEknight
knightEknight
Flag of United States of America image
Here is a file that will show you how to do this generically in both IE and NS.  You can apply this technique to your problem:


<HTML>
<HEAD>
<TITLE>Enabling/Disabling Fields in NetScape and IE</title>

<SCRIPT language='javascript'>
<!-- //


function disable_enable(form)
{
   form.myfield.disabled    = !form.myfield.disabled;
   form.myselect.disabled   = !form.myselect.disabled;
   form.mytextarea.disabled = !form.mytextarea.disabled;

   window.status = 'Setting disabled flags to: ' + form.myfield.disabled;
   form.mybutton.value = ( form.myfield.disabled ) ? "Disabled" : "Enabled";
}


function onFieldFocus(element)
{
   window.status = element.name + ' disabled flag is: ' + element.disabled;

   if ( element.disabled )
   {
      // you might be tempted to do this: element.blur();
      // but this may cause problems for earlier browsers.  Use setTimeout:
      setTimeout("document.myform." + element.name + ".blur()",1);
   }
}

////////////////////////////////////////////
function onKeyDownHandler(e)
{
//alert(e.which + ", " + document.myform.mytextarea.value);
   var event = e ? e : window.event;
   var MAXLENGTH = 10;
   if ( document.myform.mytextarea.value.length >= MAXLENGTH )
   {
      if ( document.layers )
         e.which=0;
     // else
         document.myform.mytextarea.value = document.myform.mytextarea.value.substring(0,MAXLENGTH);
   }
}


  document.onkeydown = onKeyDownHandler;

////////////////////////////////////////////


function onPageLoad(form)
{
   // initialize disabled flags
   form.myfield.disabled    = false;
   form.myselect.disabled   = false;
   form.mytextarea.disabled = false;

   form.myfield.focus();
   form.myfield.select();

}

// -->
</script>
</head>

<BODY onLoad='onPageLoad(this.myform);'>
<FORM name='myform'>

 My Field: &nbsp;
 <INPUT type='text'   name='myfield'  value='kEk' width='12' maxlength='24'
        onFocus='onFieldFocus(this)'><BR>

 My Select:
 <SELECT name='myselect' disabled onFocus='onFieldFocus(this)'>
   <OPTION></option>
   <OPTION>opt 1</option>
   <OPTION>opt 2</option>
   <OPTION>opt 3</option>
 </select><BR>

 My Text Area:<BR>
 <TEXTAREA name='mytextarea' wrap rows='4' cols='32' onFocus='onFieldFocus(this)'>blah blah blah</textarea><P>

 <INPUT type='button' name='mybutton' value=' Enabled ' onClick='disable_enable(this.form);'>

 <P>
 <!-- to permanently disable a field, it is not so complicated: -->
 Always Disabled:  
 <INPUT type='text' name='myfield2' disabled value="I'm Disabled!" width='14' maxlength='24'
        onFocus='setTimeout("document.myform.myfield2.blur()",1)'><BR>

</form>

</body>
</html>

<SCRIPT language='javascript'>
  if ( document.layers )
  {
    document.captureEvents(Event.KEYDOWN);
  }
</script>
Avatar of knightEknight
knightEknight
Flag of United States of America image
.. just be careful about the code above because EE has word-wrapped it in several places that it shouldn't be -- like in some of the javascript comments.
Avatar of knightEknight
knightEknight
Flag of United States of America image
ThisIsATestLineToSeeIfICanGetEEToExpandTheWordWrapOnThisPagePleaseIgnoreThisVeryLongCommentThisIsATestLineToSeeIfICanGetEEToExpandTheWordWrapOnThisPagePleaseIgnoreThisVeryLongComment.
Avatar of knightEknight
knightEknight
Flag of United States of America image
Hey!  It worked!  (a little to good, sorry about that).
Anyway, the code above should work for you.
Avatar of knightEknight
knightEknight
Flag of United States of America image
Also, I noticed that I accidently included some additional code in
an attempt to limit the number of characters that can be typed
in the textarea field.  This is (obviously) not part of the solution
to your question, so you can safely leave that part of the code out.  
Sorry about all the extraneous comments.
Avatar of toros
toros

ASKER

Thanks a lot knightEknight !

That fixed my problem , if you want the points please reply to the question.

Tor Olaf
ASKER CERTIFIED SOLUTION
Avatar of knightEknight
knightEknight
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of knightEknight
knightEknight
Flag of United States of America image
Here is a cleaned up version of the page:

<HTML>
<HEAD>
<TITLE>Enabling/Disabling Fields in NetScape and IE</title>

<SCRIPT language='javascript'>
<!-- //


function disable_enable(form)
{
   form.myfield.disabled    = !form.myfield.disabled;
   form.myselect.disabled   = !form.myselect.disabled;
   form.mytextarea.disabled = !form.mytextarea.disabled;

   window.status = 'Setting disabled flags to: ' + form.myfield.disabled;
   form.mybutton.value = ( form.myfield.disabled ) ? "Disabled" : "Enabled";
}


function onFieldFocus(element)
{
   window.status = element.name + ' disabled flag is: ' + element.disabled;

   if ( element.disabled )
   {
      // you might be tempted to do this: element.blur();
      // but this may cause problems for earlier browsers.  Use setTimeout:
      setTimeout("document.myform." + element.name + ".blur()",1);
   }
}


function onPageLoad(form)
{
   // initialize disabled flags
   form.myfield.disabled    = false;
   form.myselect.disabled   = false;
   form.mytextarea.disabled = false;

   form.myfield.focus();
   form.myfield.select();

}

// -->
</script>
</head>

<BODY onLoad='onPageLoad(this.myform);'>
<FORM name='myform'>

 My Field: &nbsp;
 <INPUT type='text'   name='myfield'  value='kEk' width='12' maxlength='24'
        onFocus='onFieldFocus(this)'><BR>

 My Select:
 <SELECT name='myselect' disabled onFocus='onFieldFocus(this)'>
   <OPTION></option>
   <OPTION>opt 1</option>
   <OPTION>opt 2</option>
   <OPTION>opt 3</option>
 </select><BR>

 My Text Area:<BR>
 <TEXTAREA name='mytextarea' wrap rows='4' cols='32' onFocus='onFieldFocus(this)'>blah blah blah</textarea><P>

 <INPUT type='button' name='mybutton' value=' Enabled ' onClick='disable_enable(this.form);'>

 <P>
 <!-- to permanently disable a field, it is not so complicated: -->
 Always Disabled:  
 <INPUT type='text' name='myfield2' disabled value="I'm Disabled!" width='14' maxlength='24'
        onFocus='setTimeout("document.myform.myfield2.blur()",1)'><BR>

</form>

</body>
</html>