Table loop if not checked checkbox in javascript - javascript

I want to put a condition to check if the checkbox is not selected. If so, there should be a prompt or alert that user must choose a checkbox.
function submit() {
var row_count = $('#adj_table_x >tbody >tr').length;
var grid = document.getElementById("adj_table_x");
var checkBoxes = grid.getElementsByTagName("INPUT");
// I want to put a condition here before the loop value will inserted
for (var i = 1; i <= row_count; i++) {
if (checkBoxes[i].checked) {
var row = checkBoxes[i].parentNode.parentNode;
var data = row.cells[1].innerHTML;
$.post('../controller/controller.php?action=submit', {
'data': data
}, function(response) {
console.log(response);
});
}
}
}

You can use the below selector
$("input:checked").length != $("input").length
You can tweak the code based on your requirement
You need to use pseudo selector 'checked' available in JQuery - Please see the link below for more info
https://api.jquery.com/checked-selector/
function submit (){
if($("#tableID input[type='checkbox']:checked").length !=
$("#tableID input[type='checkbox']").length){
alert("please check all values")
}
else{
//Put your code here
}

I think you want something like this, not really sure about your explanation, but see if it works for you.
function submit() {
var row_count = $('#adj_table_x >tbody >tr').length;
var grid = document.getElementById("adj_table_x");
var checkBoxes = grid.getElementsByTagName("INPUT");
// I want to put a condition here before the loop value will inserted
if(checkBoxes.prop('checked') == false){
alert('Please select checkbox');
return false;
}
for (var i = 1; i <= row_count; i++) {
if (checkBoxes[i].checked) {
var row = checkBoxes[i].parentNode.parentNode;
var data = row.cells[1].innerHTML;
$.post('../controller/controller.php?action=submit', {
'data': data
}, function(response) {
console.log(response);
});
}
}
}

Related

How to put this filter function into an If function?

I have the following function: http://jsfiddle.net/xznzyxyg/2/
Basically what it does it checks of the value of an input is equal to another value of another input in the same div.
Instead of the filtering I want it in an If function.
So that if true{ colour red}
The function I have now;
var inputs = $('#lol input');
var hoofdinput = document.getElementById('ad');
function Getred(i,el){
return inputs.not(this).filter(function() {
return hoofdinput.value === el.value;
}).length !== 0;
}).addClass('red');
What I want it in:
If (true){
// Colour red
}
else {
Alert('No duplicates');
}
Can somebody help me with this, I'm really frustrated with this one...
Thanks!!
EDIT: This is the solution, duplicates are coloured with red and others wich are not duplicate with green: http://jsfiddle.net/xznzyxyg/4/
is something like this what you are looking for?
var inputs = $('#lol input');
var hoofdinput = document.getElementById('ad');
for( var counter = 0; counter < inputs.length; counter++) {
if ( hoofdinput.value === inputs[counter].value )
inputs[counter].className += 'red';
else
alert('No duplicates');
}
var $inputs = $('div.myDiv input')
$inputs.each(function(i1, input1){
$inputs.slice(i1 + 1).each(function(i2, input2) {
if (input1.value == input2.value) $(input2).addClass('red');
});
});
Then if you need to alert that there were no matches
if ($('div.myDiv input.red').length == 0) alert('No duplicates');

Display the value on click of check box in an array

I have an array of 10 checkboxes. onclick of checkbox i want to get the value of that particular checkbox. That I am able to achieve using my code.When I click in serial order it is working fine. When I click on checkbox 5 after clicking on checkbox 7 the value of checkbox 5 ie..5 is getting added befor 7. I dont want in that order. I want the values to displayed in whatever order I click. My js file is as follows
var selected = new Array();
$(document).ready(function(){
checkBoxTest();
});
function checkBoxTest() {
alert("checkbox test");
for(i = 0; i < 10; i++){
$("#catalog_table").append('<tr><td>Checkbox<input type="checkbox" name ="chkbox" value="' +i+' "/><td></tr>');
test();
}
}
function test() {
$('#catalog_table input:checkbox').change(function() {
var emails = [];
$('#catalog_table input:checkbox:checked').each(function() {
emails.push($(this).val());
});
var textField = document.getElementById("root");
textField.value = emails;
});
}
My HTML code is something like this
<table id="catalog_table"> </table>
<textarea id="root"></textarea>
Can any one please tell me how to do this?
Demo
Its messy, but it works:
http://jsfiddle.net/za7m8/1/
var selected = new Array();
$(document).ready(function(){
$("input[type='checkbox']").on('change', function() {
// check if we are adding, or removing a selected item
if ($(this).is(":checked")) {
selected.push($(this).val());
} else {
for(var i = 0; i<selected.length;i++) {
if (selected[i] == $(this).val()) {
// remove the item from the array
selected.splice(i, 1);
}
}
}
// output selected
var output = "";
for (var o = 0; o<selected.length; o++) {
if (output.length) {
output += ", " + selected[o];
} else {
output += selected[o];
}
}
$("#root").val(output);
});
});
You just have to change your javascript like this.
var selected = new Array();
$(document).ready(function(){
checkBoxTest();
});
function checkBoxTest() {
alert("checkbox test");
for(i = 0; i < 10; i++){
$("#catalog_table").append('<tr><td>Checkbox<input type="checkbox" name ="chkbox" value="' +i+' "/><td></tr>');
test();
}
}
var emails = [];
function test() {
$('#catalog_table input:checkbox').change(function() {
if (this.checked)
{
if ( emails.indexOf( $(this).val() ) === -1 )
{
emails.push($(this).val());
}
} else
{
if ( emails.indexOf( $(this).val() ) !== -1 )
{
var index = emails.indexOf( $(this).val() );
emails.splice(index, 1);
}
}
var textField = document.getElementById("root");
textField.value = emails;
});
}
You need to clear up your code a bit, like this:
I assume that unchecking removes the value from the array, and checking adds.
var selected = new Array(); // What for is this here ?
$(document).ready(function () {
checkBoxTest();
});
function checkBoxTest() {
for (i = 0; i < 10; i++) {
$("#catalog_table").append('<tr><td>Checkbox<input type="checkbox" name ="chkbox" value="' + i + ' "/><td></tr>');
}
test();
}
function test() {
var emails = [],
textField = document.getElementById("root");
$('#catalog_table input:checkbox').change(function () {
var val = $(this).val();
// if you don't want removal of values on `uncheck`, comment out everything below excluding `emails.push(val)` and the last line
if(this.checked){ // if checked
emails.push(val); // add it
}else{
emails.splice(emails.indexOf(val), 1); // remove it if not checked
}
textField.value = emails; // set the value
});
}
DEMO

