Develop Reference

Avoid Reloading of page after save process in MVC

I am Using MVC,Bootstrap in my project .I have Submit button to save data .my design consist of bootstrap nav tabs.
Now my problem is when I save data then I want to change my tab.
My flow is as below
I enter data in first tab then click submit button.
2.Ajax call saves data.after ajax call I wrote tab change tag $('.nav-tabs a[href="#Dependent"]').tab('show'); It changes tab successfully.
3.But after completion debugger again controller is executed and ActionResult index gets executed which then returns index view and then page is reloaded. and my tab is again changed to default first tab
So my problem is how to how to keep changed tab after saving and page reload after save state.
below is my index.chtml only tabs
My Information #*data-toggle="tab"*#
Dependent Information
Finalize
<div class="tab-content well">
<div class="tab-pane active " id="info">
<form data-toggle="validate" role="form" id="defaultForm" method="post">
<table class="table">
<tbody>
<tr>
<td class="auto-style4"></td>
<td style="text-align: center" class="auto-style3"></td>
<td class="auto-style6"> </td>
<td class="auto-style7"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="FirstName"> First Name</label>
</td>
<td class="text-center">
<label for="MiddleName">Middle Name</label>
</td>
<td class="text-center">
<label for="LastName">Last Name</label>
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td>
<input type="text" class="form-control" id="FirstName" placeholder="FirstName" required="required" />
</td>
<td>
<input type="text" class="form-control" id="MiddleName" placeholder="MiddleName" />
</td>
<td>
<input type="text" class="form-control" id="LastName" placeholder="LastName" required="required" />
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="DOB">Date Of Birth</label>
</td>
<td>
<input type="text" class="form-control" id="DOB" placeholder="MM/DD/YY" required="required" />
</td>
<td>
<label for="Age">Age</label> <input type="text" class="form-control" id="MyAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="Department">Department</label>
</td>
<td>
<div class="dropdown">
<select id="ddDept" class="btn dropdown-toggle"><option></option></select>
</div>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<label for="DOJ">Date Of Joining</label>
</td>
<td>
<input type="text" class="form-control" id="DOJ" placeholder="MM/DD/YY" required="required" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="GrossSalary">Gross Salary</label>
</td>
<td>
<input type="text" class="form-control" id="GrossSalary" placeholder="GrossSalary" required="required" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="Tax">Tax</label>
</td>
<td>
<div class="dropdown">
<select id="ddTax" class="btn dropdown-toggle" onchange="calculateNetsal()"><option></option></select>
</div>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<label for="NetSalary">Net Salary</label>
</td>
<td>
<input type="text" class="form-control" id="NetSalary" placeholder="NetSalary" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" class="btn btn-sm btn-primary" value="Create" id="btnAdd" onclick="TabChange(); ">Save and Next</button>
<button type="submit" class="btn btn-sm btn-primary" id="btnClear" onclick="clear();" >Clear</button>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
#*DEPENDENT*#
<div class="tab-pane " id="Dependent">
<form id="Dependent" method="post" action="">
<table class="table">
<tbody>
<tr>
<td class="auto-style4"> </td>
<td style="text-align: center" class="auto-style3"></td>
<td class="auto-style6"> </td>
<td class="auto-style7"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td class="text-center">
<label for="SDOB">Date Of Birth</label>
</td>
<td class="text-center">
<label for="Age">Age</label>
</td>
<td></td>
<td> </td>
</tr>
<tr>
<td class="text-center">
<label for="Spouse">Spouse</label>
</td>
<td>
<input type="text" class="form-control" id="Name" placeholder="Name" />
</td>
<td>
#* <input id="sdob" type="text" />*#
<input type="text" class="form-control" id="S1DOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="SAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td class="text-center">
<label for="CName">Name</label>
</td>
<td class="text-center">
<label for="CDOB">Date Of Birth</label>
</td>
<td class="text-center">
<label for="Age">Age</label>
</td>
<td>
<label for="Relation">Relation</label>
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck1">Child 1</label>
<input type="checkbox" class="custom-control-input" id="Chck1" value="1" onchange="validationCheck(Chck1); enableTextBox();" onclick=" PopulateDropDownList()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="CName" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C1DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C1Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation" class="btn dropdown-toggle" disabled><option></option></select>
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck2">Child 2</label>
<input type="checkbox" class="custom-control-input" id="Chck2" onchange="validationCheck(Chck2); enableTextBox();" value="2" onclick=" PopulateDropDownList2()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C2Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C2DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C2Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation2" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck3">Child 3</label>
<input type="checkbox" class="custom-control-input" id="Chck3" onchange="validationCheck(Chck3); enableTextBox();" value="3" onclick=" PopulateDropDownList3()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C3Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C3DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C3Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation3" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
<tr>
<td class="text-center">
<div class="custom-control custom-checkbox">
<label class="custom-control-label" for="Chck4">Child 4</label>
<input type="checkbox" class="custom-control-input" id="Chck4" onchange="validationCheck(Chck4); enableTextBox();" value="4" onclick=" PopulateDropDownList4()" unchecked>
</div>
</td>
<td>
<input type="text" class="form-control" id="C4Name" placeholder="Name" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C4DOB" placeholder="MM/DD/YY" disabled="disabled" />
</td>
<td>
<input type="text" class="form-control" id="C4Age" placeholder="Age" disabled="disabled" />
</td>
<td>
<select id="ddlRelation4" class="btn dropdown-toggle" disabled><option></option></select>
#* <input type="text" class="dropdown" id="Dept" placeholder="Select" />*#
</td>
</tr>
#* PARENT*#
<tr>
<td></td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkFather" value="Father" OnChange="validationCheck1(chkFather); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkFather">Father</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkMother" value="Mother" OnChange="validationCheck1(chkMother); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkMother">Mother</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkfatherinlaw" value="FatherInLaw" OnChange="validationCheck1(chkfatherinlaw); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkfatherinlaw">Father In Law</label>
</div>
</td>
<td class="text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="chkmotherInLaw" value="MotherInLaw" OnChange="validationCheck1(chkmotherInLaw); enableTextBox();" unchecked>
<label class="custom-control-label" for="chkmotherInLaw">Mother In Law</label>
</div>
</td>
</tr>
<tr>
<td class="text-center">
<label for="Name">Name</label>
</td>
<td>
<input type="text" class="form-control" id="FName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="MName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="FInLName" placeholder="Name" />
</td>
<td>
<input type="text" class="form-control" id="MInLName" placeholder="Name" />
</td>
</tr>
<tr>
<td class="text-center">
<label for="DOB">Date Of Birth</label>
</td>
<td>
<input type="text" class="form-control" id="FDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="MDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="FInLDOB" placeholder="MM/DD/YY" />
</td>
<td>
<input type="text" class="form-control" id="MInLDOB" placeholder="MM/DD/YY" />
</td>
</tr>
<tr>
<td class="text-center"></td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="FDCh" onchange="loaddropdown(); enableTextBox();" unchecked>
<label class="custom-control-label" for="FDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="MDCh" onchange="loaddropdown2();enableTextBox();" unchecked>
<label class="custom-control-label" for="MDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="FInLDCh" onchange="loaddropdown3(); enableTextBox();" unchecked>
<label class="custom-control-label" for="FInLDCh">I Dont Know DOB</label>
</div>
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="MInLDCh" onchange="loaddropdown4(); enableTextBox();" unchecked>
<label class="custom-control-label" for="MInLDCh">I Dont Know DOB</label>
</div>
</td>
</tr>
<tr>
<td class="text-center"></td>
<td align="center">
<div class="dropdown">
<select id="ddFAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="FAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddMAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="MAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddFInLAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="FInLAge" placeholder="Age" disabled="disabled" />
</td>
<td align="center">
<div class="dropdown">
<select id="ddMInLAge" class="btn dropdown-toggle"><option></option></select>
</div>
<label for="Age">Age</label>
<input type="text" class="form-control" id="MInLAge" placeholder="Age" disabled="disabled" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" class="btn btn-sm btn-primary" id="btnAdd1" onclick="TabChange();">Save and Next</button>
</td>
<td>
<button type="submit" class="btn btn-primary" id="btnClear" onclick="clear1();">Clear</button>
</td>
<td></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#btnAdd").click(function () {
debugger;
$.ajax(
{
type: "POST",
url: "/Home/Create11",
data: {FirstName:$("#FirstName").val(), MiddleName:$("#MiddleName").val(),
LastName: $("#LastName").val(),
DOB: $("#DOB").val(),
Age: $("#MyAge").val(),
Department: $("#ddDept").val(),
DOJ: $("#DOJ").val(),
GrossSal:$("#GrossSalary").val(),
Tax: $("#ddTax option:selected").text(),
NetSal: $("#NetSalary").val()
},
async:true,
success: function (data) {
}
});
$('.nav-tabs a[href="#Dependent"]').tab('show');
});
});
</script>

