# Enabling or disabling input fields

In my Rails app, I have a form. The form has radio buttons for entity type and has a text field for SSN and another for EIN. Based on the radio button selected, one of the text fields will be disabled and the other enabled (disabled = false).

If the user selects the radio button for entity_type_i, it should disable the EIN field, and enable SSN. For the other four radio buttons, it should do the opposite - disable SSN and enable EIN. Since I don't know JavaScript, I ended up copying and pasting the same code and just changing the name of the id (i.e. #user_entity_type_c). Basically #user_entity_type_c, #user_entity_type_p, #user_entity_type_l and #user_entity_type_o should behave the same.

Without knowing any better, the code seems like it's redundant. Is there a more efficient way to write the JavaScript?

<span class="radio inline">
<label for="user_entity_type_i">
Individual / Sole Proprietor
</label>
</span>

<label for="user_entity_type_c">
Corporation
</label>
</span>

<label for="user_entity_type_p">
Partnership
</label>
</span>

<label for="user_entity_type_l">
Limited Liability Company
</label>
</span>

<label for="user_entity_type_o">
Other
</label>
</span>


The JavaScript:

<script>
$(function(){$("#user_entity_type_i").change(function(){
if($("#user_entity_type_i").prop("checked") == true){$("#user_ein").prop("disabled", true);
$("#user_ssn").prop("disabled", false); }else{$("#user_ein").prop("disabled", false);
}
});
$("#user_entity_type_c").change(function(){ if($("#user_entity_type_c").prop("checked") == true){
$("#user_ssn").prop("disabled", true);$("#user_ein").prop("disabled", false);
}else{
$("#user_ssn").prop("disabled", false); } });$("#user_entity_type_l").change(function(){
if($("#user_entity_type_l").prop("checked") == true){$("#user_ssn").prop("disabled", true);
$("#user_ein").prop("disabled", false); }else{$("#user_ssn").prop("disabled", false);
}
});
$("#user_entity_type_p").change(function(){ if($("#user_entity_type_p").prop("checked") == true){
$("#user_ssn").prop("disabled", true);$("#user_ein").prop("disabled", false);
}else{
$("#user_ssn").prop("disabled", false); } });$("#user_entity_type_o").change(function(){
if($("#user_entity_type_o").prop("checked") == true){$("#user_ssn").prop("disabled", true);
$("#user_ein").prop("disabled", false); }else{$("#user_ssn").prop("disabled", false);
}
});
});


• I made an edit to the title and tags to better reflect the purpose of the code. Hope you get good answers! – Phrancis Jan 27 '17 at 6:06

From your code it looks like you're changing one of "enabled" options only in one of the five cases. You can do that with a loop, using a class selector.

Also, it may be just me, but I don't think you should use value in an input box / radio button to store something different than the default value that you want that item to have. I suggest changing it to something like value_type.

So, what you can do is add another class to your input elements, select by that and do what you need, something like:

$(function() {$('input.entity-option').change(function() {
if (this.value_type === "I") {
$("#user_ssn").prop("disabled", false);$("#user_ein").prop("disabled", true);
} else {
$("#user_ssn").prop("disabled", true);$("#user_ein").prop("disabled", false);
}
});
});


And in your HTML you need something like:

<span class="radio inline">
<label for="user_entity_type_i">
Individual / Sole Proprietor
</label>
</span>

<label for="user_entity_type_c">
Corporation
</label>
</span>

<label for="user_entity_type_p">
Partnership
</label>
</span>

<label for="user_entity_type_l">

• Suggestions: Use data-attr for custom attributes and use $(selector).data('attr') to get it's value. prop accepts boolean value so you can avoid using if ... else and use $('input.entity-option').change(function() { var isValueI = $(this).data('valuetype');$("#user_ssn").prop("disabled", !isValueI); $("#user_ein").prop("disabled", isValueI); }); – Tushar Jan 27 '17 at 7:04 • It should be var isValueI =$(this).data('valuetype') === 'I'; in my ^^^ comment. – Tushar Jan 27 '17 at 7:14