Fixed table headings not aligning with columns - javascript

When you choose Tier 2, 3, or 5 another table displays but the headings don't line up with the columns. It worked at one time. If I change the html on line 27 to style="display: block;" it starts off looking okay, but once you make a selection it goes out of whack.
I tried to add a jsfiddle link and it didn't take it.
function show_hide_choices() {
var lTier = parseInt(document.getElementById('tier').value);
//alert('show_hide_dependents: lTier = ' + lTier);
if (lTier == 1) // Won (no lines)
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 1. This line will never show.';
document.getElementById("depPhrase").style.display = 'none';
document.getElementById("moreThan1").style.display = 'none';
document.getElementById("lineA").style.display = 'none';
document.getElementById("lineB").style.display = 'none';
document.getElementById("lineC").style.display = 'none';
document.getElementById("lineD").style.display = 'none';
} else if (lTier == 2) // Too (one line)
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 2. Please fill in the information below.';
document.getElementById("depPhrase").style.display = 'block';
document.getElementById("moreThan1").style.display = 'block';
document.getElementById("lineA").style.display = 'block';
document.getElementById("lineB").style.display = 'none';
document.getElementById("lineC").style.display = 'none';
document.getElementById("lineD").style.display = 'none';
} else if (lTier == 3) // Three (two lines)
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 3. Please fill in the information below.';
document.getElementById("depPhrase").style.display = 'block';
document.getElementById("moreThan1").style.display = 'block';
document.getElementById("lineA").style.display = 'block';
document.getElementById("lineB").style.display = 'block';
document.getElementById("lineC").style.display = 'none';
document.getElementById("lineD").style.display = 'none';
} else if (lTier == 4) // Shouldn't be a valid response
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 4. This line will never show.';
document.getElementById("depPhrase").style.display = 'none';
document.getElementById("moreThan1").style.display = 'none';
document.getElementById("lineA").style.display = 'none';
document.getElementById("lineB").style.display = 'none';
document.getElementById("lineC").style.display = 'none';
document.getElementById("lineD").style.display = 'none';
} else if (lTier == 5) // Five (Four lines)
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 5. Please fill in the information below.';
document.getElementById("depPhrase").style.display = 'block';
document.getElementById("moreThan1").style.display = 'block';
document.getElementById("lineA").style.display = 'block';
document.getElementById("lineB").style.display = 'block';
document.getElementById("lineC").style.display = 'block';
document.getElementById("lineD").style.display = 'block';
}
}
div.depPhrase {
width: 100%;
margin: 1% 0% 1% 0%;
}
table.moreThan1 {
width: 75%;
table-layout: fixed;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
col.column1 {
width: 6.5%;
}
col.column2 {
width: 14.5%;
}
col.column3 {
width: 6%;
}
tr.lineA,
tr.lineB,
tr.lineC,
tr.lineD {
display: block;
}
.column1,
.column2,
.column3 {
text-align: left;
}
<table>
<tr>
<th>
<label for="tier">
Choose Tier:
</label>
</th>
<th class="required">*</th>
<td>
<select name="tier" id="tier" tabindex="120" size="4" onchange="show_hide_choices();">
<option value='1' selected="selected">1 - Won</option>
<option value='2'>2 - Too</option>
<option value='3'>3 - Three</option>
<option value='5'>5 - Five</option>
</select>
</td>
</tr>
</table>
<div class="depPhrase" id="depPhrase" style="display: none;">
You have chosen ----. Please fill in the information below.
</div>
<table id="moreThan1" class="moreThan1" style="display: block;">
<colgroup>
<col class="column1">
<col class="column2">
<col class="column3">
</colgroup>
<thead>
<tr>
<th class="column1">First</th>
<th class="column2">Second</th>
<th class="column3">Third</th>
</tr>
<tr>
<th class="column1">Col Hdg</th>
<th class="column2">Col Hdg</th>
<th class="column3">Col Hdg</th>
</tr>
</thead>
<tbody>
<tr id="lineA">
<td class="column1">
<select name="relationshipA" id="relationship" tabindex="820">
<option value="">Select One</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child/Step-Child</option>
</select>
</td>
<td class="column2">
<input name="fullNameA" type="text" id="fullName" maxlength="50" size="40" tabindex="840" value="">
</td>
<td class="column3">
<input name="identNumberA" type="text" id="identNumber" maxlength="11" size="11" tabindex="860" value="">
</td>
</tr>
<tr id="lineB">
<td class="column1">
<select name="relationshipB" id="relationship" tabindex="960">
<option value="">Select One</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child/Step-Child</option>
</select>
</td>
<td class="column2">
<input name="fullNameB" type="text" id="fullName" maxlength="50" size="40" tabindex="980" value="">
</td>
<td class="column3">
<input name="identNumberB" type="text" id="identNumber" maxlength="11" size="11" tabindex="1000" value="">
</td>
</tr>
<tr id="lineC">
<td class="column1">
<select name="relationshipC" id="relationship" tabindex="1100">
<option value="">Select One</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child/Step-Child</option>
</select>
</td>
<td class="column2">
<input name="fullNameC" type="text" id="fullName" maxlength="50" size="40" tabindex="1120" value="">
</td>
<td class="column3">
<input name="identNumberC" type="text" id="identNumber" maxlength="11" size="11" tabindex="1140" value="">
</td>
</tr>
<tr id="lineD">
<td class="column1">
<select name="relationshipD" id="relationship" tabindex="1240">
<option value="">Select One</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child/Step-Child</option>
</select>
</td>
<td class="column2">
<input name="fullNameD" type="text" id="fullName" maxlength="50" size="40" tabindex="1260" value="">
</td>
<td class="column3">
<input name="identNumberD" type="text" id="identNumber" maxlength="11" size="11" tabindex="1280" value="">
</td>
</tr>
</tbody>
</table>

The default display value for a <tr> is table-row. Even you don't know the initial value, you can set to empty string. The browser will fallback for you.
Furthermore, the if branch can be shorten using css class. Check the bottom of the css.
function show_hide_choices() {
var lTier = parseInt(document.getElementById('tier').value);
//alert('show_hide_dependents: lTier = ' + lTier);
// control line display with css class
document.querySelectorAll('.line').forEach(function(e) {
e.classList.remove('line1', 'line2', 'line3', 'line4', 'line5');
e.classList.add(`line${lTier}`);
});
if (lTier == 1) // Won (no lines)
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 1. This line will never show.';
document.getElementById("depPhrase").style.display = 'none';
document.getElementById("moreThan1").style.display = 'none';
} else if (lTier == 2) // Too (one line)
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 2. Please fill in the information below.';
document.getElementById("depPhrase").style.display = 'block';
document.getElementById("moreThan1").style.display = 'block';
} else if (lTier == 3) // Three (two lines)
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 3. Please fill in the information below.';
document.getElementById("depPhrase").style.display = 'block';
document.getElementById("moreThan1").style.display = 'block';
} else if (lTier == 4) // Shouldn't be a valid response
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 4. This line will never show.';
document.getElementById("depPhrase").style.display = 'none';
document.getElementById("moreThan1").style.display = 'none';
} else if (lTier == 5) // Five (Four lines)
{
document.getElementById("depPhrase").innerHTML = 'You have chosen 5. Please fill in the information below.';
document.getElementById("depPhrase").style.display = 'block';
document.getElementById("moreThan1").style.display = 'block';
}
}
div.depPhrase {
width: 100%;
margin: 1% 0% 1% 0%;
}
table.moreThan1 {
width: 75%;
table-layout: fixed;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
col.column1 {
width: 6.5%;
}
col.column2 {
width: 14.5%;
}
col.column3 {
width: 6%;
}
tr.lineA,
tr.lineB,
tr.lineC,
tr.lineD {
display: block;
}
.column1,
.column2,
.column3 {
text-align: left;
}
/* control line display with css class */
#lineA.line1,
#lineB.line1,
#lineC.line1,
#lineD.line1 {
display: none;
}
#lineB.line2,
#lineC.line2,
#lineD.line2 {
display: none;
}
#lineC.line3,
#lineD.line3 {
display: none;
}
#lineA.line4,
#lineB.line4,
#lineC.line4,
#lineD.line4 {
display: none;
}
<table>
<tr>
<th>
<label for="tier">
Choose Tier:
</label>
</th>
<th class="required">*</th>
<td>
<select name="tier" id="tier" tabindex="120" size="4" onchange="show_hide_choices();">
<option value='1' selected="selected">1 - Won</option>
<option value='2'>2 - Too</option>
<option value='3'>3 - Three</option>
<option value='5'>5 - Five</option>
</select>
</td>
</tr>
</table>
<div class="depPhrase" id="depPhrase" style="display: none;">
You have chosen ----. Please fill in the information below.
</div>
<table id="moreThan1" class="moreThan1" style="display: block;">
<colgroup>
<col class="column1">
<col class="column2">
<col class="column3">
</colgroup>
<thead>
<tr>
<th class="column1">First</th>
<th class="column2">Second</th>
<th class="column3">Third</th>
</tr>
<tr>
<th class="column1">Col Hdg</th>
<th class="column2">Col Hdg</th>
<th class="column3">Col Hdg</th>
</tr>
</thead>
<tbody>
<tr id="lineA" class="line">
<td class="column1">
<select name="relationshipA" id="relationship" tabindex="820">
<option value="">Select One</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child/Step-Child</option>
</select>
</td>
<td class="column2">
<input name="fullNameA" type="text" id="fullName" maxlength="50" size="40" tabindex="840" value="">
</td>
<td class="column3">
<input name="identNumberA" type="text" id="identNumber" maxlength="11" size="11" tabindex="860" value="">
</td>
</tr>
<tr id="lineB" class="line">
<td class="column1">
<select name="relationshipB" id="relationship" tabindex="960">
<option value="">Select One</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child/Step-Child</option>
</select>
</td>
<td class="column2">
<input name="fullNameB" type="text" id="fullName" maxlength="50" size="40" tabindex="980" value="">
</td>
<td class="column3">
<input name="identNumberB" type="text" id="identNumber" maxlength="11" size="11" tabindex="1000" value="">
</td>
</tr>
<tr id="lineC" class="line">
<td class="column1">
<select name="relationshipC" id="relationship" tabindex="1100">
<option value="">Select One</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child/Step-Child</option>
</select>
</td>
<td class="column2">
<input name="fullNameC" type="text" id="fullName" maxlength="50" size="40" tabindex="1120" value="">
</td>
<td class="column3">
<input name="identNumberC" type="text" id="identNumber" maxlength="11" size="11" tabindex="1140" value="">
</td>
</tr>
<tr id="lineD" class="line">
<td class="column1">
<select name="relationshipD" id="relationship" tabindex="1240">
<option value="">Select One</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child/Step-Child</option>
</select>
</td>
<td class="column2">
<input name="fullNameD" type="text" id="fullName" maxlength="50" size="40" tabindex="1260" value="">
</td>
<td class="column3">
<input name="identNumberD" type="text" id="identNumber" maxlength="11" size="11" tabindex="1280" value="">
</td>
</tr>
</tbody>
</table>

Related

How to have text fields hidden by default on page load until the relevant drop down option has been selected?

How to keep text fields to stay hidden by default when the page is loaded? But, show up when a relevant drop down option is selected. The javascript works to some extent. But, I want to keep the input fields hidden initially.
<script language="javascript" type="text/javascript">
function toggleMe(val)
{
var designation = document.getElementById('designation');
var organization = document.getElementById('organization');
var lavelOne = document.getElementById('lavel-one');
var lavelTwo = document.getElementById('lavel-two');
if(val=='Trainee')
{
designation.style.display = "none";
organization.style.display = "none";
lavelOne.style.display = "none";
lavelTwo.style.display = "none";
}
else
{
designation.style.display = "block";
organization.style.display = "block";
lavelOne.style.display = "block";
lavelTwo.style.display = "block";
}
}
</script>
</head>
<body>
<form>
<table width="100%" border="0">
<tr>
<td><select name="select" onchange="toggleMe(this.value)">
<option value="0">Select any one</option>
<option value="Trainee">Trainee</option>
<option value="Product">Product</option>
</select></td>
<td> </td>
</tr>
<tr id="lavel-one">
<td>Enter Designation</td>
<td> </td>
</tr>
<tr>
<td><input name="designation" type="text" id="designation" /></td>
<td> </td>
</tr>
<tr id="lavel-two">
<td>Enter Organization</td>
<td> </td>
</tr>
<tr>
<td><input name="organization" type="text" id="organization" /></td>
<td> </td>
</tr>
</table>
</form>
</body>
You can use CSS to hide the elements:
#designation, #lavel-one, #organization, #lavel-two{
display: none;
}
I think you should also hide the elements when val=='0'.
#designation, #lavel-one, #organization, #lavel-two{
display: none;
}
<script language="javascript" type="text/javascript">
function toggleMe(val)
{
var designation = document.getElementById('designation');
var organization = document.getElementById('organization');
var lavelOne = document.getElementById('lavel-one');
var lavelTwo = document.getElementById('lavel-two');
console.log(val);
if(val=='Trainee' || val=='0')
{
designation.style.display = "none";
organization.style.display = "none";
lavelOne.style.display = "none";
lavelTwo.style.display = "none";
}
else
{
designation.style.display = "block";
organization.style.display = "block";
lavelOne.style.display = "block";
lavelTwo.style.display = "block";
}
}
</script>
</head>
<body>
<form>
<table width="100%" border="0">
<tr>
<td><select name="select" onchange="toggleMe(this.value)">
<option value="0">Select any one</option>
<option value="Trainee">Trainee</option>
<option value="Product">Product</option>
</select></td>
<td> </td>
</tr>
<tr id="lavel-one">
<td>Enter Designation</td>
<td> </td>
</tr>
<tr>
<td><input name="designation" type="text" id="designation" /></td>
<td> </td>
</tr>
<tr id="lavel-two">
<td>Enter Organization</td>
<td> </td>
</tr>
<tr>
<td><input name="organization" type="text" id="organization" /></td>
<td> </td>
</tr>
</table>
</form>
</body>

jQuery and digging down elements for a keypress event

Hey all I want to be able to hit the enter when I am on either a dropdown box (select box) or a normal text field box.
My current HTML code looks like:
<tr class="jsgrid-edit-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">SW</option>
<option value="2">HW</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">COMPUTER</option>
<option value="2">MONITOR</option>
<option value="3">NETWORK COMPONENTS</option>
<option value="4">OFFICE EQUIPMENT</option>
<option value="5">SOFTWARE</option>
<option value="6">STORAGE</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
</tr>
I've tried doing the following:
$('.jsgrid-edit-row > input').keypress(function (e) {
var key = e.which;
console.log(e.which);
if (key == 13) // the enter key code
{
console.log('hit enter!');
return false;
}
});
Using .jsgrid-edit-row > input I figured it would find that class and then move to its child and look for any input element that I was currently on?
So what am I doing incorrectly?
Here you go with one more solution https://jsfiddle.net/q7r4ccb4/1/
$('.jsgrid-edit-row > td > input').keypress(function (e) {
var key = e.which;
console.log(e.which);
if (key == 13) // the enter key code
{
console.log('hit enter!');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="jsgrid-edit-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">SW</option>
<option value="2">HW</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">COMPUTER</option>
<option value="2">MONITOR</option>
<option value="3">NETWORK COMPONENTS</option>
<option value="4">OFFICE EQUIPMENT</option>
<option value="5">SOFTWARE</option>
<option value="6">STORAGE</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
</tr>
</table>
Use this instead
$('.jsgrid-edit-row input').keypress(function (e) {
This syntax searches for all input tags present inside the jsgrid-edit-row class

The display block and none is changing the table indentation

I have the below code. The "With Inventory Data" row visibility is dependent on what we select in the dropdown of Product Type. If we select Linux from dropdown, the "With Inventory Data" row gets hidden. Changing it back to Windows in the dropdown leads to show the "With Inventory Data" row. But here the Yes, No radio button are going below the text "With Inventory Data". This needs to be positioned as it was positioned when the page is loaded. Please help
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('warning').style.display = "none";
document.getElementById('inventoryCol1').style.display = "none";
document.getElementById('inventoryCol2').style.display = "none";
flag=0;
}
else {
document.getElementById('warning').style.display = "block";
document.getElementById('inventoryCol1').style.display = "block";
document.getElementById('inventoryCol2').style.display = "block";
flag=1;
}
}
function warningDisplay(myRadio) {
if(myRadio.value == "yes") {
document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data";
}
else {
document.getElementById('warning').innerHTML = "";
}
}
<html>
<body style="background-color:green">
<table>
<tr>
<td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b> </label></td>
<td><select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()" >
<option value="win">Windows</option>
<option value="lin">Linux</option>
</select>
</td>
</tr>
<td style="color: white;text-align: left; " id="inventoryCol1"><label ><b>With Inventory Data</b> </label></td>
<td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2">
<label style="display:inline-block;"><input type="radio" value="no" onClick="warningDisplay(this)" name="inv"/> No </label>
<label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/> Yes</label>
</td>
</tr>
<tr>
<td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> </td>
</tr>
<tr>
<td colspan='2' align="center"><input name="submit"
type="submit" class="login" value="Submit"></td>
</tr>
</table>
</body>
</html>
<td> have initialy display: table-cell
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('warning').style.display = "none";
document.getElementById('inventoryCol1').style.display = "none";
document.getElementById('inventoryCol2').style.display = "none";
flag=0;
}
else {
document.getElementById('warning').style.display = "block";
document.getElementById('inventoryCol1').style.display = "table-cell";
document.getElementById('inventoryCol2').style.display = "table-cell";
flag=1;
}
}
function warningDisplay(myRadio) {
if(myRadio.value == "yes") {
document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data";
}
else {
document.getElementById('warning').innerHTML = "";
}
}
<html>
<body style="background-color:green">
<table>
<tr>
<td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b> </label></td>
<td><select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()" >
<option value="win">Windows</option>
<option value="lin">Linux</option>
</select>
</td>
</tr>
<tr>
<td style="color: white;text-align: left; " id="inventoryCol1"><label ><b>With Inventory Data</b> </label></td>
<td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2">
<label style="display:inline-block;"><input type="radio" value="no" onClick="warningDisplay(this)" name="inv"/> No </label>
<label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/> Yes</label>
</td>
</tr>
<tr>
<td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> </td>
</tr>
<tr>
<td colspan='2' align="center"><input name="submit"
type="submit" class="login" value="Submit"></td>
</tr>
</table>
</body>
</html>
Use visibility property instead of display.
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('warning').style.visibility = "hidden";
document.getElementById('inventoryCol1').style.visibility = "hidden";
document.getElementById('inventoryCol2').style.visibility = "hidden";
flag = 0;
} else {
document.getElementById('warning').style.visibility = "visible";
document.getElementById('inventoryCol1').style.visibility = "visible";
document.getElementById('inventoryCol2').style.visibility = "visible";
flag = 1;
}
}
function warningDisplay(myRadio) {
if (myRadio.value == "yes") {
document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data";
} else {
document.getElementById('warning').innerHTML = "";
}
}
#warning,
#inventoryCol1,
#inventoryCol2 {
display: block;
}
<html>
<body style="background-color:green">
<table>
<tr>
<td>
<label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b> </label>
</td>
<td>
<select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()">
<option value="win">Windows</option>
<option value="lin">Linux</option>
</select>
</td>
</tr>
<td style="color: white;text-align: left; " id="inventoryCol1">
<label><b>With Inventory Data</b> </label>
</td>
<td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2">
<label style="display:inline-block;">
<input type="radio" value="no" onClick="warningDisplay(this)" name="inv" /> No </label>
<label style="display:inline-block;">
<input type="radio" value="yes" onClick="warningDisplay(this)" name="inv" /> Yes</label>
</td>
</tr>
<tr>
<td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b>
</td>
</tr>
<tr>
<td colspan='2' align="center">
<input name="submit" type="submit" class="login" value="Submit">
</td>
</tr>
</table>
</body>
</html>

Firefox 2nd column is having a line break

I have 2 dropdowns in which one will be displayed on page depending the selection of a dropdown:
In firefox, I am getting the form:select tag in second line for both the dropdowns. In chrome and IE it is working perfectly as expected.
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('dbTypeDropdown1').style.display = "none";
document.getElementById('dbTypeDropdown2').style.display = "block";
document.getElementById('dbTypelable1').style.display = "none";
document.getElementById('dbTypelable2').style.display = "block";
flag = 0;
} else {
document.getElementById('dbTypeDropdown1').style.display = "block";
document.getElementById('dbTypeDropdown2').style.display = "none";
document.getElementById('dbTypelable1').style.display = "block";
document.getElementById('dbTypelable2').style.display = "none";
flag = 1;
}
}
function loadHide() {
document.getElementById('dbTypeDropdown1').style.display = "block";
document.getElementById('dbTypeDropdown2').style.display = "none";
document.getElementById('dbTypelable1').style.display = "block";
document.getElementById('dbTypelable2').style.display = "none";
}
<body onLoad=loadHide()>
<table>
<tr>
<td>
<label path="osType" style="text-align: left;" id="osTypelable"><b>Product Type</b> </label>
</td>
<td>
<select path="osType" style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()">
<option value="windows">Windows</option>
<option value="linux">Linux</option>
</select>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td id="dbTypelable1">
<label path="dbType1" style="text-align: left;"><b>Database Type</b>
</label>
</td>
<td id="dbTypeDropdown1">
<select path="dbType1" style="width:205px; height:25px">
<option value="embedded">Embedded</option>
<option value="mssql2008">MS SQL 2008</option>
<option value="mssql2012">MS SQL 2012</option>
<option value="mssql2014">MS SQL 2014</option>
<option value="oracle11">Oracle 11g</option>
<option value="oracle12">Oracle 12c</option>
</select>
</td>
<td id="dbTypelable2">
<label path="dbType2" style="text-align: left;"><b>Database Type</b>
</label>
</td>
<td id="dbTypeDropdown2">
<select path="dbType2" style="width:205px; height:25px;">
<option value="embedded">Embedded</option>
<option value="oracle11">Oracle 11g</option>
<option value="oracle12">Oracle 12c</option>
</select>
</td>
</tr>
</table>
</body>
Chrome's error correction is fixing the issue for you, but the issue remains. The problem is not only in Firefox.
You have a few problems:
You have multiple <tr> tags - you said you wanted to have this in a single row?
You are not using colspan if you need to have multiple <tr> tags.
You are using display: block; - You cannot use display: block on table elements for toggling, because it will break how the table cells work. You can use display: table-cell and display: none, but not display: block.
Here is your modified HTML: (JSFiddle: https://jsfiddle.net/1ntn0yh5/ )
<table>
<tr>
<td>
<label path="osType" style="text-align: left;" id="osTypelable"><b>Product Type</b> </label>
</td>
<td>
<select path="osType" style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()">
<option value="windows">Windows</option>
<option value="linux">Linux</option>
</select>
</td>
<td id="dbTypelable1">
<label path="dbType1" style="text-align: left;"><b>Database Type</b>
</label>
</td>
<td id="dbTypeDropdown1">
<select path="dbType1" style="width:205px; height:25px">
<option value="embedded">Embedded</option>
<option value="mssql2008">MS SQL 2008</option>
<option value="mssql2012">MS SQL 2012</option>
<option value="mssql2014">MS SQL 2014</option>
<option value="oracle11">Oracle 11g</option>
<option value="oracle12">Oracle 12c</option>
</select>
</td>
<td id="dbTypelable2">
<label path="dbType2" style="text-align: left;"><b>Database Type</b>
</label>
</td>
<td id="dbTypeDropdown2">
<select path="dbType2" style="width:205px; height:25px;">
<option value="embedded">Embedded</option>
<option value="oracle11">Oracle 11g</option>
<option value="oracle12">Oracle 12c</option>
</select>
</td>
</tr>
</table>

Calculate Total value for two input fields based on items selected from a select option tag in table

I want to get the value of the Amount pass to either Debit Amount or Credit Amount base on the Type selected if DR is select, then the value should be pass to Debit Amount and if CR is selected, then the value should be pass to Credit Amount. Total Amount should be passed in case of multiple Type options are selected
The HTML
<div>
<label style="margin-bottom:3px;">Debit Amount</label><span>
<input type="text" name="total_debit" id="totalDebit"/></span>
</div>
<div>
<label>Credit Amount</label><span>
<input type="text" name="total_credit" id="totalCredit" /></span>
</div>
<table class="table-bordered table-hover">
<thead>
<tr>
<th width="2%"><input id="check_all" type="checkbox"/></th>
<th width="5%">Type</th>
<th width="5%">Account Code</th>
<th width="15%">Account Name</th>
<th width="10%">Fund</th>
<th width="10%">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_1">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_1">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_1"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_1" class="totalLineAmount">
</td>
</tr>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_2">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_2">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_2"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_2" class="totalLineAmount">
</td>
</tr>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_3">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_3">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_3"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_3" class="totalLineAmount">
</td>
</tr>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_4">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_4">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_4"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_4" class="totalLineAmount">
</td>
</tr>
</tbody>
</table>
Jquery Script
<script>
$(function(){
$(document).on("change",".mySelect",function(e){
e.preventDefault();
var _this=$(this);
var id =_this.val();
if ( id == 1) {
calculateTotalDebit();
}else if (id == 2) {
calculateTotalCredit();
}
function calculateTotalDebit(){
total = 0;
$('.totalLineAmount').each(function(){
if($(this).val() != '' )total += parseFloat( $(this).val() );
$('#totalDebit').val( total.toFixed(2) );
});
}
function calculateTotalCredit(){
total = 0;
$('.totalLineAmount').each(function(){
if($(this).val() != '' )total += parseFloat( $(this).val() );
});
$('#totalCredit').val( total.toFixed(2) );
}
});
});
</script>
$('.totalLineAmount') is selecting all of the amount inputs, so the calculateTotalDebit and calculateTotalCredit functions are adding them all regardless of the DR/CR type. You can check for the type inside the functions, for calculateTotalDebit for example:
function calculateTotalDebit(){
var total = 0;
$('.totalLineAmount').each(function(){
var thisNumber = $(this).attr('id').slice(-1);
// select the type of this amount
var type = $('#type_' + thisNumber);
// add only if the type is DR (val == 1)
if($(this).val() != '' && type.val() == 1)total += parseFloat( $(this).val() );
$('#totalDebit').val( total.toFixed(2) );
});
$(function() {
$(document).on("change", ".mySelect", function(e) {
e.preventDefault();
var _this = $(this);
var id = _this.val();
if (id == 1) {
calculateTotalDebit();
} else if (id == 2) {
calculateTotalCredit();
}
function calculateTotalDebit() {
total = 0;
$('.totalLineAmount').each(function() {
var thisNumber = $(this).attr('id').slice(-1);
// select the type of this amount
var type = $('#type_' + thisNumber);
// add only if the type is DR (val == 1)
if ($(this).val() != '' && type.val() == 1) total += parseFloat($(this).val());
$('#totalDebit').val(total.toFixed(2));
});
}
function calculateTotalCredit() {
total = 0;
$('.totalLineAmount').each(function() {
var thisNumber = $(this).attr('id').slice(-1);
// select the type of this amount
var type = $('#type_' + thisNumber);
// add only if the type is CR (val == 2)
if ($(this).val() != '' && type.val() == 2) total += parseFloat($(this).val());
});
$('#totalCredit').val(total.toFixed(2));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label style="margin-bottom:3px;">Debit Amount</label><span>
<input type="text" name="total_debit" id="totalDebit"/></span>
</div>
<div>
<label>Credit Amount</label><span>
<input type="text" name="total_credit" id="totalCredit" /></span>
</div>
<table class="table-bordered table-hover">
<thead>
<tr>
<th width="2%">
<input id="check_all" type="checkbox" />
</th>
<th width="5%">Type</th>
<th width="5%">Account Code</th>
<th width="15%">Account Name</th>
<th width="10%">Fund</th>
<th width="10%">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_1">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_1">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_1">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_1" class="totalLineAmount">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_2">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_2">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_2">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_2" class="totalLineAmount">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_3">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_3">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_3">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_3" class="totalLineAmount">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_4">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_4">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_4">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_4" class="totalLineAmount">
</td>
</tr>
</tbody>
</table>
I guess you have to update both "Debit Amount" and "Credit Amount" boxes, so you have to call both functions each time. It may be better to merge both functions into one calculateAmounts function. I'd also add event listeners to the .totalLineAmount boxes to update the totals automatically.
Try this code instead (demo):
$(function() {
function calculateTotals() {
var DRTotal = 0,
CRTotal = 0;
$('.totalLineAmount').each(function() {
var $this = $(this),
val = $this.val() || 0,
type = $this.closest('tr').find('.mySelect').val();
if (val && type === "1") {
DRTotal += parseFloat(val);
} else if (val && type === "2") {
CRTotal += parseFloat(val);
}
});
$('#totalDebit').val(DRTotal.toFixed(2));
$('#totalCredit').val(CRTotal.toFixed(2));
}
$(document).on("change", ".mySelect, .totalLineAmount", function(e) {
e.preventDefault();
calculateTotals();
});
});
In my opinion, you should add event listener on each input, calculate and put proper data into total amount in your callback function like
$('.myInputClass').on('change', function() {
// your code here..
updateAmountField(amount);
});
function updateAmountField(amount) {
$('.myTotalAmountInput').value(amount);
}

Categories