Selecting ONE radio out of many

I'm trying to "modify/change" the way this code works, I want it to only allow ONE radio button selection out of 30 or more choices. as it is written now, it looks for all selected before submitting. im a noob, please be kind.
<script type="text/javascript">
function checkform() {
//make sure all picks have a checked value
var f = document.entryForm;
var allChecked = true;
var allR = document.getElementsByTagName('input');
for (var i=0; i < allR.length; i++) {
if(allR[i].type == 'radio') {
if (!radioIsChecked(allR[i].name)) {
allChecked = false;
}
}
}
if (!allChecked) {
return confirm('One or more picks are missing for the current week. Do you wish to submit anyway?');
}
return true;
}
function radioIsChecked(elmName) {
var elements = document.getElementsByName(elmName);
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return true;
}
}
return false;
}
</script>
Use a counter instead of a flag for "allChecked".
Set it to zero. If the element is checked, use allChecked++ then check to see if the value is ONE at the end.

How to check dynamically checkbox in form if there is a match

I'm using a piece of code to check in a form if a checkbox matches the content of a given variable.
Everything works great but the thing is that I'd like to have this checkbox checked if I have a match but I don't know how to do this.
my javascript code to see if there is a match :
<script type="text/javascript">
function loopForm(form,job) {
var cbResults = 'Checkboxes: ';
var radioResults = 'Radio buttons: ';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'checkbox') {
if (form.elements[i].id == job) {
// This works great but I'd like instead to have the element checked
alert(job);
}
}
}
}
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var job = filename.split("-");
var metier = job[0];
loopForm(document.formulaire,metier);
</script>
if (form.elements[i].id == job) {
form.elements[i].checked = true;
}
just
form.elements[i].checked = true;

javascript to create multiple checkboxes in for statement

Hi I am trying to create a bunch of checkboxes without having to make each one currently I have:
function test(obj) {
if (document.getElementByID("info").checked == true) {
document.getElementById("gender")[0].disabled = true;
}
}
and it works for one checkbox but I have been trying to use the code below:
function test(obj) {
var x = obj.name;
var rowCount = $('#List tr').length;
for (var i = 0; i rowCount-1; i++) {
if (x == document.getElementByID("info"["+i+"]).checked == true) {
document.getElementById("gender"["+i+"]).disabled = true;
}
}
}
to create as many checkboxes as I want without me having to make each one but it doesn't seem to be working.
Ok, lets start from the beginning:
To create a check-box in javascript you must do something like this:
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
Then to add your checkbox into a div on your webpage you would do something like:
document.getElementById("your_div_id").appendChild(checkbox);
Then to see if the checkbox is checked you look at the "checked" property like so:
var isChecked = !!document.getElementById("your_checkbox").checked;
if(isChecked == true){
// Do whatever you want
}
Here's a function that would loop through a bunch of checkboxes
function testCheckBoxes(container_id){
var checkboxes = document.querySelector("#" + container_id + " > input[type='checkbox']");
for(var i = 0; i < checkboxes.length; i++){
if(!!checkboxes[i].checked == true){
// Your code
}
}
[Side Note: I'm using document.querySelector for consistency but since I think you're using jquery then use $ instead]
If you want to do something when someone clicks on your checkbox the use an event listener:
var list = document.getElementsByClassName("checkbox");
for(var i = 0; i < list.length; i++){
list[i].addEventListener('click', function(event){
if(!!event.target.checked == true){
// Do something
}
}, true);
}
Hopefully this is enough to get you started. Good Luck =)

Categories