seniorjono seniorjono - 21 days ago 5
jQuery Question

Jquery multiple selection in repeating table with filters

I am currently building a table system for a Cancer Survey and have run into an issue regarding multiple choice filters on a new table row. See below for an example.

When selecting Lymphoma, Leukemia and Other, I want the table to create an additional input box using jquery for the user to be able to enter information in. This works for the first row, but when generating an additional row, there are issues with the additional user input, and user selection not creating additional selection boxes.

I've recreated the issue in codepen, any help would be massively appreciated.
https://codepen.io/seniorjono/pen/qNYYJp

EDITED: I've changed the original javascript, to now just generate a static Table Row, however I still cannot get my jquery to trigger the additional input boxes. (See 'cancer2' in the codepen)

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<ol>
<section class="form_card">
<li>
<h1>Lorem ipsum dolor sit amet</h1></li>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</h2>
<form id="pt_13" name="pt_13">
<div class="content_split" style="width:25%;">
<label class="check check--radio reveal_content">Yes
<input type="radio" id="pt_1_yes" name="radio" />
<div class="check__indicator"></div>
</label>
</div>
<div class="content_split">
<label class="check check--radio hide_content">No
<input type="radio" id="pt_1_no" name="radio" />
<div class="check__indicator"></div>
</label>
</div>
</form>
<div class="hidden_content">
<form id="pt_14" name="pt_14">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mans">
<tr>
<td>
<div class="select_new" id="pt_13_1">
<label>
<select>
<option selected disabled>Select Relation</option>
<option>Child</option>
<option>Father</option>
<option>Maternal grandfather</option>
<option>Materal grandmother</option>
<option>Paternal grandfather</option>
<option>Paternal grandmother</option>
<option>Sibling</option>
</select>
</label>
</div>
</td>
<td>
<div class="select_new" id="pt_13_2">
<label>
<select class="cancer">
<option selected disabled> Select Cancer</option>
<option value="Bladder">Bladder</option>
<option value="Breast">Breast</option>
<option value="Colorectal">Colorectal</option>
<option value="Kidney">Kidney</option>
<option value="Lung">Lung</option>
<option value="Leukemia">Leukemia</option>
<option value="Lymphoma">Lymphoma</option>
<option value="Melanoma">Melanoma</option>
<option value="MGUS">Multiple Myeloma/MGUS</option>
<option value="Myelodysplasia">Myelodysplasia/myelodysplastic syndrome</option>
<option value="Prostate">Prostate</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</td>
<td class="cancer_optional">
<div class="select_new Leukemia_type">
<label>
<select>
<option selected disabled>Type of Leukemia</option>
<option>Acute myeloid leukemia (AML)</option>
<option>Chronic myeloid leukemia (CML)</option>
<option>Acute lymphocytic leukemia (ALL)</option>
<option>Chronic lymphocytic leukemia (CLL)</option>
<option>Plamsa cell leukemia</option>
<option>Other leukemia type</option>
<option>Unknown leukemia type</option>
</select>
</label>
</div>
<div class="select_new Lymphoma_type">
<label>
<select>
<option selected disabled>Type of Lymphoma</option>
<option>Hodgkin lymphoma</option>
<option>Non-Hodgkin lymphoma (NHL)</option>
<option>Other lymphoma type</option>
<option>Unkown lymphoma type</option>
</select>
</label>
</div>
<div class="Other_type">
<input type="text" class="other_input_text" id="Other_input_box" placeholder="Please Specify" required/>
</div>
</td>
<td><i class="fa fa-trash"></i>
</td>
</tr>
</table>
<div id="addTableRow" class="hidden_content"><i class="fa fa-plus"></i> Add family member</div>
</div>
</form>
</section>
</ol>


JS

// This section toggles the lymphoma/leukemia/other additional details

