Enabling or disabling input fields

Question

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?

Radio buttons for the form:

<span class="radio inline">
  <label for="user_entity_type_i">
    <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="I" name="user[entity_type]" id="user_entity_type_i" />
    Individual / Sole Proprietor
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_c">
    <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="C" name="user[entity_type]" id="user_entity_type_c" />
    Corporation
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_p">
    <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="P" name="user[entity_type]" id="user_entity_type_p" />
      Partnership
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_l">
    <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="L" name="user[entity_type]" id="user_entity_type_l" />
    Limited Liability Company
  </label>
 </span>

 <span class="radio inline">
   <label for="user_entity_type_o">
     <input class="radio_buttons required" required="required" aria-required="true" type="radio" value="O" name="user[entity_type]" id="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
– Phrancis, Commented Jan 27, 2017 at 6:06

ChatterOne · Accepted Answer · 2017-01-27 06:59:27Z

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">
    <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="I" name="user[entity_type]" id="user_entity_type_i" />
    Individual / Sole Proprietor
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_c">
    <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="C" name="user[entity_type]" id="user_entity_type_c" />
    Corporation
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_p">
    <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="P" name="user[entity_type]" id="user_entity_type_p" />
      Partnership
  </label>
</span>

<span class="radio inline">
  <label for="user_entity_type_l">
    <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="L" name="user[entity_type]" id="user_entity_type_l" />
    Limited Liability Company
  </label>
 </span>

 <span class="radio inline">
   <label for="user_entity_type_o">
     <input class="radio_buttons required entity-option" required="required" aria-required="true" type="radio" value_type="O" name="user[entity_type]" id="user_entity_type_o" />
       Other
   </label>
 </span>

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
– Tushar, Commented Jan 27, 2017 at 7:04
It should be var isValueI = $(this).data('valuetype') === 'I'; in my ^^^ comment. — Tushar
– Tushar, Commented Jan 27, 2017 at 7:14

Stack Exchange Network

Enabling or disabling input fields

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Enabling or disabling input fields

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions