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