Handle the onsubmit event into the form tag and prevent that:
<form data-toggle="validate" role="form" id="defaultForm" method="post" onsubmit="event.preventDefault();">

In the controller Index method create a optional parameter for the selected tab. Default to tab 0 but when you call from the javascript code set the tab to the one you want.

values in a checkbox won't add

I have 23 checkboxes. Each of them has a value. When the user checks the checkbox, its value will be added to the grandtotal and will show in a text box. If not checked, it will not be added. My problem is, it does not add. It only shows the value of the last checked checkbox. How can I add all the values that are checked?
this is the jquery for my checkboxes.
function tblcheckboxes(cb){
var a=0;
var total = 0;
if (cb.is(":checked")) {
a = parseFloat(cb.val(), 10);
total += a;
}else{
total -= a;
}$('.txt7').val(total.toFixed(2));
}
$(document).ready(function(){
$('[id^="tcbx"]').click(function(){
var cb = $(this);
tblcheckboxes(cb);
grandtotal(cb);
});
});

You need to set the value of total as the value of the total element
function tblcheckboxes(cb) {
var total = 0;
$('input.amount').filter(':checked').each(function() {
total += (+this.value || 0);
});
$('.txt7').val(total.toFixed(2));
}
$(document).ready(function() {
$('input.amount').click(function() {
var cb = $(this);
tblcheckboxes(cb);
grandtotal(cb);
});
});
function ChangeColColor() {}
function grandtotal() {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tblPackage">
<thead>
<tr style="text-align: center;">
<td width="30%"></td>
<td width="1%"></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY</div><span class="s11">$49</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
</td>
</tr>
</thead>
<tbody>
<colgroup>
<col id="colA" />
<col id="colB" />
<col id="colC" />
<col id="colD" />
<col id="colE" />
</colgroup>
<tr>
<td style="text-align: left;">
<h5>Choose Package</h5>
</td>
<td></td>
<td>
<center>
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox amount" data-col="colC" onclick="ChangeColColor(this,'colC')" />
<label for="tcbx1" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox amount" data-col="colD" onclick="ChangeColColor(this,'colD')" />
<label for="tcbx2" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox amount" data-col="colE" onclick="ChangeColColor(this,'colE')" />
<label for="tcbx3" class="css-label"></label>
</center>
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx" class="css-checkbox amount" />
<label for="tcbx" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
<td width="30%">
<lbl id="lblBtn" />
</td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx4" value="19.00" class="css-checkbox amount" />
<label for="tcbx4" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
<td width="30%"></td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx5" value="49.00" class="css-checkbox amount" />
<label for="tcbx5" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
<td width="30%"></td>
<td style="text-align: center;">
<input type="checkbox" name="radiog_dark" id="tcbx6" value="75.00" class="css-checkbox amount" />
<label for="tcbx6" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" checked name="radiog_dark" id="tcbx1" class="css-checkbox" />
<label for="tcbx1" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx2" class="css-checkbox" />
<label for="tcbx2" class="css-label"></label>
</td>
<td valign="top" style="text-align: center;">
<input type="checkbox" disabled checked name="radiog_dark" id="tcbx3" class="css-checkbox" />
<label for="tcbx3" class="css-label"></label>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
Total:
<input type="text" class="txt7" />
I have added a class amount to those input fields which has to trigger a total change

iOS Web App - Slow JavaScript 'add text to input' button

I'm trying to write a kiosk-style web app for iOS. I've created some buttons, which their only purpose is to insert some text into an input box, and everything seems fine. The problem is it's very very slow on the iPad itself.
Here's the function:
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
This is the input box:
<input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true">
And here's how I call the function:
<input type="button" value="GEN" onclick="addCode('GEN');">
I'm not sure what's the problem here. As I've said, this works fine on my computer, but not on the iPad...
Thanks in Advance!
EDIT: Here's the complete code for the page
<!DOCTYPE HTML>
<html>
<head>
<title>Find a Product</title>
<link rel="stylesheet" href="fonts/mainfont.css">
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script>
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
function emptyCode(){
var input2 = document.getElementById("productid");
input2.value = "";
}
</script>
</head>
<body oncontextmenu="return false">
<div align="center">
<div id="find">
<form action="find_product.php" method="POST">
<fieldset>
<p><input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true"></p>
<br />
<table border="0" width="320px">
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="GEN" onclick="addCode('GEN');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="TST" onclick="addCode('TST');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="CSU" onclick="addCode('CSU');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="1" onclick="addCode('1');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="2" onclick="addCode('2');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="3" onclick="addCode('3');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="4" onclick="addCode('4');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="5" onclick="addCode('5');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="6" onclick="addCode('6');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="7" onclick="addCode('7');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="8" onclick="addCode('8');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="9" onclick="addCode('9');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="Clear" onclick="emptyCode();"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="0" onclick="addCode('0');"></p>
</td>
<td width="10px"></td>
<td width="100px">
</td>
</tr>
<!--EndRow-->
</table>
<br />
<p><input type="submit" value="Find"></p>
</fieldset>
</form>
</div>
<!-- end login -->
</div>
</body>
</html>

javascript for form validation works in firefox but not IE8

I am very new to javascript, and took a chunk of code and modified it for my own use. It works fine in Firefox (*NIX and Windows). In IE8, the text field validation works fine, but the select drop downs return as invalid even when an option is selected.
<!DOCTYPE html>
<head>
<meta charset="utf-8 />
<link href="/FNMOC/CSS/styles.main.css" rel="stylesheet" type="text/css">
<title>Fleet Numerical Meteorology and Oceanography Center</title>
<link rel="icon" href="favicon.ico">
<script type="text/javascript">
var RequiredFieldIDs =
'FirstName,LastName,Affiliation,Command,Email,Phone,METOC,Classification,Purpose,Priority,Due,NELat,SWLat,NELong,SWLong';
function CheckRequiredFields()
{
RequiredFieldIDs = RequiredFieldIDs.replace(/[, ]+/,",");
var idList = RequiredFieldIDs.split(",");
var Empties = new Array();
{
var s = TrimFormFieldValues(document.getElementbyId(idList[i]).value);
if (s.length<1) { Empties.push(idList[i]); }
}
if (! Empties.length) { return true; }
var ess = new String ("\n\nThe Following are required:\n");
for (var i=0; i<Empties.length; i++) { ess += '\n\t' + Empties[i]; }
alert (ess);
return false;
}
function TrimFormFieldValues(s)
{
s = s.replace (/^\s*/,"");
s = s.replace (/\s*$/,"");
}
</script>
<script type="text/javascript">
function ShowMenu()
{
var form = document.climo;
var field = form.Classification;
var select = field.selectedIndex;
{
if(select == 4) document.getElementById('tableHide').style.display = '';
else document.getElementById('tableHide').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function ShowMenu2()
{
var form = document.climo;
var field = form.Affiliation;
var select = field.selectedIndex;
{
if(select == 1)document.getElementById('tableHide2').style.display = "";
else document.getElementById('tableHide2').style.display = 'none';
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="header">
<a href="/FNMOC/index.html">
<img class="floatright" src="/FNMOC/IMAGES/fnmoc.png" />
</a>
<br />
<h3>
We produce and deliver weather, ocean and climate information for Fleet Safety, Warfighting Effectiveness and National Defense.
<br />
<br />
Atmospheric and Oceanographic Prediction enabling Fleet Safety and Decision Superiority
</h3>
<br />
<br />
</div>
<div class="left_col">
<iframe src="/FNMOC/menu.html" width="100%" height="800" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="main_col">
<center>
<h2>FORM UNCLASSIFIED UNTIL FILLED OUT</h2>
<h2>Climatology Support Request</h2>
</center>
<form name=climo action="/CGI/mail-form-climo.cgi" method="post" onsubmit="return CheckRequiredFields();">
<table border="0" cellpadding="5" width="100%">
<tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
<center>
Contact Information
</h2>
</b>
<i>
* indicates required field
</i>
</center>
<hr>
</td>
</tr>
<tr>
<td width="30%">
<b>* First Name:</b>
</td>
<td width="70%">
<input type="text" id="FirstName" size="20" maxlength="250" name="1. First Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Last Name:</b>
</td>
<td width="70%">
<input type="text" id="LastName" size="30" maxlength="250" name="2. Last Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Affiliation:</b>
</td>
<td width="70%">
<select id="Affiliation" name="3. Affiliation:" onchange="!!(ShowMenu2());" size="1">
<option></option>
<option>MIL</option>
<option>CIV</option>
<option>CTR></option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<table style="display:none" id="tableHide2">
<tr>
<td>
Branch of Service:
<select name="4. Branch of Service:" size="1">
<option></option>
<option>USN</option>
<option>USAF</option>
<option>USA</option>
<option>USMC</option>
<option>USCG</option>
</select>
</td>
</tr>
<tr>
<td>
Rank:
<input type="text" id="Rank" size="10" maxlength="10" name="5. Rank:">
</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>
* Command/Organization:
</b>
</td>
<td width="70%">
<input="text" id="Command" size="30" maxlength="250" name="6. Command/Organization:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Email:</b>
</td>
<td width="70%">
<input type="text" id="Email" size="30" maxlength="250" name="7. Email:"
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Phone Number:</b>
</td>
<td width="70%">
<input type="text" id="Phone" size="30" maxlength="30" name="8. Phone number:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>DSN:</b>
</td>
<td width="70%">
<input type="text" size="13" maxlength="13" name="9. DSN:">
</input>
</td>
</tr>
<tr>
<td width="30%>
<b>* Are you meterologist or Oceanographer personnel?</b>
</td>
<td width="70%">
<select id="METOC" name="11. METOC:">
<option></option>
<option>YES</option>
<option>NO</option>
</select>
</td>
</tr>
<tr>
<tr width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Security Classification
</h2>
</b>
<center>
<i>
* indicates required field
</i>
</center>
<hr>
<i>
If classified, provide derivative and declassification info please.
</i>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Classification of this request:</b>
</td>
<td width="70%">
<select id="Classification" name="12. Classification:" onchange="!!(ShowMenu()); size="1">
<option></option>
<option>UNCLASSIFIED</option>
<option>CONFIDENTIAL</option>
<option>SECRET</option>
<option>TOP SECRET</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70">
<table style="display:none" id="tableHide">
<tr>
<td>
<input type=checkbox name="12a. Caveat:" value="SI">SI</input>
<input type=checkbox name="12b. Caveat:" value="TK">TK</input>
<input type=checkbox name="12c. Caveat:" value="NOFORN">NOFORN</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>Classified By:</b>
</td>
<td width="70%">
<input type="text" size="40" maxlength="250" name="13. Classified By:">
</input>
</td>
</tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Request Information
</h2>
</b>
<i>
* Indicates Required Field
</i>
<hr>
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center">
<b>
MISSION INFORMATION
</b>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Mission Support Catagory:</b>
</td>
<td width="70%">
<select id=Purpose name="17. Purpose:" size="1">
<option></option>
<option>Combat/Operation</option>
<option>Contingency</option>
<option>Exercise</option>
<option>Training</option>
<option>Experiment</option>
<option>Research</option>
</select>
<b>Mission Name:</b>
<input type="text" size="20" maxlength="250" name="18. Purpose name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Priority</b>
</td>
<td width="70%">
<select id="Priority" name="19. Priority:" size="1">
<option></option>
<option>LOW</option>
<option>MED</option>
<option>HIGH</option>
<option>URGENT</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
<b>* Due date:</b>
</td>
<td width="70%">
<input type="text" size="10" maxlength="10" id="Due" name="20. Date due:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Location</b>
<br />
provide NE/SW corner latitude and longitude in decimal format of each mesh you will use for applicataion/forcasting.
<br />
Northern hemisphere latitude is + and Southern hemisphere latitude is -, Eastern longitude from GMT is + and Western longitude from GMT is -.
</td>
<td width="70%">
<table>
<tr>
<td width="50%" aligh="right">
NE Latitude: <input type="text" id=NELat size="10" maxlength="250" name="22. NE Lat:">
</input>
<br />
SW Latitude: <input type="text" id=SWLat size="10" maxlength="250" name="23. SW Lat:">
</input>
</td>
<td width="50%" align="right">
NE Longitude: &nbsp<input type="text" id=NELong size="10" maxlength="250" name="24. NE Long:">
</input>
<br />
SW Longitude: <input type="text" id=SWLong size="10" maxlength="250" name="25. SW Long:">
</input>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<center>
<input type="submit" name="Submit" value="Submit">
</input>
<input type="reset" name="Reset" value="Reset">
</input>
</center>
</form>
</div>
<br class="cleaner" />
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
</div>
</body>
</html>
The other select fields have the same code, just different names/values. No selection validates in IE8. Your help greatly appreciated.
edited to add all code as per request

The way you validate select box is not correct. You can get value of the selected option like select.value and it will work in Forefox and Chrome. However the proper way to do it so that IE could also understand it, is using the value of selected option:
var el = document.getElementbyId(idList[i]);
var s = TrimFormFieldValues(el.options[el.selectedIndex].value);
If you have different type of controls in your form, you can check if the current one is selectbox with this check:
if (idList[i].tagName == 'SELECT') {
// this is select, get the value using el.options[el.selectedIndex].value
}

How to highlight/colored a table td using column and row values?

In my MVC project, i have the following screen shot.
![enter image description here][1]
Output will be like this..
![enter image description here][2]
![enter image description here][1]
<table id="dealer" border="1" width="150%" height="20%" class="TabAlign">
<tr style="background-color: #808080; color: #fff; font-size: 14px;height: 30px;">
<th class="center_Align">Manufacturer</th>
<th class="center_Align">GLI</th>
<th class="center_Align">Latham</th>
<th class="center_Align">Loop-Loc</th>
<th class="center_Align">Merlin</th>
</tr>
<tr style="height: 30px;">
<td>
<label for="20mil"> 20 MIL</label>
<input style="display: none;" type="text" name="20mil" value="20 Mil" id="20mil" />
</td>
<td class="right_Align">
#*<label for="20milgli">$#Model.Tot_20mil_GLI.ToString("0.00")</label>*#
<div id="20milgli">$#Model.Tot_20mil_GLI.ToString("0.00") </div>
<input style=" display:none;" type="text" name="20milgli" value="$#Model.Tot_20mil_GLI.ToString("0.00")" id="20milgli" />
</td>
<td class="right_Align">
#*<label for="20milLat">$#Model.Tot_20mil_Lat.ToString("0.00")</label>*#
<div id="20milLat">$#Model.Tot_20mil_Lat.ToString("0.00") </div>
<input style=" display:none;" type="text" name="20milLat" value="$#Model.Tot_20mil_Lat.ToString("0.00")" id="20milLat" />
</td>
<td class="right_Align">
#*<label for="20milLoop">$#Model.Tot_20mil_Loop.ToString("0.00")</label>*#
<div id="20milLoop">$#Model.Tot_20mil_Loop.ToString("0.00") </div>
<input style=" display:none;" type="text" name="20milLoop" value="$#Model.Tot_20mil_Loop.ToString("0.00")" id="20milLoop" />
</td>
<td class="right_Align">
#*<label for="20milMer">$#Model.Tot_20mil_Mer.ToString("0.00")</label>*#
<div id="20milMer">$#Model.Tot_20mil_Mer.ToString("0.00") </div>
<input style=" display:none;" type="text" name="20milMer" value="$#Model.Tot_20mil_Mer.ToString("0.00")" id="20milMer" />
</td>
</tr>
<tr style="height: 30px;">
<td>
<label for="2728MIL"> 27/28 MIL</label>
<input style="display: none;" type="text" name="2728MIL" value="2728MIL" id="2728MIL" />
</td>
<td class="right_Align">
#*<label for="2728MILgli">$#Model.Tot_27or28mil_GLI.ToString("0.00")</label>*#
<div id="2728MILgli">$#Model.Tot_27or28mil_GLI.ToString("0.00") </div>
<input style=" display:none;" type="text" name="2728MILgli" value="$#Model.Tot_27or28mil_GLI.ToString("0.00")" id="2728MILgli" />
</td>
<td class="right_Align">
#*<label for="2728MILLat">$#Model.Tot_27or28mil_Lat.ToString("0.00")</label>*#
<div id="2728MILLat">$#Model.Tot_27or28mil_Lat.ToString("0.00") </div>
<input style=" display:none;" type="text" name="2728MILLat" value="$#Model.Tot_27or28mil_Lat.ToString("0.00")" id="2728MILLat" />
</td>
<td class="right_Align">
#*<label for="2728MILLoop">$#Model.Tot_27or28mil_Loop.ToString("0.00")</label>*#
<div id="2728MILLoop">$#Model.Tot_27or28mil_Loop.ToString("0.00") </div>
<input style=" display:none;" type="text" name="2728MILLoop" value="$#Model.Tot_27or28mil_Loop.ToString("0.00")" />
</td>
<td class="right_Align">
#*<label for="2728MILMer">$#Model.Tot_20mil_Lat.ToString("0.00")</label>*#
<div id="2728MILMer">$#Model.Tot_20mil_Lat.ToString("0.00") </div>
<input style=" display:none;" type="text" name="2728MILMer" value="$#Model.Tot_20mil_Lat.ToString("0.00")" id="2728MILMer" />
</td>
</tr>
<tr style="height: 30px;">
<td>
<label for="All27or28MIL"> ALL 27 or 28 MIL</label>
<input style="display: none;" type="text" name="All27or28MIL" value="All27or28MIL" id="All27or28MIL" />
</td>
<td class="right_Align">
#*<label for="All2728mil">$#Model.Tot_27or28mil_GLI.ToString("0.00")</label>*#
<div id="All2728mil">$#Model.Tot_All2728mil_GLI.ToString("0.00") </div>
<input style=" display:none;" type="text" name="All2728mil" value="$#Model.Tot_All2728mil_GLI.ToString("0.00")" id="All2728mil" />
</td>
<td class="right_Align">
#*<label for="All2728MILLat">$#Model.Tot_All2728mil_Lat.ToString("0.00")</label>*#
<div id="All2728MILLat">$#Model.Tot_All2728mil_Lat.ToString("0.00") </div>
<input style=" display:none;" type="text" name="All2728MILLat" value="$#Model.Tot_All2728mil_Lat.ToString("0.00")" id="All2728MILLat" />
</td>
<td class="right_Align">
#*<label for="All2728MILLoop">$#Model.Tot_All2728mil_Loop.ToString("0.00")</label>*#
<div id="All2728MILLoop">$#Model.Tot_All2728mil_Loop.ToString("0.00") </div>
<input style=" display:none;" type="text" name="All2728MILLoop" value="$#Model.Tot_All2728mil_Loop.ToString("0.00")" id="All2728MILLoop" />
</td>
<td class="right_Align">
#*<label for="All2728MILMer">$#Model.Tot_All2728mil_Mer.ToString("0.00")</label>*#
<div id="All2728MILMer">$#Model.Tot_All2728mil_Mer.ToString("0.00") </div>
<input style=" display:none;" type="text" name="All2728MILMer" value="$#Model.Tot_All2728mil_Mer.ToString("0.00")" id="All2728MILMer" />
</td>
</tr>
</table>
<br />
<b>Choose Manufacturer</b>
#if (Model.ChManufacturer.Count() > 0)
{
<table id="tblRadios">
<tr>
#* <td>#Html.DropDownList("manufacturer", Model.ChManufacturer, new { id = "manufacturer" })</td>*#
#foreach (var item in Model.ChManufacturer)
{
if (item.Text == "Select ...")
{
}
else
{
<td align="left">
<td>
<input id="manufacturer:#item.Text" type="radio" name="Manu_rbgrp" value="#item.Text" onclick="GetPatternDetails(this.value);"> #item.Text </td>
#*<td>#Html.RadioButton("ListTypes", item.Text, new { #class = "radbtn" })</td>*#
#* <td>
<div class="listtext">#item.Text</div>
</td>*#
</td>
}
}
</tr>
</table>
}
<b>Choose Material</b>
#if (Model.ChMaterial.Count() > 0)
{
<table>
<tr>
<td></td>
</tr>
<tr>
#foreach (var item in Model.ChMaterial)
{
if (item.Text == "Select ...")
{
}
else
{
<td align="left">
<td>
<input id="material:#item.Text" type="radio" name="Mat_rbgrp" value="#item.Text" onclick="GetMaterialName(this.value);"> #item.Text </td>
</td>
}
}
#* #for (int i = 0; i < Model.ChMaterial.Count(); i++)
{
if (#Model.ChMaterial[i].Text == "Select ...")
{
}
else
{
<td> <input id="rads2:#Model.ChMaterial[i].Text" type="radio" name="Mat_rbgrp" value="#Model.ChManufacturer[i].Text"> #Model.ChMaterial[i].Text
</td>
}
}*#
#*<td>#Html.DropDownList("material", Model.ChMaterial, new { id = "material" })</td>*#
</tr>
</table>
}
I use Radiobutton for manufacturer like (20mil, 2728mil,etc..) and material like(GLI,latham,Loop-Loc,etc).. So if i select the manufacturer as 20mil and material as Latham means that td($2562.38) will be highlighted. how to do this.. any help??

You should first find row and column index and then change find that td according to indexex
Try this fiddle
findtdByIndex(row,column)
Above function returns td by its indexes. you can find this function in fiddle below.
http://jsfiddle.net/Pss9M/72/

$("#tablica tbody tr").each(function() {
$(this).children('td:first').click(function() {
$(this).closest('table').find('td').css({
'background-color':''
});
$(this).closest('tr').find("td:nth-child(3)").css({
'background-color':'red'
});
});
});
Fiddle here