Remove disabled attribute onClick of disabled form field

Question

I have a form field that starts out disabled and has an onClick to enable it. The onClick doesn\'t fire (at least in FF) nor does a simple alert(1);.

The hacky vers

Answer 1

You can add a div over the input that is disabled: check it out

 <div onclick="javascript:document.forma.demo1.disabled=false;" style="border:0px solid black; padding:00px;">
    <input type=text name="demo1" disabled style="width:30;">
  </div>

Answer 2

Enabling a disabled element on click kind of defeats the purpose of disabling, don't you think? If you really want the behavior you're describing, just style it 'disabled' and remove those styles on click.

Answer 3

Don't implement the logic of the onClick event in the onClick's value of the input field. That's probably why it's not working in Firefox. Instead define a function as the onClick's value. For example:

<input type="text" id="date_end" value="blah" onClick="doSomething()" disabled>

<script type="text/javascript">
  function doSomething()
  {
    alert("button pressed");
  }
</script>

It will also be worth looking into JQuery. You can use it to add or remove attributes from elements and all kinds of other stuff. For instance you can remove the disabled from the the input field by writing a function like this:

<script type="text/javascript">
      function doSomething()
      {
        alert("button pressed");
         $("#date_end").removeAttr('disabled'); //removes the disabled attribut from the  
                                                //element whose id is 'date_end'
      }
</script>

OR you can add it as follows:

$("#date_end").attr('disabled','true');

The Jquery site is here

Answer 4

I recently had a very similar problem and solved it by placing the input in a div and moving the onClick to the div.

<div onClick="myEnableFunction('date_end');">
<input type="text" id="date_end" value="blah" disabled>
</div>