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>
Related
$("#srch").on("keyup", function() {
var value = $(this).val();
$("#Filtertable tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:nth(1)").val();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
<table id="Filtertable" style="width: 40%; border: 1px solid black;">
<thead>
<tr>
<th></th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Tom"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Jerry"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Happy Morning"> </td>
</tr>
</tbody>
</table>
This is my code, Can someone explain How to get the value of textbox inside the td
How can I filter the data after adding some extra rows, Tried Many examples but nothing worked so far, Please Help.
Is there any alternative Way available to do this filter???
Nothing worked so far since I dont know How to get it done!
Any solution without using JQuery is also appriciated..
There is 2 problems.
To get the value in a <td> you have to use .text(), or you can add input in the selector.
var id = $row.find("td:nth(1) input").val();
if (id.indexOf(value) == -1) {
$row.hide();
} else {
$row.show();
}
Also it has to be id.indexOf(value) == -1
Demo
$("#srch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#Filtertable tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:nth(1) input").val().toLowerCase();
if (id.indexOf(value) == -1) {
$row.hide();
} else {
$row.show();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Filtertable" style="width: 40%; border: 1px solid black;">
<thead>
<tr>
<th></th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Tom"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Hi Jerry"> </td>
</tr>
<tr>
<td>
<input type="checkbox"> </td>
<td>
<input type="text" Value=" Happy Morning"> </td>
</tr>
</tbody>
</table>
<input id="srch" />
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>
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>
Please help me. I am new to javascript. I want my table entries deleted on form itself when user selects row using javascript and html.
I tried delet function but it remove heading too which i dont want. user should select row and it should be deleted.
html code:
<body>
<form>
<h2>Receipt</h2>
<table>
<tr>
<td>
<label for="ctype">Charge Type</label>
</td>
<td>
<input id="ctype" name="ctype" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="amt">Amount</label>
</td>
<td>
<input id="amt" name="amt" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="camt">Cash Amount</label>
</td>
<td>
<label>100</label>
</td>
</tr>
</table>
<br><input type="reset" name="reset" id="resetbtn" style="border: none; height:30px; width:100px;" class="resetbtn" value="Reset" />
<button type="button" style="border: none; height:30px; width:100px;" onClick="updateForm();"/>Add To Table</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="saveForm()" />Save</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="deletRow()" />Remove</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Charge Type</th>
<th scope="col" width="120">Amount</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="amtTotals"></div></td>
</tr>
</table>
</body>
Javascript code:
<script>
var amtTotal = 0;
function updateForm() {
var ctype = document.getElementById("ctype").value;
var amt = document.getElementById("amt").value;
amtTotal = amtTotal + parseInt(amt);
document.getElementById("amtTotals").innerHTML=amtTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML=ctype;
cell2.innerHTML=amt;
}
function saveForm() {
if( amtTotal < 100 ){
alert("Thank you");
} else
{
alert("Invalid Amount")
}
}
function deletRow() {
document.getElementById("results").deleteRow(0);
}
</script>
Thank You. Sorry for grammar.
1) create checkbox for each row
2) based on checkbox remove the row
3) while remove you need to minus the current row amount in total amount like this
4) And there was a trick you need to delete the row from last like bottom to top . if you delete the row top to bottom it will throw row index error.
var amtTotal = 0;
function updateForm() {
var ctype = document.getElementById("ctype").value;
var amt = document.getElementById("amt").value;
amtTotal = amtTotal + parseInt(amt);
document.getElementById("amtTotals").innerHTML=amtTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=ctype;
cell2.innerHTML=amt;
cell3.innerHTML='<input type="checkbox" name="deletee" value="1" >';
}
function saveForm() {
if( amtTotal < 100 ){
alert("Thank you");
} else
{
alert("Invalid Amount")
}
}
function deletRow() {
//document.getElementById("results").deleteRow(0);
var table = document.getElementById('results');
var rowCount = table.rows.length;
//alert(rowCount);
var row_ids =[];
// var i=1 to start after header
for(var i=rowCount-1; i>=rowCount-(rowCount-1); i--) {
var row = table.rows[i];
// index of td contain checkbox is 8
if(row)
{
var chkbox = row.cells[2].getElementsByTagName('input')[0];
var current_row_amount = row.cells[1].innerHTML;
//alert(chkbox.checked);
if('checkbox' == chkbox.type && true == chkbox.checked) {
//row_ids.push(i);
table.deleteRow(i);
amtTotal= amtTotal-parseInt(current_row_amount);
document.getElementById("amtTotals").innerHTML=amtTotal;
}
}
}
}
<form>
<h2>Receipt</h2>
<table>
<tr>
<td>
<label for="ctype">Charge Type</label>
</td>
<td>
<input id="ctype" name="ctype" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="amt">Amount</label>
</td>
<td>
<input id="amt" name="amt" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="camt">Cash Amount</label>
</td>
<td>
<label>100</label>
</td>
</tr>
</table>
<br><input type="reset" name="reset" id="resetbtn" style="border: none; height:30px; width:100px;" class="resetbtn" value="Reset" />
<button type="button" style="border: none; height:30px; width:100px;" onClick="updateForm();"/>Add To Table</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="saveForm()" />Save</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="deletRow()" />Remove</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Charge Type</th>
<th scope="col" width="120">Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="amtTotals"></div></td>
</tr>
</table>
I'm working on this table that has checkboxes for each row. Basically, I want all of the email input fields to be disabled once page loads. If the users clicks on the checkbox that belongs to a row then the email input field for that row should be enabled so the user can type in an email. Finally, if the user clicks on the Select all checkbox all of the input fields should be enabled/disabled. For some reason I can only disabled the first, second and last input field once page loads. My Select All checkbox is not working properly either :(. Can anyone tell me what I'm doing wrong please? Thanks in advance!
var users = $("tr")
.filter(function () {
return $(this).find('.inputEmail').val() !== "" && $(this).find(".input_checkbox").is(':checked');
})
.map(function () {
var $row = $(this);
return {
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
}
})
.get();
console.log('Array containing all users with an email:');
console.log(users);
Here's my code - LIVE DEMO:
$(document).ready(function() {
$("#checkAll").change(function() {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() {
enable_disable_input(this);
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
});
function enable_disable_input(checkbox) {
var input_id = checkbox.id.replace('-checkbox', '-inputField');
$("#" + input_id).prop('disabled', !checkbox.checked);
}
$(".input_checkbox").change(function() {
var nameValue = $(this).attr("name");
var inputFieldNameValue = $.trim(nameValue);
var inputFieldString = "customer-name-inputField";
var inputFieldId = inputFieldNameValue + inputFieldString;
if ($(this).is(":checked")) {
enable_disable_input(this);
$("#" + inputFieldId).prop('placeholder', "Enter email address");
} else {
$("#" + inputFieldId).prop('placeholder', "");
enable_disable_input(this);
}
});
$(".input_checkbox").each(function() {
enable_disable_input(this);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div style="width:1140px;">
<br/>
<table>
<div>
<tr>
<td align="center" valign="bottom">Select All
<br/>
<input type="checkbox" id="checkAll" value="" />
</td>
<td width="5"></td>
<td width="200" valign="bottom">Name</td>
<td align="center" class="table-col-phone" style="padding-left:20px;">Phone # / Extension</td>
<td width="50"></td>
<td valign="bottom" style="padding-left: 90px;">Email</td>
</tr>
<tr>
<td style="font-weight: bold;">Group1</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ben Morris</td>
<td align="left" class="usersPhoneNumber">3033422109</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Mike Jeff</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group2</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Ana McLwius</td>
<td align="left" class="usersPhoneNumber">3039899231</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Zumia Brown</td>
<td align="left" class="usersPhoneNumber">3033213453</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td style="font-weight: bold;">Group3</td>
</tr>
<tr>
<td></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value="">
</td>
<td class="fullName">Bryan Smith</td>
<td align="left" class="usersPhoneNumber">3033222098</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value="">
</td>
<td class="fullName">Junior White</td>
<td align="left" class="usersPhoneNumber">3030098342</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
<tr>
<td align="center"></td>
<td align="center">
<input class="input_checkbox" type="checkbox" id="2customer-name-checkbox" name="2 " value="">
</td>
<td class="fullName">Peter McDonald</td>
<td align="left" class="usersPhoneNumber">3037777777</td>
<td width="50"></td>
<td>
<input type="email" class="inputEmail" name="2" id="2customer-name-inputField" placeholder="" value="" />
<br/>
<br/>
</td>
</tr>
</div>
</table>
<button id="submitButton" type="button" class="sign-in-button" style="text-align: center;margin-left: 428px;" value="Submit" />Submit</button>
</div>
You should search email input based on the current element. You are having duplicate ids.
try this:
$(this).closest('tr').find('input[type;"text"]').attr("disabled", !this.checkbox);
Updated Fiddle
Note I have taken leisure to update your code. Hope it helps!
Getting Data
You can try something like this:
Note I have updated Group label rows and have added class in it.
Updated Fiddle
$("#submitButton").on("click", function() {
var result = {};
var group_id = "";
$("table tr").each(function(index, row) {
var $row = $(row)
group_id = $row.hasClass("section-label") ? $row.find("td:first").text() : group_id;
if (group_id && $row.find(".input_checkbox").is(':checked') && $row.find('.inputEmail').val().trim() !== "") {
result[group_id] = result[group_id] || [];
result[group_id].push({
firstName: $row.find('.fullName').text(),
number: $row.find('.usersPhoneNumber').text(),
email: $row.find('.inputEmail').val()
});
}
});
console.log(result)
})
Obviously because of the duplicated ids.
try this:
function enable_disable_input(checkbox) {
$(checkbox).parents('tr').find('input[type="email"]').prop('disabled', !checkbox.checked);
}
Your code seems a little messy, something like this would work and it's more readable
$(document).ready(function () {
$("#checkAll").change(function () {
$(".input_checkbox").prop('checked', $(this).prop("checked")).each(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
});
$(".input_checkbox").change(function () {
var input = $(this).parent().parent().find("input[type='email']");
if ($(this).is(":checked")) {
$(input).prop('disabled', false);
$(input).prop('placeholder', "Enter email address");
}
else {
$(input).prop('placeholder', "");
$(input).prop('disabled', true);
}
});
$('.inputEmail').each(function(){
$(this).prop('disabled', true);
})
});
full working example
Also, you should remove the duplicated ID's.