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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
knightEknightConnect With a Mentor Commented:
Glad to help!
0
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
 
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:
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
All Courses

From novice to tech pro — start learning today.