I want to show/Hide the div on the basis of selection of checkbox values from the list.
Here is what I tried:-
function valueChanged() {
if ($('#ddlStatus_1').is(":checked"))
$("#divExpense").hide();
else
$("#divExpense").show();
}
and the html is
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status" onchange="valueChanged()">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" /><label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" /><label for="ddlStatus_1">Registration
/ Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" /><label for="ddlStatus_2">7/12
Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" /><label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" /><label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="div1">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
But it is not working for me.
Add the change event to #ddlStatus_1 instead of table like following.
$('#ddlStatus_1').change(function() {
$("#divExpense").toggle(!this.checked);
})
Here is a running version of the code in my comment. You do not want to add the change to the table tag. If you need all checkboxes in the form to toggle something, then add a class to them and use data-attributes to see what to toggle
Note I changed div1 to divExpense
$(function() {
$('#ddlStatus_1').on("click", function() {
$("#divExpense").toggle(!this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" />
<label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" />
<label for="ddlStatus_1">Registration / Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" />
<label for="ddlStatus_2">7/12 Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" />
<label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" />
<label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="divExpense">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
Related
Im having trouble getting data from a html table all the other tutorials have text inside the td tag but I have a textfield and a textarea which I want to get the value of
I have tried
<script>
$(document).ready(function() {
//click on table body
$(".rubric_table tbody tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $.trim($(this).text());
}).get();
var td = tableData[0]+'*'+tableData[1]+'*'+tableData[2]+'*'+tableData[3]+'*'+tableData[4];
})
})
</script>
And this is my table
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>
I expected that my code would alert the values of the textfield and textarea but it doesn't.
Thanks
If you wan to get the values of the input, you can:
$(".rubric_table>tbody>tr") you have to use this selector in
adding click event. You have a table inside the table (I dont think
is ideal). To make sure you are only adding event on the direct tr
of .rubric_table
You have to loop thru each input of th and get their values.
$(".rubric_table>tbody>tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $(this).find('input').map(function() {
return this.value;
}).get();
}).get();
console.log(tableData);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>
I have this code:
<div id="section">
<h3 for="horoscope">choose horoscope</h3>
<table>
<tr>
<td>
<input type="radio" name="period" value="week" id="week" checked/>
<b>'weekly</b>
<td>
<input type="radio" name="period" value="month" id="month" />
<b>monthly</b>
<td>
<input type="radio" name="period" value="year" id="year">
<b>yearly</b>
</td>
</tr>
</table>
<table id="horoscope" cellpadding="10">
<td><img src="https://cdn.pixabay.com/photo/2012/04/18/01/12/aries-36388_960_720.png" height="50px" width="53px" alt="aries" />
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2012/04/18/01/14/taurus-36397_960_720.png" height="50px" width="48px" alt="Taurus" />
</td>
<td>
<img src="https://cdn.pixabay.com/photo/2012/04/18/01/13/gemini-36391_960_720.png" height="50px" width="49px" alt="Gemini" />
</td>
</tr>
</table>
so I want to do function that gets the period (monthly for example) and the sign (Taurus for exmaple) and on the next page it will go to the Taurus page and the place of monthly.
Another example: I choose Weekly and Aries-> in the next page-> weekly aries
How to do that?
just do like this
your HTML code
<div id="section">
<h3 for="horoscope">choose horoscope</h3>
<table>
<tr>
<td>
<input type="radio" name="period" value="week" id="week" checked/>
<b>'weekly</b>
<td>
<input type="radio" name="period" value="month" id="month"/>
<b>monthly</b>
<td>
<input type="radio" name="period" value="year" id="year">
<b>yearly</b>
</td>
</tr>
</table>
<table id="horoscope" cellpadding="10">
<tr>
<td><img onclick="redirect('Aries.html')"
src="https://cdn.pixabay.com/photo/2012/04/18/01/12/aries-36388_960_720.png" height="50px"
width="53px" alt="aries"/></td>
<td><img onclick="redirect('Taurus.html')"
src="https://cdn.pixabay.com/photo/2012/04/18/01/14/taurus-36397_960_720.png" height="50px"
width="48px" alt="Taurus"/></td>
<td><img onclick="redirect('Gemini.html')"
src="https://cdn.pixabay.com/photo/2012/04/18/01/13/gemini-36391_960_720.png" height="50px"
width="49px" alt="Gemini"/></td>
</tr>
</table>
</div>
your script
<script>
function redirect(link) {
window.location.href=link+"#"+$("input[name='period']:checked").val();
}
</script>
i want ask somethink after i get some problem in my code.
so.. first i'm making a survey with input radiobutton in datatables down there is the code
EDIT
$(document).ready(function() {
$('#example').DataTable({
"paging": true,
"searching": false,
"bInfo": false,
"bLengthChange": false,
"pageLength": 2
});
// $('#save').click(function(){
// var radioValue = $(".circle:checked").val();
// // if(radioValue){
// // alert("Your are a - " + radioValue);
// // }
// console.log(radioValue)
// });
$('#save').click(function() {
var the_value;
//the_value = jQuery('input:radio:checked').val();
//the_value = jQuery('input[name=macro]:radio:checked').val();
the_value = getChecklistItems();
alert(the_value);
});
function getChecklistItems() {
var result =
$("tr.checklisttr > td > input:radio:checked").get();
console.log(result)
var columns = $.map(result, function(element) {
return $(element).attr("id");
});
return columns.join("|");
}
} );
<!DOCTYPE html>
<html>
<head>
<link data-require="datatables#1.10.12" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="datatables#1.10.12" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<style>
.circle{
color:blue;
}
</style>
<form action="" name="quiz" id="quiz_form" method="post">
<table id="example" class="table table-bordered">
<thead style="font-size:20px">
<tr>
<th rowspan="2">Nomor</th>
<th colspan="4"><center>Test</center></th>
</tr>
<tr>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
</tr>
</thead>
<tbody style="font-size:18px">
<tr class="checklisttr" id="1">
<td align="left" width="40%"><br>
<label for="veryiii" style="align:left;">1</label>
</td>
<td align="center" width="12%">
<input type="radio" id="vii1" name="om" value="4.5" class="circle">Good
</td>
<td align="center" width="12%">
<input type="radio" id="veryiii1" name="om" value="3.0" class="circle"> Noermal
</td>
<td align="center" width="12%">
<input type="radio" id="viv1" name="om" value="1.5" class="circle">Bad
</td>
<td align="center" width="12%">
<input type="radio" id="veryv1" name="om" value="1.0" class="circle">Verry Bad
</td>
</tr>
<tr class="checklisttr" id="2">
<td align="left" width="40%">
<label for="veryiii" style="align:left;">2</label>
</td>
<td align="center" width="12%"><br>
<input type="radio" id="vii1" name="om1" value="4.5" class="circle">Good
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryiii1" name="om1" value="3.0" class="circle">Normal
</td>
<td align="center" width="12%"><br>
<input type="radio" id="viv1" name="om1" value="1.5" class="circle">Bad
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryv1" name="om1" value="1.0" class="circle">Very Bad
</td>
</tr>
<tr class="checklisttr" id="3">
<td align="left" width="40%">
<label for="veryiii" style="align:left;">3</label>
</td>
<td align="center" width="12%"><br>
<input type="radio" id="vii1" name="om2" value="4.5" class="circle">Good
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryiii1" name="om2" value="3.0" class="circle"> Normal
</td>
<td align="center" width="12%"><br>
<input type="radio" id="viv1" name="om2" value="1.5" class="circle">Bad
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryv1" name="om2" value="1.0" class="circle">Very Bad
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<button type="submit" id="save" class="btn btn-warning"><i class="icon-pencil5"></i> Done</button>
</div>
</form>
</body>
</html>
if you trying to answear the questions and click done why the answear just show the last data?
i just want to get all value and why if i go to next page for answear the next question and i submit form why he not show all the value, so how to get all data after answear all the question?? thanks
I want to place the check boxes and the tables next to each other with a proper alignment. I can seem to put the three check boxes that I've created beside each other in the same row but I am unable to align them all properly and neatly. I find some difficulties in formatting them by using Notepad++ as my developing tool.
Need help on this one.
Here is the CSS and HTML codes. Under this HTML section, the check boxes consist of respective table created in them. I have separated all the codes with the comment 'Scenario 1,2,3 and Main'.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>
I put the corrected input in an answer to show how it should look like. The comment is not the right place for html snippets. But this answer did still not resolve the view problem.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
</tr>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
</tr>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>
I have two nested grids in a GridView. Both nested grids have different number of controls (TextBoxes). I want to calculate sum of nested grid textboxes and put in a relevant textbox of relevant row parent grid.
I want to do this using jQuery.
Following is the source of grids:
<table cellspacing="0" rules="all" border="1" id="gvSPActivities" style="width:100%;border-collapse:collapse;">
<tr class="donorh1" align="left" style="height:35px;">
<th scope="col" style="width:40px;">#</th><th scope="col">Activity</th><th scope="col">Unit</th><th scope="col">Target</th><th scope="col">Benefic</th><th scope="col">Cost</th>
</tr><tr class="gridrow2">
<td>
1
</td><td>a</td><td>u1</td><td>
<input name="gvSPActivities$ctl02$txtTarget" type="text" value="100" id="gvSPActivities_txtTarget_0" class="numeric" style="width:150px;" />
</td><td>
<a class="showDetails" href="javascript:switchViews('div1', 'one');">
Show Details</a>
<input name="gvSPActivities$ctl02$txtTotalBenefic" type="text" id="gvSPActivities_txtTotalBenefic_0" />
<div class="details" id="div1" style="display: none;
left: 30px;">
<div>
<table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvBenefic_0" style="border-collapse:collapse;">
<tr>
<th scope="col">Male</th><th scope="col">Female</th><th scope="col">Children</th><th scope="col">Family</th>
</tr><tr>
<td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtMaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtMaleBenefic_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFemaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFemaleBenefic_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtChildren" type="text" id="gvSPActivities_gvBenefic_0_txtChildren_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFamilyBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFamilyBenefic_0" class="numeric" style="width:100px;" />
</td>
</tr>
</table>
</div>
</div>
</td><td>
<a class="showDetails" href="javascript:switchViews('div1', 'one');">
Show Details</a>
<input name="gvSPActivities$ctl02$txtTotalCost" type="text" id="gvSPActivities_txtTotalCost_0" />
<div class="details" id="div1" style="display: none;
left: 30px;">
<div>
<table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvCost_0" style="border-collapse:collapse;">
<tr>
<th scope="col">Main Cost</th><th scope="col">Other Cost</th>
</tr><tr>
<td>
<input name="gvSPActivities$ctl02$gvCost$ctl02$txtMainCost" type="text" id="gvSPActivities_gvCost_0_txtMainCost_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvCost$ctl02$txtOthercost" type="text" id="gvSPActivities_gvCost_0_txtOthercost_0" class="numeric" style="width:100px;" />
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
Thanks.
var total = 0;
$("input[id^='gvSPActivities']", "#gvSPActivities").each(function() {
total = total+this.value;
});
$(someInputElement).val(total);