I have a form with a table that contains a list of names. For each
name there are two drop downs - relationship1 and relationship2. When
the user selects the option, Other Relative or Other household member,
I need a text input to display allowing them to enter the actual
relationship.
I have something that partially works but I will be using this in
several places so I would like to make the code more reusable by
allowing parameters to be sent in for the select field name and the
input field name. Maybe it needs to be a plugin.
I'm a real n00b with jquery so any help is appreciated.
Here's my script. My first thought was that I could at least pass the
name of the otherDiv to the onSelectChange function but I'm not sure
what the syntax is given the way I'm calling it.
<script>
jQuery(document).ready(function(){
//show:hide relationship other fields on initial page load
$("select[name='relationship1']").each(onSelectChange);
//show:hide relationship other fields on select change
$("select[name='relationship1']").change(onSelectChange);
});
function onSelectChange(){
var selectedText = this.value != 0 ? $
(this).find(":selected").text() : '' ;
var isOther = false;
if(selectedText.indexOf("Other relative") == 0 ||
selectedText.indexOf("Other household member") == 0){
isOther = true;
}
var selectedRow = $(this).attr("currow");
var otherDiv = $("#OtherSection1_" + selectedRow)[isOther ? "show" :
"hide"]("fast");
var otherDivInputs = otherDiv.find("input")[isOther ? "addClass" :
"removeClass"]("required");
}
</script>
Here is a sample of the HTML:
<table id="tablesorter-youth" class="tablesorter" border="0"
cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="header headerSortUp">ID</th>
<th class="header">Name</th>
<th class="header">Primary Caregiver</th>
<th class="header">Caregiver 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>100001</td>
<td>Doe, John</td>
<td class="nowrap">
<select name="relationship1"
id="relationship1_1"
class="datainput" currow="1" style="width:170px">
<option
value="">--SELECT--</option>
<option
value="100001|1|1">Biological Mother</
option>
<option
value="100001|2|1">Biological Father</
option>
<option
value="100001|3|1">Stepparent</option>
<option
value="100001|4|1">Grandparent</option>
<option
value="100001|5|1">Adoptive Parent</option>
<option
value="100001|6|1">Foster Parent</option>
<option
value="100001|7|1">Other relative </option>
<option
value="100001|8|1">Other household member </
option>
</select>
<div id="OtherSection1_1"
name="OtherSection1"
style="display:none" class="otherinput">
<input type="text"
name="OtherText1_1" id="OtherText1_1"
value="" class="datainput otherfield">
</div>
</td>
<td class="nowrap">
<select name="relationship2"
id="relationship2_1"
class="datainput" currow="1" style="width:170px">
<option
value="">--SELECT--</option>
<option
value="100001|1|1">Biological Mother</option>
<option
value="100001|2|1">Biological Father</option>
<option
value="100001|3|1">Stepparent</option>
<option
value="100001|4|1">Grandparent</option>
<option
value="100001|5|1">Adoptive Parent</option>
<option
value="100001|6|1">Foster Parent</option>
<option
value="100001|7|1">Other relative </option>
<option
value="100001|8|1">Other household member </option>
</select>
<div id="OtherSection2_1"
name="OtherSection2"
style="display:none" class="otherinput">
<input type="text"
name="OtherText2_1" id="OtherText2_1"
value="" maxlength="70" class="datainput otherfield" style="width:
150px">
</div>
</td>
</tr>
<tr>
<td>100002</td>
<td>Smith, Jane</td>
<td class="nowrap">
<select name="relationship1"
id="relationship1_2"
class="datainput" currow="2" style="width:170px">
<option
value="">--SELECT--</option>
<option
value="100002|1|2">Biological Mother</
option>
<option
value="100002|2|2">Biological Father</
option>
<option
value="100002|3|2">Stepparent</option>
<option
value="100002|4|2">Grandparent</option>
<option
value="100002|5|2">Adoptive Parent</option>
<option
value="100002|6|2">Foster Parent</option>
<option
value="100002|7|2">Other relative </option>
<option
value="100002|8|2">Other household member </
option>
</select>
<div id="OtherSection1_2"
name="OtherSection1"
style="display:none" class="otherinput">
<input type="text"
name="OtherText1_2" id="OtherText1_2"
value="" class="datainput otherfield">
</div>
</td>
<td class="nowrap">
<select name="relationship2"
id="relationship2_2"
class="datainput" currow="2" style="width:170px">
<option
value="">--SELECT--</option>
<option
value="100002|1|2">Biological Mother</option>
<option
value="100002|2|2">Biological Father</option>
<option
value="100002|3|2">Stepparent</option>
<option
value="100002|4|2">Grandparent</option>
<option
value="100002|5|2">Adoptive Parent</option>
<option
value="100002|6|2">Foster Parent</option>
<option
value="100002|7|2">Other relative </option>
<option
value="100002|8|2">Other household member </option>
</select>
<div id="OtherSection2_2"
name="OtherSection2"
style="display:none" class="otherinput">
<input type="text"
name="OtherText2_2" id="OtherText2_2"
value="" maxlength="70" class="datainput otherfield" style="width:
150px">
</div>
</td>
</tr>
</tbody>
</table>
