Nesting my form - JavaScript conditions with radio buttons

Question

I have a form that goes like this: Select one of 2 options and it should show different set of options based on the first selected. Each of those options will ask for more information when selected. This is the script:

jQuery(document).ready(function($) {
  // bind event handler to the checkbox
  $('input[name="Payer Type"]').change(function() {
    // get input element where name attribute is starts with the checkbox value
    // and then toggle the visibility based on the checked property
    $('input[name^="' + this.value + '"]').toggle(this.checked);
    // trigger the change event 
  }).change();
});
$("[name=Type_of_Change]").change(function() {
  $("#Termination_Type").toggle($("[name=Type_of_Change]").index(this) === 0);
  $("#Active_Status_Change").toggle($("[name=Type_of_Change]").index(this) === 1);
});

$("[name=Termination_Type]").change(function() {
  $("#Death").toggle($("[name=Termination_Type]").index(this) === 0);
  $("#Discharge").toggle($("[name=Termination_Type]").index(this) === 1);
  $("#Revocation").toggle($("[name=Termination_Type]").index(this) === 2);
  $("#Transfer").toggle($("[name=Termination_Type]").index(this) === 3);
});
$("[name=Active_Status_Change]").change(function() {
  $("#Location").toggle($("[name=Active_Status_Change]").index(this) === 0);
  $("#Level_of_Care").toggle($("[name=Active_Status_Change]").index(this) === 1);
  $("#Diagnosis").toggle($("[name=Active_Status_Change]").index(this) === 2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="#Type_of_Change"><strong>Type of Change</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input class="validate[required]" name="Type of Change" type="radio" value="Termination" id="Type_of_Change" />Termination&nbsp; &nbsp; &nbsp;
  <input name="Type of Change" type="radio" value="Active Status Change" id="Type_of_Change" />Active Status Change&nbsp;</div>

<div style="clear:both">&nbsp;</div>

<div id="#Termination_Type" style="display:inline; margin-bottom:15px;"><b>Termination</b>
  <input class="validate[required]" id="Termination_Type" name="Termination_Type" type="radio" value="Death" />Death &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Discharge" />Discharge &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Revocation" />Revocation &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Transfer" />Transfer</div>

<div id="Death" style="display:none; margin-bottom:15px">
  <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" id="Date of Death" name="Date of Death" placeholder="Date of Death" type="text" /> </span>  <span style="width:25%; float:left"><strong>Time</strong><br />
<input class="validate[required]" id="Time of Death" name="Time of Death" placeholder="Time of Death" type="text" /> </span>
  </div>
</div>

<div id="Discharge" style="display:none; margin-bottom:15px">
  <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" id="Discharge Date" name="Discharge Date" placeholder="Discharge Date" type="text" /> </span>  <span style="width:25%; float:left"><strong>Reason</strong> &nbsp;&nbsp;<br />
<input class="validate[required]" id="Discharge Reason" name="Discharge Reason" placeholder="Discharge Reason" type="text" /> </span>
  </div>
</div>

<div id="Revocation" style="display:none; margin-bottom:15px">
  <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" id="Revocation Date" name="Revocation Date" placeholder="Revocation Date" type="text" /> </span><span style="width:25%; float:left"><strong>Reason</strong><br />
<input class="validate[required]" id="Revocation Reason" name="Revocation Reason" placeholder="Revocation Reason" type="text" /> </span>
  </div>
</div>

<div id="Transfer" style="display:none; margin-bottom:15px">
  <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" id="Transfer Date" name="Transfer Date" placeholder="Transfer Date" type="text" /> </span><span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" id="Transfer to" name="Transfer to" placeholder="Transfer to" type="text" /> </span>
  </div>
</div>

<div style="clear:both">&nbsp;</div>

<div id="#Active_Status_Change" style="display:inline; margin-bottom:15px;"><b>Active Status Change</b>
  <input class="validate[required]" id="Active_Status_Change" name="Active_Status_Change" type="radio" value="Location" />Location &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Active_Status_Change" type="radio" value="Level of Care" />Level of Care &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Active_Status_Change" type="radio" value="Diagnosis" />Diagnosis</div>

<div id="Location" style="display:none; margin-bottom:15px">
  <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" id="Date of Death" name="Date of Death" placeholder="Date of Death" type="text" /> </span>  <span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" id="Time of Death" name="Time of Death" placeholder="Time of Death" type="text" /> </span>
  </div>
</div>

<div id="Level_of_Care" style="display:none; margin-bottom:15px">
  <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" id="Discharge Date" name="Discharge Date" placeholder="Discharge Date" type="text" /> </span>  <span style="width:25%; float:left"><strong>To</strong> &nbsp;&nbsp;<br />
<input class="validate[required]" id="Discharge Reason" name="Discharge Reason" placeholder="Discharge Reason" type="text" /> </span><span style="width:25%; float:left"><strong>Did Location Change</strong> &nbsp;&nbsp;<br />
<input class="validate[required]" id="Discharge Reason2" name="Discharge Reason2" placeholder="Discharge Reason" type="text" /> </span>
  </div>
</div>

<div id="Diagnosis" style="display:none; margin-bottom:15px">
  <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong>&nbsp;&nbsp;<br />
<input class="validate[required]" id="Revocation Date" name="Revocation Date" placeholder="Revocation Date" type="text" /> </span><span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" id="Revocation Reason" name="Revocation Reason" placeholder="Revocation Reason" type="text" /> </span>
  </div>
</div>

<div style="clear:both">&nbsp;</div>

View on JSFiddle

The second part (Termination_Type and Active_Status_Change) I have working like a charm. My problem is that I can't seem to show the second set of options only when you select the first (Type_of_Change).

Now I want to show options for Termination_Type or Active_Status_Change only if you select one or the other.

What am I doing wrong?

So you want to show the second set only if the user selected an option in the first set? — Moses Schwartz, Dec 29 '16 at 19:14

score 0 · Answer 1 · edited May 23 '17 at 12:16

I see a few issues:

Some element IDs are repeated. ID's should be unique and never used more than once in a document. Also, I've removed some IDs because they are not necessary or are unused.
Some IDs are prefixed with "#". This is probably unintentional.
While it is technically allowed, I suggest not using spaces in input names. In my opinion, it makes things inconsistent and leaves more room for error.
The "document ready" function excludes some of the JavaScript code.
I've nested the sub-elements of each section so that the subs show/hide with their parent sections.
I've hidden the initial sections with CSS, by using a common class "default_hidden".

Incidentally, you might be able to simplify your code and make it more DRY by using common classes and reusable structures rather than specific IDs. For example, you could use jQuery to toggle your nesting structures in a more dynamic way. That would also make it easier to expand your form in the future, without having to add more jQuery code for each new form block.

jQuery(document).ready(function($) {
  // bind event handler to the checkbox
  $('input[name="Payer Type"]').change(function() {
    // get input element where name attribute is starts with the checkbox value
    // and then toggle the visibility based on the checked property
    $('input[name^="' + this.value + '"]').toggle(this.checked);
    // trigger the change event 
  }).change();

  $("[name=Type_of_Change]").change(function() {
    $("#Termination_Type").toggle($("[name=Type_of_Change]").index(this) === 0);
    $("#Active_Status_Change").toggle($("[name=Type_of_Change]").index(this) === 1);
  });

  $("[name=Termination_Type]").change(function() {
    $("#Death").toggle($("[name=Termination_Type]").index(this) === 0);
    $("#Discharge").toggle($("[name=Termination_Type]").index(this) === 1);
    $("#Revocation").toggle($("[name=Termination_Type]").index(this) === 2);
    $("#Transfer").toggle($("[name=Termination_Type]").index(this) === 3);
  });
  $("[name=Active_Status_Change]").change(function() {
    $("#Location").toggle($("[name=Active_Status_Change]").index(this) === 0);
    $("#Level_of_Care").toggle($("[name=Active_Status_Change]").index(this) === 1);
    $("#Diagnosis").toggle($("[name=Active_Status_Change]").index(this) === 2);
  });

});

.default_hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Type_of_Change"><strong>Type of Change</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input class="validate[required]" name="Type_of_Change" type="radio" value="Termination" />Termination&nbsp; &nbsp; &nbsp;
  <input name="Type_of_Change" type="radio" value="Active Status Change" />Active Status Change&nbsp;</div>

<div style="clear:both">&nbsp;</div>

<div id="Termination_Type" class="default_hidden" style="margin-bottom:15px;"><b>Termination</b>
  <input class="validate[required]" name="Termination_Type" type="radio" value="Death" />Death &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Discharge" />Discharge &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Revocation" />Revocation &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Termination_Type" type="radio" value="Transfer" />Transfer

  <div id="Death" class="default_hidden" style="margin-bottom:15px">
    <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" name="Date_of_Death" placeholder="Date of Death" type="text" /> </span>  <span style="width:25%; float:left"><strong>Time</strong><br />
<input class="validate[required]" name="Time_of_Death" placeholder="Time of Death" type="text" /> </span>
    </div>
  </div>

  <div id="Discharge" class="default_hidden" style="margin-bottom:15px">
    <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" name="Discharge_Date" placeholder="Discharge Date" type="text" /> </span>  <span style="width:25%; float:left"><strong>Reason</strong> &nbsp;&nbsp;<br />
<input class="validate[required]" name="Discharge_Reason" placeholder="Discharge Reason" type="text" /> </span>
    </div>
  </div>

  <div id="Revocation" class="default_hidden" style="margin-bottom:15px">
    <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" name="Revocation_Date" placeholder="Revocation Date" type="text" /> </span><span style="width:25%; float:left"><strong>Reason</strong><br />
<input class="validate[required]" name="Revocation_Reason" placeholder="Revocation Reason" type="text" /> </span>
    </div>
  </div>

  <div id="Transfer" class="default_hidden" style="margin-bottom:15px">
    <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" name="Transfer_Date" placeholder="Transfer Date" type="text" /> </span><span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" name="Transfer_to" placeholder="Transfer to" type="text" /> </span>
    </div>
  </div>
  <div style="clear:both">&nbsp;</div>

</div>


<div id="Active_Status_Change" class="default_hidden" style="margin-bottom:15px;"><b>Active Status Change</b>
  <input class="validate[required]" name="Active_Status_Change" type="radio" value="Location" />Location &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Active_Status_Change" type="radio" value="Level of Care" />Level of Care &nbsp; &nbsp; &nbsp;&nbsp;
  <input name="Active_Status_Change" type="radio" value="Diagnosis" />Diagnosis

  <div id="Location" class="default_hidden" style="margin-bottom:15px">
    <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" name="Date_of_Death" placeholder="Date of Death" type="text" /> </span>  <span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" name="Time_of_Death" placeholder="Time of Death" type="text" /> </span>
    </div>
  </div>

  <div id="Level_of_Care" class="default_hidden" style="margin-bottom:15px">
    <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong>&nbsp; &nbsp;&nbsp;<br />
<input class="validate[required]" name="Discharge_Date" placeholder="Discharge Date" type="text" /> </span>  <span style="width:25%; float:left"><strong>To</strong> &nbsp;&nbsp;<br />
<input class="validate[required]" name="Discharge_Reason" placeholder="Discharge Reason" type="text" /> </span><span style="width:25%; float:left"><strong>Did Location Change</strong> &nbsp;&nbsp;<br />
<input class="validate[required]"name="Discharge_Reason2" placeholder="Discharge Reason" type="text" /> </span>
    </div>
  </div>

  <div id="Diagnosis" class="default_hidden" style="margin-bottom:15px">
    <div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>From</strong>&nbsp;&nbsp;<br />
<input class="validate[required]" name="Revocation_Date" placeholder="Revocation Date" type="text" /> </span><span style="width:25%; float:left"><strong>To</strong><br />
<input class="validate[required]" name="Revocation_Reason" placeholder="Revocation Reason" type="text" /> </span>
    </div>
  </div>
  <div style="clear:both">&nbsp;</div>
</div>

Nesting my form - JavaScript conditions with radio buttons

1 Answers1