1
\$\begingroup\$

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);
      }
    });
 }); 

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

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>
\$\endgroup\$
  • \$\begingroup\$ 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); }); \$\endgroup\$ – Tushar Jan 27 '17 at 7:04
  • \$\begingroup\$ It should be var isValueI = $(this).data('valuetype') === 'I'; in my ^^^ comment. \$\endgroup\$ – Tushar Jan 27 '17 at 7:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.