0

I have a form that gets built in validation that once ran turns all inputs to readonly so that the user cannot modify them prior to submission.

The problem is that I have a dropdown on my page that cannot be modified after the page has been "validated". Disabling the dropdown is not an option because the value has to be able to be submitted. (I cannot use a hidden field to submit the selection due to external scripts that I cannot access.)

My Idea was to disable the dropdown onmouseenter and enable the dropdown on mouseleave. The onmouseenter code works fine, but no matter what I try I cannot seem to get the dropdown to re-enable.

Below I have an example of the basic pieces of code as a snippet.

I have also tried the following pairings to no avail;

.disabled=true; / .disabled=false;

.setAttribute('disabled','disabled'); / .removeAttribute('disabled');

.disabled=true; / .disabled="";

I would like to stick to specifically Javascript. What am I missing that keeps me from enabling this disabled dropdown at mouseleave?

Thanks

document.getElementById("lstLine").onmouseenter = function (){

var refVerifiedBox = document.getElementById('txtVerified');

 if(refVerifiedBox.value !=""){
 document.getElementById("lstLine").disabled = true;
 }
}

document.getElementById("lstLine").onmouseleave = function (){
 document.getElementById("lstLine").disabled = false;
}
<select id="lstLine">
<option value="testA">Test A</option>
<option value="testB">Test B</option>
</select>

<input id="txtVerified" value="Test" disabled=true;>
TheAngryAuditor
  • 39
  • 8
  • `.disabled = true;` and `.disabled = false;` should work. Can you create a stack snippet that demonstrates the problem? – Barmar Jan 12 '18 at 17:24
  • @Barmar I have edited my original post to have a code snippet showcasing the issue. – TheAngryAuditor Jan 12 '18 at 17:58
  • Disabled elements don't fire events on them. Some do propagate, so you could use a container element to catch the event, but I'm not sure if all browsers support that. You could also "fake" a disabled state (in many ways). Here's a good post: https://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input – Ian Jan 12 '18 at 18:17
  • Kind of what I figured, from just blindly throwing stuff at the wall. But I did not see that mentioned anywhere there are posts upon posts of people giving all sorts of code to re enable a disabled item. Was that because they were non-element items being disabled? Thank you for the link! – TheAngryAuditor Jan 12 '18 at 18:26

0 Answers0