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
torosAsked:
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.

aarieCommented:
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.
0
torosAuthor Commented:
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
0
knightEknightCommented:
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>
0
The Ultimate Tool Kit for Technolgy Solution Provi

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 for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

knightEknightCommented:
.. 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.
0
knightEknightCommented:
ThisIsATestLineToSeeIfICanGetEEToExpandTheWordWrapOnThisPagePleaseIgnoreThisVeryLongCommentThisIsATestLineToSeeIfICanGetEEToExpandTheWordWrapOnThisPagePleaseIgnoreThisVeryLongComment.
0
knightEknightCommented:
Hey!  It worked!  (a little to good, sorry about that).
Anyway, the code above should work for you.
0
knightEknightCommented:
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.
0
torosAuthor Commented:
Thanks a lot knightEknight !

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

Tor Olaf
0
knightEknightCommented:
Glad to help!
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
knightEknightCommented:
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>

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
HTML

From novice to tech pro — start learning today.