I'm just looking for a bit of help on the best way to do this..
So I have a sample SQL Database:
Now from that DB I have a PHP page to show checkboxes ticked if there is a "1" in the corresponding checkbox field.
What I would now like to do is:
Once both checkboxes are ticked, I would like to display a 5 second timer or a message, something of that nature, but how do I ascertain if the boxes have both been checked?
I'm guessing I would have to run a query against the whole table and work from the variable I get back?
you may use change events
var i = 1, interval, timeout;
$('input[type=checkbox]').on('change', function(){
if ($('input[type=checkbox]').length == $('input[type=checkbox]:checked').length) {
$('div').show();
interval = window.setInterval(
function() {
$('div').text(i++);
},
1000
);
timeout = window.setTimeout(
function(){
document.location = 'http://google.com/';
},
5000);
}
else {
window.clearTimeout(timeout);
window.clearInterval(interval);
$('div').hide().text('0');
i = 1;
}
});
example to edit http://jsbin.com/uwofus/11/edit
example to test http://jsbin.com/uwofus/11
You tagged this with jQuery, so I'm assuming you want to do the check in the browser, and not in the database.
if ($("input[type='checkbox']:checked").size() == 2) {
//both boxes are checked
//display message/start timer here
} else {
//not all boxes are checked
}
You could give your checkboxes a class e.g. mycb, then count the number checked:
$('.mycb').change(function(){
if($('.mycb').size() == $('.mydb:checked').size())
{
// all checkboxes are checked - do something
}
});
Related
I have a form with multiple select fields allowing you to select multiple entries per select.
Each select is named id1[], id2[], id3[] etc.
With Jquery when trying to submit the form can I check if any of the selects haven't had anything selected ?
I've tried this, but the form still submits.
$("#submit").click(function() {
$("select[name^='id']:visible").each(function(index, element) {
if ($(this).val() == "") return false;
});
});
I don't need to know which specific 'id' select hasn't had an option selected, but it would be nice if I did..
Thanks
You can use the filter function to return all selects that have no value selected
var selectsWithNoValue = $("select[name^='id']:visible").filter(function() {
return !this.value.length;
});
Then you can just check the length to see if you have any with no value - and you also have access to those elements
if(selectsWithNoValue.length) { // if there are selects with no value
//do something
}
Also since you're working with a form bind to the submit handler of the form so instead of the click of a button.
So if you want to prevent the form submit you can do
return !selectsWithNoValue.length
Which will return false if there are any selects with no value
FIDDLE
Attach the code to form submit handler instead of submit button's click handler, so you can prevent the form from being submitted.
$("form").submit(function() {
var rtn = true;
$("select[name^='id']:visible").each(function(index, element) {
if ($(this).val() == "") {
console.log(this.id); // id
rtn = false;
return false;
}
});
return rtn;
});
I have dynamically created an array of checkboxes in PHP for a form, but I don't want the Submit button to appear unless at least one checkbox is checked. Scouring the Internet most people who want the Submit button to only appear after checking a checkbox only have one "I agree" checkbox. Is it the dynamic creation that is preventing my script working?
PHP↴
// Dynamically create checkboxes from database
function print_checkbox($db){
$i = 0;
foreach($db->query('SELECT * FROM hue_flag') as $row) {
if ($i == 0 || $i == 3 || $i== 6 || $i == 9){
echo '<br><br>';
}
$i++;
echo '<span class="'.$row['1'].'"><label for="'.$row['1'].'">'.ucfirst($row['1']).'</label><input type="checkbox" name="hue[]" id="hue" value="'.$row['0'].'"></span> ';
}
}
jQuery↴
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#hue[]').click(function(){
$('#input_gown').toggle();
});
});
</script>
PHP function call↴
<?php print_checkbox($conn_normas_boudoir);?>
Admittedly I know nothing about jQuery or JavaScript and am still learning PHP. So, if there's a better way to implement this, let me know.
You're giving all your checkboxes the same ID. That's not allowed; IDs have to be unique.
An easy solution to both problems is to assign all the checkboxes a common class:
echo '<span class="'.$row['1'].'"><label for="'.$row['1'].'">'.ucfirst($row['1']).'</label><input type="checkbox" name="hue[]" class="hue" value="'.$row['0'].'"></span> ';
Then select the class in jQuery:
$('.hue').change(function(){
$('#input_gown').toggle();
});
But that may give unexpected results; what if two checkboxes are checked? The #input_gown element will toggle on and off again. Perhaps you only want it shown if at least one checkbox is checked:
$('.hue').change(function(){
var val = false;
$('.hue').each(function() {
val = val || $(this).is(':checked'); // any checked box will change val to true
});
$('#input_gown').toggle(val); // true=show, false=hide
});
http://jsfiddle.net/mblase75/AyY3Z/
Your jQuery selector is looking for elements with id hue[]. But your elements have the id of just hue.
Change this:↴
$(document).ready(function(){
$('#hue[]').click(function(){
$('#input_gown').toggle();
});
});
to this (IDs should really always be unique, and the square brackets will need to be escaped to work with the selector engine), (a demo)):↴
$(document).ready(function(){
$('input[name=hue\\[\\]]').click(function(){
$('#input_gown').toggle();
});
});
I have a form on my page with a dropdown of counties. I want to somehow, with jQuery or PHP say that if a certain county is selected then redirect otherwise process the form.
I've created a fiddle to try and explain...
http://jsfiddle.net/KVjAc/
Just submit the form and use a php header command for the values you want to redirect. That would be the first thing to check in the form processor script.
No need for javascript unless you are using ajax to refresh parts of the page based on the selection.
I hope this helps(if you need a javascript/jquery solution),
$('#selectbox_ID').change( function() {
if($(this).val() == "your country"){
}
});
Do something like:
$(document).ready(function () {
$('#county').on('change', function () {
var value = $(this).val();
if (value == 'cheshire' || value == 'city of london' || value == 'durham') {
window.location.href = 'http://www.google.com/';
}
})
});
EDIT: Also, you need to add values to your option elements: <option value="cheshire">Cheshire</option>
Mostly i have 28 items, i used pagination and display in 3pages using Ajax
each page have 10 items, whatever i selected in check box it should display values at bottom ,every thing is OK right now, but my problem is when i select items in second page the previous list is disappearing , when i return back to fist page it is not showing previously selected items .
iam not getting how to do this
please help
thanks
i used this jquery code to get checked values
function showValues() {
var page = $("#pagedis").val();
var fields = $(":input").serializeArray();
$("#results_" + page).empty();
jQuery.each(fields, function(i, field) {
$("#results_" + page).append(field.value + "<br> ");
});
}
i need the action like gmail if we select 3 items in one page ,4 items in 2nd page ,when i come back the checked value will never chage
do your checkboxes all have the same name? If not, name them all the same.
make sure each checkbox has a unique value attribute
attach a handler to keep track of the checkboxes checked in an array
:
// global variable somewhere
var checkedBoxes = new Array();
$('input[name=theNameYouDefinedAbove]').click(function(event){
checkedBoxes[$(this).val()] = $(this).is(':checked');
});
Now, when you paginate, just do this
:
$('input[name=theNameYouDefinedAbove]').each(function(index, checkbox){
if (checkedBoxes[$(checkbox).val()]) {
// NOTE: choose ONLY ONE!
// for jQuery 1.6+
$(checkbox).prop('checked', true);
// for all jQuery
$(checkbox).attr('checked', 'checked');
}
});
What I'm trying to do is use jQuery to grab any checkboxes that are checked on the page. The boxes are dynamically created using a specific ID number of each one for the ID and Value.
What is the easiest way about getting it to grab the values of each checked item? Then check if less than or greater than 3 is checked. If only 3 are checked then send the values of each checkbox to my php script. I'm using a regular button on the page so I will proably have to use the .click method since its not actually part of a form to submit.
I've seen several examples around here but not quite what I'm trying to do.
$('#mybtn').live('click',function(){
$("input[type=checkbox]").each(function() {
// I guess do something here.
)};
)};
the code i believe you are wanting is this
$('#mybtn').live('click',function(){
var num_checked = $("input[type=checkbox]:checked").length;
var checkbox_values = new Array();
if( num_checked > 3 ) {
//its greater than 3
//do what you need to do
} else if( num_checked < 3 ) {
//its less than 3
//do what you need to do
}else {
//it equals 3
//do what you need to do
//go thru and add values to array
$("input[type=checkbox]:checked").each(function() {
checkbox_values.push($(this).val());
});
}
});
if you want to send email of variables you can output array checkbox_values to php
If all your checkboxes are in a form, you can do $('#form_id').serialize();
You can get how many are checked using
$("input[type=checkbox]:checked").length
http://jsfiddle.net/XKRRL/7/
Not really sure what you want to do with the ones that are checked, but the js fiddle loops through the checked ones. From there you could grab id's etc.
full code
$(function() {
$('#mybtn').live('click', function() {
var checkedBoxes = $("input[type=checkbox]:checked"),
checkedNum = checkedBoxes.length;
if(checkedNum === 3){
for(var i=0; i< checkedNum; i++){
alert($(checkedBoxes).eq(i).val());
}
}
});
});
It's simple to grab all checked checkboxes:
var checked = $('input[type=checkbox]:checked'),
count = checked.length;
if (count == 3) {
values = $.map(checked, function(i){
return $(this).val();
});
}
Then do whatever you want on the values array.