how to use ('select').each for different tables
Hello:
I have two tables in a page and I can show different table based on the "EthnicityGroup". now I want to calculate risk based on different tables. Now when I click "calculate" button, it didn't return anything. Any help is appreciated.
HTML code:
......
<form name="form" autocomplete="off">
<table id="tbEth">
<tr>
<td>Ethnicity Group:</td>
<td style="padding:10px 0px">
<label>
<input type="radio" tabindex="1" name="EthnicityGroup" value="all" checked >
All equations</label>
<br>
<label>
<input type="radio" name="EthnicityGroup" value="asian" >
Asian</label>
<br>
<label>
<input type="radio" name="EthnicityGroup" value="white" >
White</label>
</td>
</tr>
</table>
<table id="tbAsianSNP">
<tr>
<th align="left">SNP [Risk Allele]</th>
<th align="left">Genotype</th>
</tr>
<tr>
<td>rs111111 [A]</td>
<td>
<select name="ref1">
<option value="" selected></option>
<option value="2">AA</option>
<option value="1">AG</option>
<option value="0">GG</option>
</select>
</td>
</tr>
<tr>
<td>rs222222 [T]</td>
<td>
<select name="ref2">
<option value="" selected></option>
<option value="2">TT</option>
<option value="1">TC</option>
<option value="0">CC</option>
</select>
</td>
</tr>
</table>
<table id="tbWhiteSNP">
<tr>
<th align="left">SNP [Risk Allele]</th>
<th align="left">Genotype</th>
</tr>
<tr>
<td>rs333333 [C]</td>
<td>
<select name="ref3">
<option value="" selected></option>
<option value="2">CC</option>
<option value="1">TC</option>
<option value="0">TT</option>
</select>
</td>
</tr>
<tr>
<td>rs4444444 [T]</td>
<td>
<select name="ref4">
<option value="" selected></option>
<option value="2">TT</option>
<option value="1">TC</option>
<option value="0">CC</option>
</select>
</td>
</tr>
</table>
<p id="pError" class="error">Please enter a value for all SNPs for the group listed above.</p>
<p>
<input id="btnCalc" type="button" class="btn" value="Calculate" >
<input id="btnReset" type="button" value=" Reset " class="btn reset">
</p>
</form>
<script src="calc_mn.js" type="text/javascript"></script>
Calc_mn.js code:
// JavaScript Document
$(document).ready(function(e) {
$('#tbEth').change(changeForm);
$('#btnCalc').click(displayRisk);
});
function getValuesFromForm() {
var f = $('form').serializeArray();
var val = new Object();
$.each(f, function(i){
val[f[i].name] = f[i].value;
});
return val;
}
function changeForm(){
....
}
function displayRisk() {
var oc=getValuesFromForm();
var bFieldsValid = true;
$('select').each(function() {
//
----I only want to check if I select all for one table, either tbAsianSNP or tbWhiteSNP.
if ($(this).prop('selectedIndex') == 0)
return bFieldsValid = false;
});
if(bFieldsValid == false) {
.......
if(this.id == 'btnCalc')
$('#pError').show('fast');
}
else {
var aRisk = calculateRisk(oc);
var s = "<strong>" + aRisk.toFixed(2) + "</strong><br>";
s += (aRisk < -1) ? "Low Risk" : ((aRisk > 1) ? "High Risk" : "Average Risk");
$('#RiskScore').html(s);
var s = Math.abs(aRisk.toFixed(2));
s += ' standard deviations ';
s += (aRisk >= 0) ? "higher " : "lower ";
$('#spanExplanation1').html(s);
$('#pInstructions').hide();
$('#pError').hide('fast');
$('#pExplanation').show();
$('#RiskScore').show();
);
}
}
function calculateRisk(formValues) {
var ob=formValues;
var riskScore;
switch (ob.EthnicityGroup){
case 'asian':
riskScore=0.69173*$("[name='ref1']").val()+
1.23685*$("[name='ref2']").val();
break;
case 'white':
riskScore=0.34945*$("[name='ref3']").val()+
0.67919*$("[name='ref4']").val();
break;
}
return riskScore;
}