I have a form which contains list of data, I added a checkbox in from of each, when I click on the uppermost checkbox it selects all. But if I have just one row of data and I click on the upper most checkboxes dont work. Here is the script below.
////checking all checkbox on page
function checkAll(field)
{
// alert(field.length);
for (i = 0; i < field.length; i++){
field[i].checked = true ;
}
}
////unchecking all checkbox on page
function uncheckAll(field)
{
for (i = 0; i < field.length; i++){
field[i].checked = false;
}
}
function selectCHK(e){
if(e.checked==true){
//alert("Yeah");
checkAll(document.paginate_list.list);
}else{
uncheckAll(document.paginate_list.list);
}
}
function ApplyToSelected(){
var SelectedVal="";
var withSelected=document.getElementById("withSelected");
//
if(withSelected.value==1){
//if(document.getElementById("list")){
// SelectedVal=document.getElementById("list").value;
//}
for(i=0; i<document.paginate_list.list.length;i++){
if (document.paginate_list.list[i].checked) {
//alert(i);
SelectedVal +=document.paginate_list.list[i].value+",";
}
}
if(SelectedVal==""){
return false;
}
if(confirm("Are you Sure you want to Delete the Selected Row?")){
$.ajax({
url: "../__lib__/pagingLib.php?tableDeleteID="+SelectedVal,
context: document.body,
success: function(response,status,xhr){
if(response==1){
alert("Deleted Successfully");
window.location.reload();
}else{
alert(response);
alert("An Error Occurred while Deleting, Please Try Again!");
}
// alert(response);
}
});
}
}
}
HTML DATA
<form name="paginate_list" style="display:inline;" action="" method="post">
<table class="PagingBody">
<tr>
<th><input type=checkbox onclick=selectCHK(this) ></th>
<th>Category Title</th><th>Actions</th>
</tr>
<tr class="even">
<td><input name=list[] type=checkbox id=list value=10></td>
<td>Web Design</td>
<td><a href=?page=cat&edit=10>Edit</a> | <a href=#10>Delete</a></td>
<tr/>
</table>
<table>
<tr>
<td>
<select name="withSelected" id="withSelected">
<option value="0">With Selected</option>
<option value="1">Delete</option>
</select>
<input type="button" name="applyToSelected" id="applyToSelected" value="Apply to Selected" onclick="ApplyToSelected()" />
</td>
<tr/>
</table>
</form>
paginate_list.list represents the name of my form and the list name.
This fiddle will demonstrate what's happening
FIDDLE HERE
The reason why this is happening is because the browser generates a NodeList when you have more than one element in the list that you send to the function checkAll();
Otherwise you just get the normal input element.
I added an instanceof check to see what type of object it was.
To check for this in IE follow this thread here on SO:
NodeList check in IE
Good luck!
Related
I wanted to create a simple html select-all checkbox for my table form. So when we click on top of corresponding column list all the elements in the column are selected without checking other columns.
Here is what i tried..
<form name="checkn" id="frm1" class="form1" method="post">
<table class="table" cellspacing="10" border="1" style="width:100%;">
<thead>
<tr>
<th>Products List</th>
<th>
Product Available
<input type='checkbox' name='checkall' onclick='checkAll(frm1);'>
</th>
<th>
Description
<input type='checkbox' name='checkall' onclick='checkdAll(frm2);'>
</th>
</tr>
</thead>
<tbody>
<?php
//fetch data php code
?>
<tr> <td width="20%;"> <h3> <?=$products?> </h3> </td>
<td width="20%;"> <input id="frm1" type="checkbox" name="product1" value='<?=$fieldname?>' > Product Available </td>
<td width="20%;"> <input id="frm2" type="checkbox" name="product2"> Description </td>
</tr>
<button type="submit" name="submit" style="position:absolute; bottom:0;"> Submit </button>
<script type="text/javascript">
checked = false;
function checkAll (frm1)
{
var aa= document.getElementById('frm1'); if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
<script type="text/javascript">
checked = false;
function checkdAll (frm2)
{
var aa= document.getElementById('frm2'); if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
</tbody>
</table>
</form>
Please help me
I think you need to find all tr length then find td with input. after that, you can check all. Like this here is my code. I hope it helps you.
$('#IsSelectAll').on('change', function () {
if ($(this).is(':checked')) {
$('#tbCustomerList tbody tr:visible').filter(function () {
$(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', true);
});
}
else {
$('#tbCustomerList tbody tr:visible').filter(function () {
$(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', false);
});
}
});
I have a table and it contains data with checkboxes in each row. When any of the checkboxes is checked, I add theSelected class to the corresponding tr element.
$('#InventoryTable tbody').on('click', 'input[type="checkbox"]', function (e) { /** logic */ });
But I am facing the issue below, when getting the selected tr element on button click.
This is the code I am using to get the seletced tr values:
function myFunc() {
debugger;
var table = $('#InventoryTable').DataTable();
var adjustmentdetails = new Array();
$("#InventoryTable tr.selected").each(function (ix, element) {
// Do your processing.
debugger;
});
}
However, I am not able to get other page(Pagination) selected values using above code.
just convert this code into function
function clickcheck(e){
{ //logic });
}
and apply this function on your checkbox onclick attr and pass event on this function
Here is one way of doing it, I assume the add class function is working for you, then use a button on click get all element with type=checkbox and it is input element with class selected. then print this value (put your logic here)
$('input[type=checkbox]').on('click', function(e) {
if (this.checked) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
$('#getAllCheckedValue').on('click', function() {
console.log('----------- getAllCheckedValue ----------------');
$("input.selected[type=checkbox]").each(function(ix, element) {
console.log('Checked-->' + $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="InventoryTable">
<tbody>
<tr>
1<input type="checkbox" value="1" class="test test2">
</tr>
<tr>
2<input type="checkbox" value="2">
</tr>
<tr>
3<input type="checkbox" value="3">
</tr>
</tbody>
</table>
<button id="getAllCheckedValue">
Get All Checked Value
</button>
I've got a drop down that will have 3 categories in it. I would like to to have so that when the user chooses a category, the correct number of search boxes for that category will appear. I then want the text that is inputted into the search boxes to be saved as a variable in the URL. Here is what I got
http://jsfiddle.net/2yWzc/1/
HTML:
<form class="list" action="table.php" method="get">
<table>
<tbody>
<tr class="name">
<td>First Name:</td>
<td><input type="text" class="searchBox" name="q1" /></td>
</tr>
<tr class="name">
<td>Last Name:</td>
<td><input type="text" class="searchBox" name="q2" /></td>
</tr>
<tr class="owner">
<td>Owner:</td>
<td><input type="text" class="searchBox" name="q1" /></td>
</tr>
<tr class="dlp">
<td>Text 1:</td>
<td><input type="text" class="searchBox" name="q1" /></td>
</tr>
<tr class="dlp">
<td>Text 2:</td>
<td><input type="text" class="searchBox" name="q2" /></td>
</tr>
<tr class="dlp">
<td>Text 3:</td>
<td><input type="text" class="searchBox" name="q3" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="SEARCH" /></td>
</tr>
</tbody>
</table>
<br>
<select id="options">
<option value="name">Option 1</option>
<option value="owner">Option 2</option>
<option value="dlp">Option 3</option>
</select>
</form>
JS:
$('#options').change(function() {
if ($(this).val() == 'name') {
$('.name').show();
$('.owner').hide();
$('.dlp').hide();
} else if ($(this).val() == 'owner') {
$('.name').hide();
$('.owner').show();
$('.dlp').hide();
} else if ($(this).val() == 'dlp') {
$('.name').hide();
$('.owner').hide();
$('.dlp').show();
}
});
$(function(){
$('form').bind('change', function () {
var url = $(this).val();
if (url) {
window.location = url;
}
return false;
});
});
This shows the correct number of searchboxes, but it doesn't save the text in the search boxes in the variables. It also seems like it isn't a good way to do it (If you know of the proper way, point me in the right direction. This was the only thing I could do that would work). Before this, I had 1 search box per category, so my JS code was this
(function($) {
$(function(){
$('form').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
})(jQuery);
However, I have no idea how to get it to work for multiple search boxes. I only want variables for the search boxes that are shown to be passed via URL (again, so maybe this isn't the proper way?).
Can anyone help me out? Thanks
You can try the below.
An event handler is bound to the form's submit event. Within it, we get a list of all input elements with type="text" that are present inside the form and pick up only the fields that are visible using the filter method. Then we traverse the list of elements and form the dataString. This dataString is of the format q=a&q1=b and will be appended to the URL. encodeURIComponent is used to encode the dataString.
$(function(){
var dataString = "";
var url="sample.htm";
var count=0;
$('form').bind('submit', function () {
$('form input[type="text"]').filter(':visible').each(function(){
if(count === 0)
dataString += this.name + "=" + $(this).val();
else
dataString += '&' + this.name + "=" + $(this).val();
count++;
});
//console.log(dataString);
dataString += "&t="+$("#options").val(); //appending the value of the select box
if (url) {
window.location = url + "?" + encodeURIComponent(dataString); //added for the URL encode
}
return false;
});
});
Updated Working Demo
Not the best way to do that, but here is an update to your jsfiddle that will do what you want
$(function(){
$('input[type=submit]').bind('click', function () {
count = 0;
url = '';
$("input[type=text]").each(function(){
if($(this).is(":visible")){
count++;
if(count != 1){
url += "&";
}
url += "var"+count+"="+$(this).val();
}
});
if(count != 0){
url += "&";
}
url += "count="+count;
url += "&option="+$("#options").val();
alert(url);
return false;
});
});
http://jsfiddle.net/2yWzc/4/
Hi I am trying to disable a drop down when a checkbox is checked and the when the checkbox is unchecked enable the drop down. below is my javascript and it is working when I check the checkbox but it won't let me uncheck the checkbox:
<script type="text/javascript">
function test(obj){
if (document.getElementsByName("aForm[0].info")[0].checked = true) {
alert("here");
document.getElementsByName("aForm[0].gender")[0].disabled = true;
}
else document.getElementsByName("aForm[0].info")[0].checked = false;{
document.getElementsByName("aForm[0].gender")[0].enabled = true;
}
}
</script>
and here is my jsp
<logic:iterate id="data" name="aForm" property="testList">
<tr>
<td>
<html:checkbox indexed="true" name="aForm" styleId="something" property="info" onclick="test(this)"/>
</td>
<td>
<html:select name="aForm" indexed="true" property="unit" styleId="dropdown">
<html:optionsCollection name="aForm" property="selectGender" value="value" label="label"/>
</html:select>
>
</td>
</tr>
</logic:iterate>
You are storing a value, not comparing
The if statement
if( document.getElementsByName("aForm[0].info")[0].checked = true )
should be
if( document.getElementsByName("aForm[0].info")[0].checked == true )
notice the ==
And what is with the else?
else document.getElementsByName("aForm[0].info")[0].checked = false;{
You are treating it like an else if(), else does not have a statement there.
Your code should throw JavaScript errors when run.
And there is no such thing as enabled, it is just disabled, true/false.
Your code should look like
function test(obj) {
if (document.getElementsByName("aForm[0].info")[0].checked = true) {
document.getElementsByName("aForm[0].gender")[0].disabled = true;
}
else {
document.getElementsByName("aForm[0].gender")[0].disabled= false;
}
}
and it can be simplified down to just 3 lines:
function test(obj) {
document.getElementsByName("aForm[0].gender")[0].disabled = document.getElementsByName("aForm[0].info")[0].checked;
}
and to make it work without the element names:
<script>
function test(cb){
cb.parentNode.parentNode.getElementsByTagName("select")[0].disabled = cb.checked;
}
</script>
<table>
<tbody>
<tr>
<td><input type="checkbox" onclick="test(this);"></td>
<td><select><option>a</option><option>b</option></select></td>
</tr>
<tr>
<td><input type="checkbox" onclick="test(this);"></td>
<td><select><option>a</option><option>b</option></select></td>
</tr>
</tbody>
</table>
Note: parentNode.parentNode is bound to break if the page structure changes. :)
I wanna get the total number of the checkbox in a html.
request:
(1) By Javascript
(2) all my checkbox id is "id=idCheckBox",
(3) each checkbox name is reserved for back-end using. not for javascript.
(4) The naming for each checkbox's name is like checkbox_1, checkbox_2,... where the number indicate the serial number of a checkbox.
The Table Html
<table class="form_table" border="0" cellpadding="0" width="750px" id="idRoutineListTable">
<tr>
<td style="align:center;" class="routineListCell">
<input type='checkbox' name='checkbox_1' id='idCheckBox'></input>
<!-- It may many checkbox here.-->
</td>
</tr>
</table>
My JS code, the function is to check any checkbox is selected before deletion. if no checkbox is selected, it pops up warning.
function beforeDelete() /*{{{*/
{
var checked=0;
var checkboxAll=document.all["idCheckBox"];
//the error is here, when there is only one checkbox, I cannot get length value,
//coz checkboxAll is not recognized as an array. However, if there are more than
//two checkboxes, the function works.
alert (checkboxAll.length);
for(var i=0;i<checkboxAll.length;i++) {
if (checkboxAll[i].checked==true) {
checked++;
}
}
if(checked==0) {
alert('Please select the item you will delete');
return false;
}
} /*}}}*
The problem has indicate in the above code.
Any idea to solve this?
here is a full working sample using jQuery:
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script>
function beforeDelete() {
if ($("input:checked").length == 0) {
alert('Please select the item you will delete');
return false;
}
return true;
}
</script>
<form onsubmit="return beforeDelete()">
<table class="form_table" border="0" cellpadding="0" width="750px" id="idRoutineListTable">
<tr>
<td style="align:center;" class="routineListCell">
<input type='checkbox' name='checkbox_1' id='idCheckBox'></input>
<input type='checkbox' name='checkbox_2' id='idCheckBox'></input>
<input type='checkbox' name='checkbox_3' id='idCheckBox'></input>
<!-- It may many checkbox here.-->
</td>
</tr>
</table>
<input type="submit" />
</form>
Try this:
function beforeDelete() {
var checkboxAll=document.getElementsByTagName("input");
for(var i=0;i<checkboxAll.length;i++) {
var input = checkboxAll[i];
if (input.type == "checkbox" && input.checked==true) {
return true;
}
}
alert('Please select the item you will delete');
return false;
}
The first decision:
You may use checkboxAll.length as a condition to check if there is only one checkbox in your markup.
if(checkboxAll.length == undefined)
If not, you may use your code with loop, if it is only one checkbox - check only one.
The second decision:
To use getElementsByTag that will return you an array. In this case you need to filter this array with the given id
Demo for both decisions here