Disable form elements

**Interactive1984** · 10-04-2012 04:48 AM

Hi,

I have a javascript that shows and hides a div.

In the div is a form.
I would like to add to the Javascript that if the div is closed the fields should be disabled.

I have the Javascript that does that only I don't know how to implement that.
I hope someone would assist me here:

This is the code for the div

Code:

 <script>
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} 
else {
document.getElementById(elementid).disabled=true.style.display = 'none';
}
}
</script>
<a href="javascript:showHide('details')">Click to show</a>
<div id="details" style="display:none">
<fieldset>
<p>
<input type="text" class="appartment" size="20" name="appartment[]" value="" placeholder="Subindex" />
</p>
</fieldset> 
</div>

This is the Javascript that should disable the form elements.

Code:

document.getElementById('element_id').disabled = true;

M.

**vwphillips** · 10-04-2012 11:05 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>

<script>
function showHide(elementid){
 var obj=document.getElementById(elementid),frm=obj.getElementsByTagName('FORM')[0],els=frm.elements,z0=0;
 if (obj.style.display == 'none'){
  obj.style.display = '';
  obj.removeAttribute('disabled');
 }
 else {
  obj.style.display = 'none';
 }
 for (;z0<els.length;z0++){
  els[z0].removeAttribute('disabled');
  if (obj.style.display == 'none'){
   els[z0].disabled='disabled';
  }
 }
}
</script>
</head>
<body>
<a href="javascript:showHide('details')">Click to show</a>
<div id="details" style="display:none">
<form>
<fieldset>
<p>
<input type="text" class="appartment" size="20" name="appartment[]" value="" placeholder="Subindex" />
</p>
</fieldset>
</form>
</div></head>

<body>

</body>

</html>

**Interactive1984** · 10-05-2012 02:30 AM

Vic Thnx for your reply,

I implemented this but it doesn't work.
I don't get an error message but it still saves the empty field.

I'll look in to it some more, maybe I just didn't implement it good

M.

**Interactive1984** · 10-05-2012 03:47 AM

I've got it working.

I had to add disabled="disabled" to the input field.
That way de javascript can remove the disabled part from the input element.

So as long as the show/hide link doesn't get clicked the form won't be saved.

However if a user opens the show/hide div the disabled element get's removed so a user can add data.
But if the user opens it and closes it the disabled element is still gone. Is there a way that I can add the disabled element when
the show/hide div is closed?

I've Googled a bit and came across setAttribute. I don't really know how to implement it and if it works on all browsers.

Please help me one more time. Meanwhile I'll keep looking for a solution.

Thnx.

M.

Thread: Disable form elements

Thread Tools

Display

Disable form elements

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions