I have an html table with n number of rows and 4 columns. Inside each row td I have 2 children elements- label and an input. I want to check the value of input under 2nd td when an onblur event occurs at input under 3rd td.
I want to alert the value of input under 2nd td (ie; headers="ACNO" ) when onblur occurs at input under 3rd td (ie;headers="CREDIT") . So I wrote the below javascript function sum_cr() as
function sum_cr() {
alert('Hi');
alert($(pThis).parent().eq(2).children('accno').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
But my javascript code fails. Can anybody help me to get the value?
JSfiddle: https://jsfiddle.net/nidheeshmtr/nmku2gq1/4/
function sum_cr(ele) {
alert('Hi')
alert('using prev(): '+$(ele).parent('td').prev('td').find('input').val());
//or you can use below for input value under 2nd td element
alert('using nth-child(): '+$('tr td:nth-child(2)').find('input').val());
//if you know attributes of TD tag, u can use below
alert('using attribute selector: '+$('td[headers="ACNO"]').find('input').val());
//by using siblings, get the parent 2nd sibling
alert('using siblings(): '+$(ele).parent().siblings(':nth-child(2)').find('input').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
Your selector is not valid. You have to pass this in the function call. Try the following way:
function sum_cr(that) {
alert($(that).parent('td').prev('td').find('input').val());
}
Run code snippetExpand snippet
I want to alert the value of input under 2nd td (ie; headers="ACNO" ) when onblur occurs at input under 3rd td(ie;headers="CREDIT") . So I wrote the below javascript function sum_cr() as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
The context is not valid...
Pass the 'this' context from html code to the sum_cr() method as a parameter and define the method as follows.
function sum_cr(that) {
alert($(that).parent('td').prev('td').find('input').val());
}
function sum_cr(ele) {
alert($('tr td:nth-child(2) input').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
You can define an ID for each input and then get their value as you want
function sum_cr() {
var elem = $('#xyz').val();
alert(elem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td headers="DAYDT">
<label for="f01_0050" class="u-VisuallyHidden"> </label>
<input name="f01" value="28-05-2018" type="text">
</td>
<td headers="ACNO">
<label for="f03_0050" class="u-VisuallyHidden"> </label>
<input id="xyz" name="f03" value="1413/4" class="accno" type="text">
</td>
<td headers="CREDIT">
<label for="f04_0050" class="u-VisuallyHidden"></label>
<input name="f04" value="100" class="cr_amt" onblur="sum_cr();" id="f04_0050" type="text">
</td>
<td headers="FINE AMT">
<label for="f06_0050" class="u-VisuallyHidden"> </label>
<input name="f06" value="" id="f06_0050" type="text">
</td>
</tr>
</tbody>
</table>
Check whether this helps or not?
Related
I created a table with some checkboxes and I want to create a JavaScript that remove the ones I don't want there but I'm stuck in the JavaScript part. Could you please help me in this small challenge? Thanks!
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>
The JS part done so far, but the way I tried to removed the tr doesn't work
let findTableOfCheckBoxes = document.getElementsByClassName('.isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}
You're committing the cardinal sin of assuming your selector is finding elements. It's not, because you need isTable not .isTable when using getElementsByClassName() which, since it's about classes, assumes the . for you.
There's also a more modern, cleaner way to achieve what you need. Follows:
document.querySelectorAll('.isTable').forEach(tbl => {
let row = tbl.querySelector('tr:nth-child(3)');
row && row.remove();
});
You added "." character for the getElementsByClassName. Just remove it.
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>
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.
I am trying to show and hide tr of table with checkbox check and uncheck. I tried the following script not working for me.
$('.checks').on('ifChecked', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').show();
}
if (checked == 2) {
$('.fruits').show();
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
Here's what you need to do:
Change ifChecked with onchange. There's no event like ifChecked.
Use toggle based on the state of the checkbox.
Check for $(this).checked to find the state. This will return true or false.
$('.checks').on('change', function(event) {
var checked = $(this).val();
if (checked == 1) {
$('.vegetables').toggle($(this).checked);
}
if (checked == 2) {
$('.fruits').toggle($(this).checked);
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" /> vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" /> Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
Theres a couple of issues in your logic. Firstly ifChecked is not a valid event. Use change instead. Secondly the logic doesn't work to hide elements. To do that you'd need to loop through all checkboxes and determine their state in order to show/hide the content underneath.
The simplest and most extensible way to achieve what you require is to use a data attribute to specify which element should be toggled when the checkbox is updated. Then you can simply hide/show each element in the set. Try this:
let $checks = $('.checks').on('change', () => $checks.each((i, el) => $(el.dataset.target).toggle(el.checked)));
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="1" data-target=".vegetables">vegetables
</label>
<label class="checkbox-inline">
<input type="checkbox" class="checks" value="2" data-target=".fruits">Fruits
</label>
</div>
<table>
<tbody>
<tr class="vegetables hidden">
<td colspan="2">
<h2>Vegetablese:</h2>
</td>
</tr>
<tr class="vegetables hidden">
<td>
<label>Vegetables:</label>
<input type="text">
</td>
</tr>
<tr class="fruits hidden">
<td colspan="2">
<h2>Fruits:</h2>
</td>
</tr>
<tr class="fruits hidden">
<td>
<label>Fuits:</label>
<input type="text">
</td>
</tr>
</tbody>
</table>
I am creating a landing page with a form. I want to set up where every 10th person who signed up links to a "special" page where they receive a prize. For example: first 9 people will redirect to thankyou.html page where the 10th person will link to prize.html page. Is this possible? Thank you in advance.
<form method="post" enctype="multipart/form-data" action="http://form.relevanttools.com/rt-cgi-bin/satellite">
<input type="hidden" name="code" value="12531"> <input type="hidden" name="db" value="project"> <input type="hidden" name="source" value="Prize"> <input type="hidden" name="optin" value=""> <input type="hidden" name="type" value="signup"> <input type="hidden" name="user_email_msg" value=""> <input type="hidden" name="admin_email_addr" value=""> <input type="hidden" name="redir" value="http://www.link.com/thankyou.html">
<table border="0">
<tr>
<td> </td>
<td>First Name*</td>
<td> </td>
<td> <input type="text" id="first_name" name="first_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Last Name*</td>
<td> </td>
<td> <input type="text" id="last_name" name="last_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Email*</td>
<td> </td>
<td> <input type="text" id="email" name="email*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Age*</td>
<td> </td>
<td> <input type="text" id="age" name="age*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Gender</td>
<td> </td>
<td>
<div class="align-left"> <input type="radio" name="gender" value="Male">Male<br> <input type="radio" name="gender" value="Female">Female<br> </div>
</td>
</tr>
<tr>
<td> </td>
<td>Zip</td>
<td> </td>
<td> <input type="text" id="zip" name="zip" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Private Policy*</td>
<td> </td>
<td> <input type="checkbox" id="private_policy" name="private_policy" value="x"> </td>
</tr>
<tr>
<td> </td>
<td>Email Subscription</td>
<td> </td>
<td> <input type="checkbox" id="email_opt_in" name="email_opt_in" value="x"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value = "Submit" ></td>
</tr>
</table>
</form>
You could give the button a 10% probability of redirecting to the prize page - but that's the best without a server.
Javascript is client side. Meaning it has no way of knowing how other people have acted. The only way to know that is storing every click in a database and counting that.
guys im trying to make a dynamic design for adding students in a class with a button add on the 10th row ![enter image description here][1]
http://www.facebook.com/photo.php?fbid=4099710263250&set=a.1210298669766.32621.1597725369&type=3&theater
i can append a new row with a button on it but when i click the new button the click function did not respond and i still need to click the add button on the 10th row to add new one.
here is the code.
<table>
<th colspan="4"><h2>Boys</h2></th>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname1" class="input">
</td>
<td>
<input type="text" name="bstudnt_mname1" class="input">
</td>
<td>
<input type="text" name="bstudnt_fname1" class="input">
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname2" class="input">
</td>
<td>
<input type="text" name="bstudnt_mname2" class="input">
</td>
<td>
<input type="text" name="bstudnt_fname2" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname3" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname3" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname3" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname4" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname4" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname4" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname5" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname5" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname5" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname6" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname6" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname6" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname7" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname7" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname7" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname8" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname8" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname8" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname9" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname9" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname9" class="input" >
</td>
</tr>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" name="bstudnt_lname10" class="input" >
</td>
<td>
<input type="text" name="bstudnt_mname10" class="input" >
</td>
<td>
<input type="text" name="bstudnt_fname10" class="input" >
<input type="button" id="" name="add_bstudent" class="button add- bstudent" value="+">
</td>
</tr>
</table>
JS....
$('.add-bstudent').click(function () {
$(this).parent().parent().after("<tr><td><label>Name:</label></td><td> <input type='text' name='bstudnt_lname10' class='input' placeholder='Last Name'></td><td><input type='text' name='bstudnt_mname10' class='input' placeholder='Middle Name'></td><td><input type='text' name='bstudnt_fname10' class='input' placeholder='First Name'> <input type='button' id='' name='add_bstudent' class='button add-bstudent' value='+'></td></tr>");
});
When you use the click() function to register the event, it will only register the event on objects returned by the selector at that moment. If you create an object after the fact, it won't bind to the event. Use the on() function and give it your selector: http://api.jquery.com/on/
Example:
$('#container').on('click', '.add-bstudent', function(event) { ... });
The first thing I noticed is that you do not have a button with class by name of $('.add-bstudent').
It's the name attribute for the button..
Also consider delegating the event by using the .on() so that the event is attached when the element is available
Try this
$('.add-bstudent').click(function () {
$(this).parent('table').append("<tr><td><label>Name:</label></td><td> <input type='text' name='bstudnt_lname10' class='input' placeholder='Last Name'></td><td><input type='text' name='bstudnt_mname10' class='input' placeholder='Middle Name'></td><td><input type='text' name='bstudnt_fname10' class='input' placeholder='First Name'> <input type='button' id='' name='add_bstudent' class='button add-bstudent' value='+'></td></tr>");
});