We Keep Coding

How to select only one row in table with checkbox

I have a table with x numbers of rows and 4 columns, one column is checkbox and other three are readonly selectboxs. I want the user to select just 1 row to be editable by checking checkbox in first column then if he check another checkbox in another row, the checkbox he previously checked get unchecked and row get readonly again.
So I want the user to select 1 row only to edit and others be readonly.
here is my code but it is not working.
$(document).ready(function(){
$('.col1, .col2, .col3').attr('disabled', true)
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function () {
$(this).find('.selectRow').each(function () {
var checkedRow = $(this).closest('tr').find('input:checkbox:checked'),
col1 = $(this).closest('tr').find('.col1'),
col2 = $(this).closest('tr').find('.col2'),
col3 = $(this).closest('tr').find('col3');
if (checkedRow){
$('.col1, .col2, .col3').removeAttr('disabled')
checkedRow.siblings().prop('checked', false);
}else{
$('.col1, .col2, .col3').attr('disabled', true)
checkedRow.siblings().prop('checked', false);
}
});
});
}
});
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
this is my code:

Without jQuery and using event delegation things may be somewhat simpler:
document.addEventListener(`click`, handle);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
function handle(evt) {
// only do something if a checkbox was clicked
if (evt.target.type === `checkbox`) {
const isChecked = evt.target.checked;
const selectedRow = evt.target.closest(`tr`);
// reset checkboxes, row coloring and disabled state
document.querySelectorAll(`input[type='checkbox']`)
.forEach(cb => {
cb.checked = cb !== evt.target ? false : isChecked;
const row = cb.closest(`tr`);
row.classList[isChecked && row === selectedRow ?
`add` : `remove`](`selected`);
[...row.querySelectorAll(`select`)].filter(r => r !== selectedRow)
.forEach(s => s.setAttribute(`disabled`, true));
selectedRow.querySelectorAll(`select`)
.forEach(s => s[isChecked ?
`removeAttribute` : `setAttribute`](`disabled`, true));
});
}
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
Here's an even more simplified version, acting on the table rows
document.addEventListener(`click`, handle);
// create the table dynamically to keep demo lean
createTable();
function handle(evt) {
if (evt.target.type === `checkbox`) {
const selectedRow = evt.target.closest(`tr`);
document.querySelectorAll(`tr`)
.forEach( row => {
// not selected
if (row !== selectedRow) {
row.querySelector(`[type=checkbox]`).checked = false;
row.classList.remove(`selected`);
return row.querySelectorAll(`select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
// selected
row.classList[[`remove`, `add`][+evt.target.checked]](`selected`);
row.querySelectorAll(`select`).forEach(s =>
s[`${[`set`,`remove`][+evt.target.checked]}Attribute`](`disabled`, true));
});
}
}
function createTable() {
const table = document.createElement(`table`);
const repeat = (str, n) => Array(n + 1).join(str);
const select = `<td><select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>E</option></select></td>`;
const row = `<tr>
<td><input type="checkbox" /></td>
${repeat(select, 3)}</tr>`;
table.insertAdjacentHTML(`beforeend`, repeat(row, 3));
document.body.appendChild(table);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
tr td:nth-child(1) {
padding-right: 6px;
}

The issue is because checkedRow holds a jQuery object. When you use that in an if condition it will always equate to true. You instead need to get the checked property from that element and use that in the condition instead.
Also note that the logic can be made much more succinct and extensible through the use of common selectors instead of incremental ones. In addition, you should look to add the disabled attribute to the HTML directly. Adding it via JS means that there will be a visible flash where the element is loaded as enabled, then when the DOM loads it will be disabled which is not good for your UX.
jQuery($ => {
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function() {
let $row = $(this);
let $checkbox = $row.find('.selectRow');
$row.find('select').prop('disabled', !$checkbox.prop('checked'));
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1" disabled="disabled">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled="disabled">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled="disabled">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>

This works great! uncheck all checkboxes except the one having current focus '.tbl [type="checkbox"]:not(:focus)' then manipulate the select boxes
$(document).ready(function(){
$('.tbl [type="checkbox"]').on('click', function() {
$('.tbl [type="checkbox"]:not(:focus)').prop('checked', false);
$('.tbl select').attr('disabled', true);
$(this).parent().parent().find('select').attr('disabled', !$(this).prop('checked'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1" disabled>
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled>
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled>
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>

Javascript GPA calculator, Calculate button not working

I am new to JavaScript and html. I was trying to make a GPA calculator using Javascript and add it to my blog : http://comptechniqz.blogspot.in/2016/04/gpa-both-sems.html
The layout using html is working exactly fine but the Calculate button does nothing when it is clicked. Can you please help me in finding what am I doing wrong here?
Thanks
My codes :
<form name="sem1">
<table border=5 bgcolor=#BADA55 cellpadding="5" cellspacing="2">
<th>Subject</th>
<th>Grade</th>
<tr>
<td>
<select name="subCRsem1_1" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr1" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_2" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr2" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_3" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr3" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_4" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr4" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_5" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr5" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_6" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr6" align=top maxlength=5></td>
</tr>
<tr align=center>
<td colspan=3><input type="button" value="Calculate" name="CalcButton" onclick="gpaCalc()"></td>
</tr>
</table>
</form>
<br>
</center>
<br>
<script language="JavaScript">
<!--
function gpaCalc()
{
//define valid grades and their values
var grade = new array(11);
var credit = new array(11);
var gradeReceived = new array(6);
var creditHour = new array(6);
// define valid grades and their values
grade = ['A+', 'A', 'A-', 'B', 'B-', 'C', 'C-', 'E', 'F', 'I', 'X'];
credit = [10, 10, 9, 8, 7, 6, 5, 2, 0, 0, 0];
// retrieve user input
gradeReceived[0] = document.sem1.gr1.value;
gradeReceived[1] = document.sem1.gr2.value;
gradeReceived[2] = document.sem1.gr3.value;
gradeReceived[3] = document.sem1.gr4.value;
gradeReceived[4] = document.sem1.gr5.value;
gradeReceived[5] = document.sem1.gr6.value;
// Allocate credits per subject
creditHour[0] = document.sem1.subCRsem1_1[document.sem1.subCRsem1_1.selectedIndex].value;
creditHour[1] = document.sem1.subCRsem1_2[document.sem1.subCRsem1_2.selectedIndex].value;
creditHour[2] = document.sem1.subCRsem1_3[document.sem1.subCRsem1_3.selectedIndex].value;
creditHour[3] = document.sem1.subCRsem1_4[document.sem1.subCRsem1_4.selectedIndex].value;
creditHour[4] = document.sem1.subCRsem1_5[document.sem1.subCRsem1_5.selectedIndex].value;
creditHour[5] = document.sem1.subCRsem1_6[document.sem1.subCRsem1_6.selectedIndex].value;
// calculate gpa
var totalGP = 0, GPA, totalHour=0;
var i, j, validGrade=0;
for(i=0; i<6; i++)
{
for(j=0; j<11;j++)
{
if(gradeReceived[i]==grade[j])
{
validGrade=1;
break;
}
}
if(validGrade==1)
{
totalGP+=credit[j]*creditHour[i];
totalHour+=creditHour[i];
}
else
{
alert("Error- Please use A+, A, A-, B, B-, C, C-, E, F, I or X in grades " );
return 0;
}
}
GPA=totalGP/totalHour;
alert("gpa = " + eval(GPA));
return 0;
}
//-->
</script>

caps your Array.
function gpaCalc()
{
//define valid grades and their values
var grade = new array(11); <-------- array has Caps in the A. should be Array(11) for all;
var credit = new array(11);
var gradeReceived = new array(6);
var creditHour = new array(6);
[UPDATE]
Change this part of your javascript
if(validGrade==1)
{
totalGP+=credit[j]*creditHour[i];
totalHour+=creditHour[i];
}
to this:
if(validGrade==1)
{
totalGP+=credit[j]*creditHour[i];
totalHour+=parseFloat(creditHour[i]);
}

JQuery does not work but last element in all browsers

I am writing a web application for capturing applicant data. I am using JQuery for hiding and showing html tables. The code snippet is
<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function hideDD(){
var gndr = $('#gender').val();
if(gndr=="Female"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var cat = $('#category').val();
if(cat=="SC" || cat=="ST"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var xsrv = $('#exsrv').val();
if(xsrv=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var PD = $('#PWDPH').val();
if(PD=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
}
and the html part is
<tr>
<td bgcolor="#FFF3D5">5. Gender :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="gender" id="gender" onclick="hideDD()">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
<!-- <div id="gender">
Please select whichever is applicable to you <select name="gender" id="gender">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div> -->
</tr>
<tr>
<td bgcolor="#FFF3D5">6. Marital Status :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="maritalstatus" id="maritalstatus">
<option value="">Select</option>
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
<option value="Widow">Widow</option>
<option value="Divorced">Divorced</option>
<option value="Judicially separated and not married">Judicially separated and not married</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">7. Date of Birth: <span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><input name="dateofbirth" type="text" id="dateofbirth" value="<?php echo "$rs1->dateofbirth" ?>" readonly /><span class="style2">(yyyy/mm/dd)</span>
Your age(as on 31st July 2015):<input name="ageyear" type="text" id="ageyear" size="2" readonly>years<input name="agemonth" type="text" id="agemonth" size="2" readonly>months and<input name="ageday" type="text" id="ageday" size="2" readonly>days
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">8. Email:<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><input name="afc_email" type="text" id="afc_email" value="<?php echo "$rs1->email" ?>" readonly />
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">9. Category :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="category" id="category" onclick="hideDD()">
<option value="">Select</option>
<option value="General">General</option>
<option value="OBC">OBC</option>
<option value="SC">SC</option>
<option value="ST">ST</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">10 : You are a citizen of India by<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="citizen" id="citizen">
<option value="">Select</option>
<option value="Birth">Birth</option>
<option value="Domicile">Domicile</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">11 : Religion<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="religion" id="religion">
<option value="">Select</option>
<option value="Hindu">Hindu</option>
<option value="Muslims">Muslims</option>
<option value="Christians">Christians</option>
<option value="Sikhs">Sikhs</option>
<option value="Buddhists">Buddhists</option>
<option value="Zoroastrians">Zoroastrians</option>
<option value="Others">Others</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">12 : Whether Ex-servicemen<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="exsrv" id="exsrv" onclick="enb_dis(); hideDD()">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<table name="table_exserve" id="table_exserve" border="1">
<tr>
<td>Have you already secured employment in civil side under central Govt. in Group C and D in regular basis after availing this benefit</td>
<td bgcolor="#FFF3D5"><select name="exsrv_benefit" id="exsrv_benefit">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select> </td>
</tr>
<tr>
<td>Date of appoinment in arm force</td>
<td bgcolor="#FFF3D5"><input name="exsrv_from" type="text" id="exsrv_from" maxlength="10"/><span class="style2">(yyyy/mm/dd)</span></td>
</tr>
<tr>
<td>Date of discharge / due date of discharge from arm force</td>
<td bgcolor="#FFF3D5"><input name="exsrv_to" type="text" id="exsrv_to" maxlength="10" onchange="milical()"/><span class="style2">(yyyy/mm/dd)</span></td>
</tr>
<tr>
<td>Length of actual Military services</td>
<td bgcolor="#FFF3D5"><input name="miliyear" type="text" id="miliyear" size="2" readonly>years<input name="milimonth" type="text" id="milimonth" size="2" readonly>months and<input name="miliday" type="text" id="miliday" size="2" readonly>days</td>
</tr>
</table>
</tr>
<tr>
<td bgcolor="#FFF3D5">13 : Whether person with disability(PWD) / Physically handicapped (PH)<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="PWDPH" id="PWDPH" onclick="enb_dis(); hideDD()">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<table name="table_PWDPH" id="table_PWDPH" border="1">
<tr>
<td>Nature of disability</td>
<td bgcolor="#FFF3D5"><select name="PWDPH_nature" id="PWDPH_nature">
<option value="">Select</option>
<option value="B">B</option>
<option value="LV">LV</option>
<option value="PD">PD</option>
<option value="D">D</option>
<option value="OA">OA</option>
<option value="OL">OL</option>
<option value="BL">BL</option>
</select> </td>
</tr>
<tr>
<td>Degree of disability</td>
<td bgcolor="#FFF3D5"><select name="PWDPH_degree" id="PWDPH_degree">
<option value="">Select</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>
</td>
</tr>
</table>
</tr>
Every time I did modification, the last jQuery item worked fine, rests did not work. For example in this code only PWDPD element worked fine, category and gender did not worked fine.

I've made several changes in your code like <table> tag was not not implemented properly and without that you had <tr> at beginning. So after editing all those things your code goes as below:
I've kept an alert inside your function which shows up on each element you have called that function and I've change onclick to onchange for your select element.
function hideDD() {
var gndr = $('#gender').val();
alert(gndr);
if(gndr=="Female"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var cat = $('#category').val();
if(cat=="SC" || cat=="ST"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var xsrv = $('#exsrv').val();
if(xsrv=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var PD = $('#PWDPH').val();
if(PD=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td bgcolor="#FFF3D5">5. Gender :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select id="gender" onchange="hideDD()">
<option value="Select">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">6. Marital Status :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="maritalstatus" id="maritalstatus">
<option value="">Select</option>
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
<option value="Widow">Widow</option>
<option value="Divorced">Divorced</option>
<option value="Judicially separated and not married">Judicially separated and not married</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">7. Date of Birth: <span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><input name="dateofbirth" type="text" id="dateofbirth" value="<?php echo "$rs1->dateofbirth" ?>" readonly />
<span class="style2">(yyyy/mm/dd)</span>
Your age(as on 31st July 2015):<input name="ageyear" type="text" id="ageyear" size="2" readonly>years<input name="agemonth" type="text" id="agemonth" size="2" readonly>months and<input name="ageday" type="text" id="ageday" size="2" readonly>days
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">8. Email:<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><input name="afc_email" type="text" id="afc_email" value="<?php echo "$rs1->email" ?>" readonly /></td>
</tr>
<tr>
<td bgcolor="#FFF3D5">9. Category :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="category" id="category" onchange="hideDD()">
<option value="">Select</option>
<option value="General">General</option>
<option value="OBC">OBC</option>
<option value="SC">SC</option>
<option value="ST">ST</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">10 : You are a citizen of India by<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="citizen" id="citizen">
<option value="">Select</option>
<option value="Birth">Birth</option>
<option value="Domicile">Domicile</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">11 : Religion<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="religion" id="religion">
<option value="">Select</option>
<option value="Hindu">Hindu</option>
<option value="Muslims">Muslims</option>
<option value="Christians">Christians</option>
<option value="Sikhs">Sikhs</option>
<option value="Buddhists">Buddhists</option>
<option value="Zoroastrians">Zoroastrians</option>
<option value="Others">Others</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">12 : Whether Ex-servicemen<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="exsrv" id="exsrv" onchange="hideDD()">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<table name="table_exserve" id="table_exserve" border="1">
<tr>
<td>Have you already secured employment in civil side under central Govt. in Group C and D in regular basis after availing this benefit</td>
<td bgcolor="#FFF3D5">
<select name="exsrv_benefit" id="exsrv_benefit">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr>
<td>Date of appoinment in arm force</td>
<td bgcolor="#FFF3D5"><input name="exsrv_from" type="text" id="exsrv_from" maxlength="10"/><span class="style2">(yyyy/mm/dd)</span></td>
</tr>
<tr>
<td>Date of discharge / due date of discharge from arm force</td>
<td bgcolor="#FFF3D5"><input name="exsrv_to" type="text" id="exsrv_to" maxlength="10" onchange="milical()"/><span class="style2">(yyyy/mm/dd)</span></td>
</tr>
<tr>
<td>Length of actual Military services</td>
<td bgcolor="#FFF3D5"><input name="miliyear" type="text" id="miliyear" size="2" readonly>years<input name="milimonth" type="text" id="milimonth" size="2" readonly>months and<input name="miliday" type="text" id="miliday" size="2" readonly>days</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">13 : Whether person with disability(PWD) / Physically handicapped (PH)<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="PWDPH" id="PWDPH" onchange="hideDD();">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<table name="table_PWDPH" id="table_PWDPH" border="1">
<tr>
<td>Nature of disability</td>
<td bgcolor="#FFF3D5">
<select name="PWDPH_nature" id="PWDPH_nature">
<option value="">Select</option>
<option value="B">B</option>
<option value="LV">LV</option>
<option value="PD">PD</option>
<option value="D">D</option>
<option value="OA">OA</option>
<option value="OL">OL</option>
<option value="BL">BL</option>
</select>
</td>
</tr>
<tr>
<td>Degree of disability</td>
<td bgcolor="#FFF3D5">
<select name="PWDPH_degree" id="PWDPH_degree">
<option value="">Select</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>

try place you code inside:
$(document).ready(function(){
YOUR CODE HERE
});

Javascript Travel Calculator not working

I'm trying to make a JavaScript calculator that will calculate the cost for 4 families to travel by train. The cost for one adult ticket is $32 and the cost for a child is $20 with a $10 commission fee. This is my JavaScript. When i run it in Firefox debugger it says amountdue1 is not defined?
<script language="JavaScript/text">
var child = 20;
var adult = 32;
function amountdue1() {
{
if (document.calc.familyname1.value === null || document.calc.familyname1.value.length === 0)
{
alert("Please enter your family name");
}
else
{
var numadults = document.calc.num_Adults1.selectedIndex;
var numchildren = document.calc.num_Children1.selectedIndex;
document.calc.totaldue.value = (numadults * adult) + (numchildren * child) + 10;
}};
this table is in the body. There would be 4 amountdue(s) but i couldn't get one to work.
<table width=100% border=1 class="one" id="table_one">
<br>
<tr>
<th width=20%>Family One</th>
<th width=20%>Family Two</th>
<th width=20%>Family Three</th>
<th width=20%>Family Four</th>
</tr>
<tr>
<td align=center>
<br>
<input type="text" name="familyname1" maxlength="20"><br>
</td>
<td align=center>
<br>
<input type="text" name="familyname2" maxlength="20"><br>
</td>
<td align=center>
<br>
<input type="text" name="familyname3" maxlength="20">
</td>
<td align=center>
<br>
<input type="text" name="familyname4" maxlength="20"><br>
</tr>
<tr>
<td align=center><br>
<select id="num_Adults1" onchange="return total1()">
<option value=0 selected>0 Adults</option>
<option value=1>1 Adult</option>
<option value=1>2 Adults</option>
<option value=1>3 Adults</option>
<option value=1>4 Adults</option>
<option value=1>5 Adults</option>
<option value=1>6 Adults</option>
<option value=1>7 Adults</option>
<option value=1>8 Adults</option>
</select>
</td>
<td align=center><br>
<select id="num_Adults2" onchange="return total2()">
<option value=0 selected>0 Adults</option>
<option value=1>1 Adult</option>
<option value=1>2 Adults</option>
<option value=1>3 Adults</option>
<option value=1>4 Adults</option>
<option value=1>5 Adults</option>
<option value=1>6 Adults</option>
<option value=1>7 Adults</option>
<option value=1>8 Adults</option>
</select>
</td>
<td align=center><br>
<select id="num_Adults3" onchange="return total3()">
<option value=0 selected>0 Adults</option>
<option value=1>1 Adult</option>
<option value=1>2 Adults</option>
<option value=1>3 Adults</option>
<option value=1>4 Adults</option>
<option value=1>5 Adults</option>
<option value=1>6 Adults</option>
<option value=1>7 Adults</option>
<option value=1>8 Adults</option>
</select>
</td>
<td align=center><br>
<select id="num_Adults4" onchange="return total4()">
<option value=0 selected>0 Adults</option>
<option value=1>1 Adult</option>
<option value=1>2 Adults</option>
<option value=1>3 Adults</option>
<option value=1>4 Adults</option>
<option value=1>5 Adults</option>
<option value=1>6 Adults</option>
<option value=1>7 Adults</option>
<option value=1>8 Adults</option>
</select>
</td>
</tr>
<tr>
<td align=center><br>
<select id="num_Children1" onchange="return total1()">
<option value=0 selected>0 Children</option>
<option value=1>1 Child</option>
<option value=1>2 Children</option>
<option value=1>3 Children</option>
<option value=1>4 Children</option>
<option value=1>5 Children</option>
<option value=1>6 Children</option>
<option value=1>7 Children</option>
<option value=1>8 Children</option>
</select>
</td>
<td align=center>
<br>
<select id="num_Children2" onchange="return total2()">
<option value=0 selected>0 Children</option>
<option value=1>1 Child</option>
<option value=1>2 Children</option>
<option value=1>3 Children</option>
<option value=1>4 Children</option>
<option value=1>5 Children</option>
<option value=1>6 Children</option>
<option value=1>7 Children</option>
<option value=1>8 Children</option>
</select>
</td>
<td align=center><br>
<select id="num_Children3" onchange="return total3()">
<option value=0 selected>0 Children</option>
<option value=1>1 Child</option>
<option value=1>2 Children</option>
<option value=1>3 Children</option>
<option value=1>4 Children</option>
<option value=1>5 Children</option>
<option value=1>6 Children</option>
<option value=1>7 Children</option>
<option value=1>8 Children</option>
</select>
</td>
<td align=center><br>
<select id="num_Children4" onchange="return total4()">
<option value=0 selected>0 Children</option>
<option value=1>1 Child</option>
<option value=1>2 Children</option>
<option value=1>3 Children</option>
<option value=1>4 Children</option>
<option value=1>5 Children</option>
<option value=1>6 Children</option>
<option value=1>7 Children</option>
<option value=1>8 Children</option>
</select>
</td>
</tr>
<tr>
<td align=center>
<input type=button onclick="amountdue1()" name="total1" value="Find total">
<input type=reset value=Reset>
<br><br>
<input type="text" name="totaldue" size=15 readonly title="Total Amount" maxlength="9" placeholder="$">
</td>
<td align=center>
<input type=button onclick="total2()" value="Find total">
<input type=reset value=Reset>
<br><br>
<input type="text" name="totaldue2" size=15 readonly title="Total Amount" maxlength="9" placeholder="$">
</td>
<td align=center>
<input type=button onclick="total3()" value="Find total">
<input type=reset value=Reset>
<br><br>
<input type="text" name="totaldue3" size=15 readonly title="Total Amount" maxlength="9" placeholder="$">
</td>
<td align=center>
<input type=button onclick="total4()" value="Find total">
<input type=reset value=Reset>
<br><br>
<input type="text" name="totaldue4" size=15 readonly title="Total Amount" maxlength="9" placeholder="$">
</td>
</tr>
</table>

function amountdue1()
{
if (document.calc.familyname1.value === null || document.calc.familyname1.value.length === 0)
{
alert("Please enter your family name");
}
else
{
var numadults = document.calc.num_Adults1.selectedIndex;
var numchildren = document.calc.num_Children1.selectedIndex;
document.calc.totaldue.value = (numadults * adult) + (numchildren * child) + 10;
}}
You have added extra curly brace inthe function.Also,the function wont end with semi colon.Please check the updated one

I think the problem is the script tag <script language="JavaScript/text">, Looks like browser is not parsing your script element.
<script language="javascript">
The language attribute of script does not have any standard values and it is deprecated also you can simply omit it. Or you can use the type attribute <script type="text/javascript">

Javascript change input values onclick to the value on the same row which the button was clicked

let's say if I select floating rate on the third row and I click on the equal sign button. The rest of the value of all the other row will change its value to floating rate. I want to apply tis function to all the other rows too.
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$('.equal').on('click', function() {
$('.dropDown').val('Floating Rate');
})
});
</script>
Table:
<td>
<select class="dropDown" style="width:150px" name="rate_value_1">
<option value="<?php echo $_SESSION['rate_value_1'] ;?>"><?php echo $_SESSION['rate_value_1'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="button" value="select" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_2">
<option value="<?php echo $_SESSION['rate_value_2'] ;?>"><?php echo $_SESSION['rate_value_2'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="button" value="select" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_3">
<option value="<?php echo $_SESSION['rate_value_3'] ;?>"><?php echo $_SESSION['rate_value_3'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="button" value="select" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_4">
<option value="<?php echo $_SESSION['rate_value_4'] ;?>"><?php echo $_SESSION['rate_value_4'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="button" value="select" class="equal" /></td>

in jquery,
$('.dropDown').change(function(e) {
//Here you can do you programming
console.log(e.currentTarget);
});
for more info,
http://api.jquery.com/change/

$("#dropDown").change(function () {
var str = "";
$("#dropDown option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})

You have a lot of problems in there.
First you cannot have id="dropDown" multiple times. Use class="dropDown" instead.
Second, one suggestion is to use a button instead of img.
Here is the js:
<script type="text/javascript">
$(document).ready(function() {
$('.equal').on('click', function() {
$('.dropDown').val('Floating Rate');
})
});
</script>
And html changes:
<select class="dropDown" style="width:150px" name="rate_value_1">
<input type="button" value="select" class="equal" />

Ok Psinyee, here is what you want, and also explained.
<script type="text/javascript">
$(document).ready(function() {
$('.equal').on('click', function() {
// find coresponding dropdown
// with select inside (this is the button ->parent is the td-> previous td)
var crtDropdown = $('select', $(this).parent().prev('td'));
if(crtDropdown.prop('selectedIndex') > 0) {
// something is selected, not first option
// change values for following selects
// select ->parent td->parent tr->all next trs->select inside trs->set val to crtDropdown.val();
crtDropdown.parent().parent().nextAll('tr').find('select').val(crtDropdown.val());
}
})
});
</script>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_1">
<option value="<?php echo $_SESSION['rate_value_1'] ;?>"><?php echo $_SESSION['rate_value_1'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="image" src="equal_button.png" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_2">
<option value="<?php echo $_SESSION['rate_value_2'] ;?>"><?php echo $_SESSION['rate_value_2'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="image" src="equal_button.png" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_3">
<option value="<?php echo $_SESSION['rate_value_3'] ;?>"><?php echo $_SESSION['rate_value_3'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="image" src="equal_button.png" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_4">
<option value="<?php echo $_SESSION['rate_value_4'] ;?>"><?php echo $_SESSION['rate_value_4'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="image" src="equal_button.png" class="equal" /></td>
</tr>
</table>
</form>