Question

I have below code where i disable and enable a calendar clickable icon.

<p>      
   <label>
      <input type="text" name="date18" id="date18" value="01/01/2012"
      style="width:75px;" disabled/>
   </label>
   <a href="#" onclick="somecaledarrelatedstuff()" name="calid" id="calid">
      <img src="icon-Calendar.jpg" alt="Click to pick a date from a popup 
      calendar"/>
   </a>
</p>

When I add disable as above both the input field and the link to the calendar popup are disabled as well. But because the values of disabled elements are not submitted, I thought of making it read-only. However, the problem is that when it’s read-only, only the input field is getting read only (not also the calendar pop up link) too, like using disable.

I know if I want to disable (just to prevent the user from editing) both input field and href I can use disabled and have a hidden input variable, and submit it and refer to that variable. But I was looking for an alternative way because I will have a lot of refactoring to do to my code if I introduce a new hidden variable.

Thanks.

Answer 1

If you want the input field to be disabled but still send its value upon submission of the form, you can use bit of JavaScript for that.

To achieve this, first add this bit to the <form> tag:

<form ... onsubmit="EnableInputs(this);">

Then add this JS function:

function EnableInputs(oForm) {
    oForm.elements["calid"].disabled = false;
}

You can enable more elements like this, or all inputs using getElementsByTagName and looping over it.

This will just enable the element when submitting thus send its value.