$('.cancer').change(function() {
if ($(this).val() == 'Leukemia') {
$(this).closest('td').next('td').find('.Leukemia_type').delay(300).slideDown();
$('.Lymphoma_type, #Other_type').slideUp();}

else if ($(this).val() == 'Lymphoma') {
$(this).closest('td').next('td').find('.Lymphoma_type').delay(300).slideDown();
$('.Leukemia_type, .Other_type').slideUp();}

else if ($(this).val() == 'Other') {
$(this).closest('td').next('td').find('.Other_type').delay(300).slideDown();
$('.Leukemia_type, .Lymphoma_type').slideUp();
}
else {
$('.Leukemia_type, .Lymphoma_type, .Other_type').slideUp()
}
});



// Add Row to table with current details duplicated

$(function() {
$('table').on('click', 'tr i', function(e) {
e.preventDefault();
$(this).parents('tr').remove();
});

$("#addTableRow").click(function() {
$("#mans").each(function() {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function() {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
});



// Reveal this section upon user selection of yes

$(function() {
$('.reveal_content').change(function() {
$(this).parents(".form_card").find(".hidden_content").slideToggle();
});
$('.hide_content').change(function() {
$(this).parents(".form_card").find(".hidden_content").slideToggle();
});
});


I'd appreciate any help, as I really am quite stuck at the moment!

Answer
  1. Use delegation when working with dynamic HTML (will allow you to show hide elements in dynamic HTML)
  2. Use a variable to store row HTML. Alternative is to use a hidden element in HTML holding that (to ensure that any selections in existing HTML - like selected option is not cloned to new row)
  3. Toggle will not help with showing hiding content using your radio buttons the way you want (in original code, click on "No" first go and see for yourself)

	 // This section toggles the lymphoma/leukemia/other additional details
	$('.hidden_content').on('change', '.cancer', function() {
	  if ($(this).val() == 'Leukemia') {
	    $(this).closest('tr').find('.Leukemia_type').delay(300).slideDown();
	    $(this).closest('tr').find('.Lymphoma_type,  #Other_type').slideUp();
	  } else if ($(this).val() == 'Lymphoma') {
	    $(this).closest('tr').find('.Lymphoma_type').delay(300).slideDown();
	    $(this).closest('tr').find('.Leukemia_type, .Other_type').slideUp();
	  } else if ($(this).val() == 'Other') {
	    $(this).closest('tr').find('.Other_type').delay(300).slideDown();
	    $(this).closest('tr').find('.Leukemia_type, .Lymphoma_type').slideUp();
	  } else {
	    $(this).closest('tr').find('.Leukemia_type, .Lymphoma_type, .Other_type').slideUp()
	  }
	});



	 // Add Row to table with current details duplicated
	$('table').on('click', 'tr i', function(e) {
	  e.preventDefault();
	  $(this).closest('tr').remove();
	});

	var duplicate = "<tr>" +
	  "  <td>" +
	  "    <div id=\"pt_13_1\" class=\"select_new\">" +
	  "      <label>" +
	  "        <select>" +
	  "          <option disabled=\"\" selected=\"\">Select Relation</option>" +
	  "          <option>Child</option>" +
	  "          <option>Father</option>" +
	  "          <option>Maternal grandfather</option>" +
	  "          <option>Materal grandmother</option>" +
	  "          <option>Paternal grandfather</option>" +
	  "          <option>Paternal grandmother</option>" +
	  "          <option>Sibling</option>" +
	  "        </select>" +
	  "      </label>" +
	  "    </div>" +
	  "  </td>" +
	  "  <td>" +
	  "    <div id=\"pt_13_2\" class=\"select_new\">" +
	  "      <label>" +
	  "        <select class=\"cancer\">" +
	  "          <option disabled=\"\" selected=\"\"> Select Cancer</option>" +
	  "          <option value=\"Bladder\">Bladder</option>" +
	  "          <option value=\"Breast\">Breast</option>" +
	  "          <option value=\"Colorectal\">Colorectal</option>" +
	  "          <option value=\"Kidney\">Kidney</option>" +
	  "          <option value=\"Lung\">Lung</option>" +
	  "          <option value=\"Leukemia\">Leukemia</option>" +
	  "          <option value=\"Lymphoma\">Lymphoma</option>" +
	  "          <option value=\"Melanoma\">Melanoma</option>" +
	  "          <option value=\"MGUS\">Multiple Myeloma/MGUS</option>" +
	  "          <option value=\"Myelodysplasia\">Myelodysplasia/myelodysplastic syndrome</option>" +
	  "          <option value=\"Prostate\">Prostate</option>" +
	  "          <option value=\"Other\">Other</option>" +
	  "        </select>" +
	  "      </label>" +
	  "    </div>" +
	  "  </td>" +
	  "  <td class=\"cancer_optional\">" +
	  "    <div class=\"select_new Leukemia_type\">" +
	  "      <label>" +
	  "        <select>" +
	  "          <option disabled=\"\" selected=\"\">Type of Leukemia</option>" +
	  "          <option>Acute myeloid leukemia (AML)</option>" +
	  "          <option>Chronic myeloid leukemia (CML)</option>" +
	  "          <option>Acute lymphocytic leukemia (ALL)</option>" +
	  "          <option>Chronic lymphocytic leukemia (CLL)</option>" +
	  "          <option>Plamsa cell leukemia</option>" +
	  "          <option>Other leukemia type</option>" +
	  "          <option>Unknown leukemia type</option>" +
	  "        </select>" +
	  "      </label>" +
	  "    </div>" +
	  "    <div class=\"select_new Lymphoma_type\">" +
	  "      <label>" +
	  "        <select>" +
	  "          <option disabled=\"\" selected=\"\">Type of Lymphoma</option>" +
	  "          <option>Hodgkin lymphoma</option>" +
	  "          <option>Non-Hodgkin lymphoma (NHL)</option>" +
	  "          <option>Other lymphoma type</option>" +
	  "          <option>Unkown lymphoma type</option>" +
	  "        </select>" +
	  "      </label>" +
	  "    </div>" +
	  "    <div class=\"Other_type\">" +
	  "      <input type=\"text\" required=\"\" placeholder=\"Please Specify\" id=\"Other_input_box\" class=\"other_input_text\">" +
	  "    </div>" +
	  "  </td>" +
	  "  <td><i class=\"fa fa-trash\"></i>" +
	  "  </td>" +
	  "</tr>";

	$("#addTableRowStatic").click(function() {
	  $("tbody").append(duplicate);
	});



	 // Reveal this section upon user selection of yes
	function reveal() {
	  $(".hidden_content").show('slideDown');
	}

	function unreveal() {
	  $(".hidden_content").hide('slideUp');
	}
	$('#pt_13').change(function() {
	  if ($('#pt_1_yes').is(':checked')) {
	    reveal();
	  } else {
	    unreveal();
	  }
	});
body {
  background: #e3f2fd;
}
.Leukemia_type,
.Lymphoma_type,
.Other_type {
  display: none;
}
.form_card,
.form_card_result {
  width: 80%;
  max-width: 1150px;
  margin: 50px auto;
  border-radius: 3px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .15);
  color: #555;
  font-family: Texta-Medium;
  font-size: 1.5rem;
  font-weight: 400;
  background-color: #fff;
  padding: 2em;
  h1 {
    font-family: Texta-Medium;
    color: #555;
    font-size: 2rem;
    margin: 1em 0 0.5em;
    text-decoration: underline;
    span {
      text-decoration: underline;
    }
  }
  h2 {
    font-family: Texta-Medium;
    color: #0d47a1;
    font-size: 1.5rem;
    margin: 1em 0 1.5em;
    span {
      text-decoration: underline;
    }
  }
  h5 {
    font-family: TradeGothicLTStd-Cn18;
    color: #0d47a1;
    font-size: 3rem;
    margin: 1em 0 1.5em;
    font-weight: 300;
  }
  td {
    padding: 1em 0;
  }
  .content_split {
    display: inline-block;
    height: 75px;
    width: 50%;
    p {
      display: inline-block;
    }
  }
  table {
    color: #555;
    .select_new {
      width: 80%;
      select {
        width: 100%;
      }
    }
  }
  #addTableRow,
  #addTableRow2,
  #addTableRow3,
  #addTableRow4,
  #addTableRowStatic {
    font-family: Texta-Medium;
    cursor: pointer;
    font-size: 1.2rem;
    color: #555;
    i {
      vertical-align: middle;
      padding-right: 10px;
    }
  }
  .fa-trash {
    cursor: pointer;
  }
}
.hidden_content,
.hidden_card {
  display: none;
}
// Disables first delete row
tr:nth-child(1) {
  td i: nth-child(1) {
    pointer-events: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<ol>
  <section class="form_card">
    <li>
      <h1>Do you have a family history of cancer</h1>
    </li>
    <h2>If yes, please indicate the relatives relationship to you and the type of cancer each one of them was diagnosed with</h2>
    <form id="pt_13" name="pt_13">
      <div class="content_split" style="width:25%;">
        <label class="check check--radio reveal_content">Yes
          <input type="radio" id="pt_1_yes" name="radio" />
          <div class="check__indicator"></div>
        </label>
      </div>
      <div class="content_split">
        <label class="check check--radio hide_content">No
          <input type="radio" id="pt_1_no" name="radio" />
          <div class="check__indicator"></div>
        </label>
      </div>
    </form>
    <div class="hidden_content">
      <form id="pt_14" name="pt_14">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" id="CancerTab">
          <tr>
            <td>
              <div class="select_new" id="pt_13_1">
                <label>
                  <select>
                    <option selected disabled>Select Relation</option>
                    <option>Child</option>
                    <option>Father</option>
                    <option>Maternal grandfather</option>
                    <option>Materal grandmother</option>
                    <option>Paternal grandfather</option>
                    <option>Paternal grandmother</option>
                    <option>Sibling</option>
                  </select>
                </label>
              </div>
            </td>
            <td>
              <div class="select_new" id="pt_13_2">
                <label>
                  <select class="cancer">
                    <option selected disabled>Select Cancer</option>
                    <option value="Bladder">Bladder</option>
                    <option value="Breast">Breast</option>
                    <option value="Colorectal">Colorectal</option>
                    <option value="Kidney">Kidney</option>
                    <option value="Lung">Lung</option>
                    <option value="Leukemia">Leukemia</option>
                    <option value="Lymphoma">Lymphoma</option>
                    <option value="Melanoma">Melanoma</option>
                    <option value="MGUS">Multiple Myeloma/MGUS</option>
                    <option value="Myelodysplasia">Myelodysplasia/myelodysplastic syndrome</option>
                    <option value="Prostate">Prostate</option>
                    <option value="Other">Other</option>
                  </select>
                </label>
              </div>
            </td>
            <td class="cancer_optional">
              <div class="select_new Leukemia_type">
                <label>
                  <select>
                    <option selected disabled>Type of Leukemia</option>
                    <option>Acute myeloid leukemia (AML)</option>
                    <option>Chronic myeloid leukemia (CML)</option>
                    <option>Acute lymphocytic leukemia (ALL)</option>
                    <option>Chronic lymphocytic leukemia (CLL)</option>
                    <option>Plamsa cell leukemia</option>
                    <option>Other leukemia type</option>
                    <option>Unknown leukemia type</option>
                  </select>
                </label>
              </div>
              <div class="select_new Lymphoma_type">
                <label>
                  <select>
                    <option selected disabled>Type of Lymphoma</option>
                    <option>Hodgkin lymphoma</option>
                    <option>Non-Hodgkin lymphoma (NHL)</option>
                    <option>Other lymphoma type</option>
                    <option>Unkown lymphoma type</option>
                  </select>
                </label>
              </div>
              <div class="Other_type">
                <input type="text" class="other_input_text" id="Other_input_box" placeholder="Please Specify" required/>
              </div>
            </td>
            <td><i class="fa fa-trash"></i>
            </td>
          </tr>
        </table>
        <div id="addTableRowStatic" class="hidden_content"><i class="fa fa-plus"></i> Add family member</div>
    </div>
    </form>
  </section>
</ol>