I want alert if check-box is not checked (- this is working )
and
Alert if ALL check-box is not checked ( need help in this )
CheckBox :
<input type="checkbox" value="1" id="data" name="data[]">
<input type="checkbox" value="2" id="data" name="data[]">
<input type="checkbox" value="3" id="data" name="data[]">
Button :
<input name=\"submitclose\" type=\"submit\" value=\"Close\" id=\"submitclose\">
Below is my Jquery :
echo "<script>
jQuery(function($) {
$(\"input[id='submitclose']\").click(function() {
var count_checked = $(\"[id='data']:checked\").length;
if (count_checked == 0) {
alert(\"Please select a Packet(s) to Close.\");
return false;
} else{
return confirm(\"Are you sure you want to Close these Packet?\");
}
});
});
</script>";
Try,
HTML:
<input type="checkbox" value="1" id="data1" name="data[]">
<input type="checkbox" value="2" id="data2" name="data[]">
<input type="checkbox" value="3" id="data3" name="data[]">
JS:
var allCheckBox = $("[id^='data']")
var count_checked = allCheckBox.filter(":checked").length;
if (count_checked == 0) {
alert("All check boxes are not checked");
} else if(count_checked != allCheckBox.length) {
alert("some of the check boxs are not checked");
} else{
return confirm("Are you sure you want to Close these Packet?");
}
$(\"input[id='submitclose']\").click(function(){
var count = 0;
$('input#data').each(function(){
if ($(this).attr('checked') == true){
count++ //if a checkbox is checked the variable count will be greater then 0.
}
})
if (count == 0){ //nothing is checked.
alert("Please check at least one of the checkboxes");
}else{ //something is checked.
//code to execute.
}
})
Related
I'm just trying to return true/false in one my my jquery methods depending on the check of a 2 radio buttons and if it's selected or not
I've tried several things but have not been able to get this right, it still submit the form without giving error that the buttons are not selected.
HTML Code
<label class="checkout-item" for="payment_1">Cash On Delivery</label>
<input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">
<label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
<input type="radio" name="payment" class="radio" id="payment_2" value="9" checked="" iscod="0" onclick="selectPayment(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" checked="true" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
Javascript
function checkOrderForm(frm) {
var paymentSelected = false;
var shippingSelected = false;
// Check whether the payment method is selected
for (i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].name == 'shipping' && frm.elements[i].checked) {
shippingSelected = true;
}
if (frm.elements[i].name == 'payment' && frm.elements[i].checked) {
paymentSelected = true;
}
}
if (!shippingSelected) {
alert(flow_no_shipping);
return false;
}
if (!paymentSelected) {
alert(flow_no_payment);
return false;
}
If I'm understanding your question correctly, you would only like this test to pass if BOTH of the radio buttons are checked. Currently, as long as one radio button in each group is checked, the code variable will be set to true, ignoring the state of the other radio button.
For example, if ONLY one of your shipping radio buttons was checked, the shippingSelected variable would be set to true and it would remain true.
A way to fix this is to begin with shippingSelected and paymentSelected set to true, and if one of the radio buttons are found to be unchecked, the variable will be set to false.
Here's an example:
var paymentSelected = true;
var shippingSelected = true;
// Check whether the payment method is selected
for (i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].name == 'shipping' && !frm.elements[i].checked) {
shippingSelected = false;
}
if (frm.elements[i].name == 'payment' && !frm.elements[i].checked) {
paymentSelected = false;
}
}
You can use $("#payment_1").checked to check whether the radio is checked or not. Similarly you could use other ID's to check whether they are selected or not.
Here is the fiddle:
https://jsfiddle.net/bf8bo43t/
Try below code,
HTML
<form method="post" name="frm_payment_types">
<label class="checkout-item" for="payment_1">Cash On Delivery</label>
<input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">
<label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
<input type="radio" name="payment" class="radio" id="payment_2" value="9" iscod="0" onclick="selectPayment(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
<br />
<input type="submit" name="submit" onclick="return checkOrderForm();" />
</form>
Javascript
<script type="text/javascript">
function validateForm(){
var payment_1 = document.getElementById('payment_1');
var payment_2 = document.getElementById('payment_2');
var ECS_NEEDINSURE_1 = document.getElementById('ECS_NEEDINSURE_1');
var ECS_NEEDINSURE_2 = document.getElementById('ECS_NEEDINSURE_2');
if((payment_1.checked == true || payment_2.checked == true) && (ECS_NEEDINSURE_1.checked == true || ECS_NEEDINSURE_2.checked == true)){
return true;
}
else if(payment_1.checked == false && payment_2.checked == false){
alert("Please select Cash On Delivery or Credit Card / Debit Card.");
}
else if(ECS_NEEDINSURE_1.checked == false && ECS_NEEDINSURE_2.checked == false){
alert("Please select Home Delivery or Self-pickup.");
}
return false;
}
</script>
I have a form that has series of checkboxes. When the other checkbox is selected an alert appears if you don't fill in the other textbox.
If I select more than one checkbox it doesn't validate at all?
<form>
<div id="form-2" class="pages active" data-page="form-2" style="display: block;">
<p>Please indicate below the quality issue(s) you were not happy with. Pick as many options as apply. <span class="required">*</span></p>
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="Other, please specify in the box below">
<input type="text" name="qual-form-other-form-2" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
<button class="next-page" data-page-id="form-2">Next</button>
</div>
</form>
<script>
if (pageCurrent.data('page') == 'form-2') {
var answer = pageCurrent.find('input[name="qual-form-2[]"]:checked').val();
if ( (answer == 'Other, please specify in the box below') && ($('input[name="qual-form-other-form-2"]').val().length > 0)) {
$('input[name="qual-form-other-form-2"]').removeClass('empty');
return true;
} else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0)) {
alert('Please specify other');
$('input[name="qual-form-other-form-2"]').addClass('empty');
return false;
} else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0) && ($('input[name="qual-form-2[]').is(":checked"))) {
alert('Please specify other');
$('input[name="qual-form-other-form-2"]').addClass('empty');
return false;
} else if ($('input[name="qual-form-2[]').is(":checked")) {
return true;
} else {
alert('Validation errors occurred. Please confirm the fields and submit it again.');
}
}
</script>
Try this : change your button type="button" and call below script.
$(function(){
$('.next-page').click(function(){
var checkCount = $('input[name="qual-form-2[]"]:checked').length;
//check atleast one checkbox checked
if(checkCount > 0)
{
var checkOther = $('input[name="qual-form-2[]"]:last');
var checkNotOther = $('input[name="qual-form-2[]"]:checked').not(checkOther);
//if 'other' and any of the rest is checked show alert
if(checkNotOther.length > 0 && checkOther.is(':checked'))
{
$('input[name="qual-form-other-form-2"]').addClass('empty');
alert('Please select either "Other" or another checkbox');
}
//if other checked and input is empty show alert
else if(checkOther.is(':checked') && $('input[name="qual-form-other-form-2"]').val() == "")
{
$('input[name="qual-form-other-form-2"]').addClass('empty');
alert('Please specify other');
}
else
{
alert('Validation Succeeded');
}
}
else
{
alert('Please check atleast one checkbox');
}
});
});
JSFiddle Demo
How to checked checkbox main when sub checkbox not checked ?
When checkbox id="checkItem1" and id="checkItem2" and id="checkItem3" not checked,
i want to auto checked checkbox id="checkAll" how can i do that ?
http://jsfiddle.net/peap/sydzL8Lc/11/
<input type="checkbox" id="checkAll" checked > Check All
<hr />
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3
you can do it like bellow
$('input[id^="checkItem"]').change(function(){
if($('input[id^="checkItem"]:checked').length===0)
$('#checkAll').prop('checked',true);
})
DEMO
I did a JSFiddle on the full functionality you will need including including when user click the checkAll all boxes change to checked if checkAll is checked or to not checked otherwise. Also there's a on change listener on each of them to listen if the user check all of them and to change the checkAll to checked and backwards.
HTML:
<input type="checkbox" id="checkAll"> Check All
<hr />
<div class='js-checkboxes'>
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3
</div>
Javascript:
$('.js-checkboxes > input').on('change', function() {
var isAllChecked = true;
$('.js-checkboxes > input').each(function() {
if (!this.checked) {
isAllChecked = false;
}
});
if (isAllChecked) {
$('#checkAll')[0].checked = true;
} else {
$('#checkAll')[0].checked = false;
}
});
$('#checkAll').on('change', function() {
if (this.checked) {
$('.js-checkboxes > input').each(function() {
this.checked = true;
});
} else {
$('.js-checkboxes > input').each(function() {
this.checked = false;
});
}
});
$("input[id^='checkItem']").change(function(){
if(!$("#checkItem1").is(":checked") && !$("#checkItem2").is(":checked") && !$("#checkItem3").is(":checked"))
{
$("#checkAll").prop("checked",true)
}
}
EDIT :- DEMO
I have Check All and Check Non Section.
I want to take decision , if any of the checkbox is checked, enable Delete button otherwise disable it.
Plus I want to get all the values of checked checkboxes when click on Delete button coma seperated.
Here is my fiddle:
http://jsfiddle.net/48ZRu/2/
Here is my code:
HTML:
<input type="button" class="check" value="Check All" /> <input type="button" value="Delete" disabled /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2"/> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3"/> Checkbox 3 <br/>
JS:
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
}
else
if(checked == false)
{
$(this).val('Check All');
}
});
Try
$('.check:button').click(function () {
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$('.delete:button').prop('disabled', !checked)
$(this).data('checked', checked);
if (checked == true) {
$(this).val('Uncheck All');
} else if (checked == false) {
$(this).val('Check All');
}
});
$('input:checkbox').change(function () {
$('.delete:button').prop('disabled', $('input:checkbox:checked').length == 0)
})
$('.delete:button').click(function () {
var array = $('input:checkbox:checked').map(function () {
return this.value
}).get();
console.log(array, array.join())
})
Demo: Fiddle
Give a id to delete button. Lets say if the id is delete -
$("input[type=checkbox]").on("change", function(){
if ($("input[type=checkbox]:checked").length > 0)
{
$("#delete").removeAttr('disabled','disabled');
}
else
{
$("#delete").attr('disabled','disabled');
}
});
try this
var checkedSize = $('input:checked').size()
$(':input:button[value=Delete]').attr("disabled",checkedSize === 0);
$(function() {
var delbtn = $("input:button[value=Delete]");
$("input:checkbox").change(function() {
if($("input:checkbox:checked").length)
delbtn.removeAttr("disabled");
else
delbtn.attr("disabled","disabled");
});
delbtn.click(function() {
var s=$("input:checkbox:checked").map(function(e,i) { return e.value; }).join(",");
// s now has the values, comma separated
});
});
this one should fit all your needs:
$('.cb-element').change(function(){
var checked = !$(this).is(":checked");
if(checked)
{
$("#uncheck").removeAttr("disabled");
}
else {
$("#uncheck").attr("disabled","disabled");
}
});
$('#checkall').click(function(){
$('.cb-element').attr("checked","checked");
$("#uncheck").removeAttr("disabled");
});
$('#uncheck').click(function(){
var resultArr = [];
$.each($('.cb-element'),function(){
if($(this).is(":checked")){
resultArr.push($(this).val());
}
})
alert(resultArr.join(","))
})
<input type="button" class="check" id="checkall" value="Check All" /> <input type="button" id="remove" value="Delete" /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/>
$('#remove').attr('disabled', 'disabled');
$(document).ready(function() {
$('.cb-element').click(function() {
if($(this).prop('checked'))
{
$('#remove').attr('disabled', false);
}
else
{
$('#remove').attr('disabled', true);
}
});
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
$('#remove').attr('disabled', false);
}
else if(checked == false)
{
$(this).val('Check All');
$('#remove').attr('disabled', true);
}
});
});
I want to check if the user selects a radio button. I have coded this:
HTML
<form action="myServlet" method="post">
<input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
<input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
<input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">
//etc
<button type="submit" class="myButton" onclick="sendSuccess()">Submit</button>
</form>
JS
function sendSuccess(){
var len = document.formRate.ratingInput1.length;
var flag;
for(i=0; i<len; i++){
if (document.formRate.ratingInput[i].checked){
flag = true;
}
else{
flag = false;
break;
}
}
if(flag === false){
console.log('noooooo');
return false;
}else{
console.log('yesssss');
}
}
But its not working.
You can do it with jQuery using Attribute Equals Selector [name="value"] to find radio button with same name and :checked to get only checked elements. You can use length to check if you get any checked radio button or not. The length will be zero of none of radio button is checked and will be greater then zero if one or more radio button is checked.
Live Demo
if($('[name=ratingInput1]:checked').length)
console.log('Yes');
else
console.log('No');
Working demo http://jsfiddle.net/cXPYQ/
Hope this fit your needs :)
Code
$("form").submit(function () {
var flag = true;
$(':radio').each(function () {
name = $(this).attr('name');
if (flag && !$(':radio[name="' + name + '"]:checked').length) {
alert(name + ' group not checked');
flag = false;
}
});
return flag;
});
try this
<form name="formRate" action="myServlet" method="post">
<input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
<input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
<input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">
<button type="submit" class="myButton" onclick="return sendSuccess();">Submit</button>
</form>
function sendSuccess(){
var flag = false;
var len = $('input:radio[name="ratingInput1"]:checked').size();
if(len == 0){
console.log('noooooo');
flag = false;
}else{
console.log('yesssss');
flag = true;
}
return flag;
}
Its a simple form with radio buttons, so all you need is give the form a name formRate, and no need for jQuery, the following will work
HTML
<form name="formRate" action="myServlet" method="post">
<input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
<input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
<input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">
<button type="submit" class="myButton" onclick="return sendSuccess();">Submit</button>
</form>
Javascript
function sendSuccess() {
rating = document.forms["formname"]["ratingInput1"].value;
if(rating > 0){
console.log(rating);
}
else {
console.log('No rating');
}
return false;
}
var flag = $('[name="ratingInput1"]').is(':checked');
will return false if no radio with that name is chosen.