Create button with Jquery that change the url attribute based on checkbox - javascript

I'm trying to add a button for the WhatsApp link, that changes the WhatsApp pre-text with user checkbox.
This what I've got so far:
$('.cb').click(function() {
if($(this).is(":checked")){
var cbVal = $('label[for=' + $(this).attr('id') + ']').text();
var href = $('a').attr('href');
href += cbVal + (',');
$('a').attr('href', href)
}
});
.fieldset {
margin-bottom:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
Order Now
</button>
So when I checked the checkbox, the URL attribute for the button is added. The problem is, when I uncheck the checkbox, the URL attribute is not removed.
Please help what have I missed?
*also it is very nice when someone can re-write the JS into pure vanilla javascript without jquery :)
Thank you

I rewrited some of the code to open the link only when users click on the link via onlick attribute.
I also recommend that your put the values on checkbox value attribute, because you can control what go in URL and what is visible to user in more simple way.
function openLink() {
let inputs = document.querySelectorAll(".cb:checked");
const link = "https://wa.me/123456?orders=" + Array.from(inputs).map(x => x.value).join();
console.log(link);
// now you can open the window via:
// window.open(link, "_blank");
}
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox" value="burguer">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox" value="juice">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox" value="ice-cream">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
Order Now
</button>

Another solution is mantain the update link functionality but always recreate the URL when users click on checkbox
function updateLink() {
const selectedInputs = document.querySelectorAll(".cb:checked");
const url = "https://wa.me/123456?orders=" + Array.from(selectedInputs).map(x => x.value).join();
document.getElementById("wp-link").setAttribute("href", url);
console.log(url);
}
window.addEventListener("DOMContentLoaded", _ => {
document.body.querySelectorAll(".cb").forEach(x => {
x.addEventListener("click", updateLink, true)
});
});
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox" value="burguer">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox" value="juice">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox" value="ice-cream">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
<a id="wp-link" href="javascript:void(0)" >Order Now</a>
</button>

You just need to loop on checked input and generate the link everytime user click on checkbox.
$('.cb').click(function() {
var href = "https://wa.me/123456?text=I%20want%20to%20order:%20";
$('.cb').each(function(index, value) {
if ($(this).is(":checked")) {
var cbVal = $('label[for=' + $(this).attr('id') + ']').text();
href += cbVal + (',');
}
});
$('a.whatsappLink').attr('href', href);
console.clear();
console.log(href);
});
.fieldset {
margin-bottom:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
Order Now
</button>

function removeItem(arr, target) {
const aux = arr.slice()
aux.some((item, idx) => {
if (item === target) {
const a = arr.splice(idx, 1)
return true
}
return false
})
return arr
}
$('.cb').click(function() {
var href = $('a').attr('href');
var url = href.split(',')
var cbVal = $('label[for=' + $(this).attr('id') + ']').text();
if($(this).is(":checked")){
url.push(cbVal);
} else {
url = removeItem(url, cbVal)
}
$('a').attr('href', url.join())
$('#result').text($('a').attr('href'))
});
$('#result').text($('a').attr('href'))
.fieldset {
margin-bottom:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
Order Now
</button>
<div id="result"></div>

Related

Troubles while trying to use getElementsByClassName to fill value in radio buttons

please.
Have a container on my page filled with links ("link_storage"), where my popup gets links for "value" ("code part bellow"). As you can see it's tied to the IDs, but now I need somehow to switch to class names (for example from old_id_1 to link1_cont).
I was trying to switch to .getElementsByClassName() but didn't succeed.
function onLinkClickCallBack(event) {
let disableClassName = 'disabled';
let linkElement = document.getElementById(event.target.id);
// Don't continue if button is disabled
if (linkElement.classList.contains(disableClassName)) {
return false;
}
}
let inputs = document.getElementsByName('productId');
for (i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
let value = inputs[i].value;
document.location.href = document.getElementById(value).href;
}
}
<div class="link_storage">
<span class="link1_cont" id="old_id_1" style="display: none" href="link1"></span>
<span class="link2_cont" id="old_id_2" style="display: none" href="link2"></span>
<span class="link3_cont" id="old_id_3" style="display: none" href="link3"></span>
</div>
<fieldset>
<label>
<input type="radio" name="productId" id="radio4" value="zone_link_1" checked>
<h3>text<br><small>text</small></h3>
</label>
<label>
<input type="radio" name="productId" id="radio5" value="zone_link_2">
<h3>text<br><small>text</small></h3>
</label>
<label>
<input type="radio" name="productId" id="radio6" value="zone_link_3">
<h3>text<br><small>text</small></h3>
</label>
</fieldset>
Remove zone_ and add _cont to the value, and use that as the class name of the element in link_storage.
function onLinkClickCallBack(event) {
let disableClassName = 'disabled';
let linkElement = document.getElementById(event.target.id);
// Don't continue if button is disabled
if (linkElement.classList.contains(disableClassName)) {
return false;
}
}
let selectedInput = document.querySelector(".productId:checked");
if (selectedInput) {
let linkClass = selectedInput.value.replace("zone_") + "_cont";
document.location.href = document.querySelector(`.${linkClass}`).href;
<div class="link_storage">
<span class="link1_cont" id="old_id_1" style="display: none" href="link1"></span>
<span class="link2_cont" id="old_id_2" style="display: none" href="link2"></span>
<span class="link3_cont" id="old_id_3" style="display: none" href="link3"></span>
</div>
<fieldset>
<label>
<input type="radio" name="productId" id="radio4" value="zone_link_1" checked>
<h3>text<br><small>text</small></h3>
</label>
<label>
<input type="radio" name="productId" id="radio5" value="zone_link_2">
<h3>text<br><small>text</small></h3>
</label>
<label>
<input type="radio" name="productId" id="radio6" value="zone_link_3">
<h3>text<br><small>text</small></h3>
</label>
</fieldset>

I am trying to hide an input and show it with jquery but the input is not showing

if($('#yes').prop('checked')){
$('#phone-num').show();
}else{
$('#phone-num').hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />
You need in order to do that to listen to the click on your checkbox.
You code - as you did it - only execute itself one time at the loading of the page.
In the snippet below, a listener is added to the checkbox and is triggered every time you click on it.
$('#yes').click(function() {
var isChecked = $(this).prop('checked');
if (isChecked) {
$('#phone-num').show();
} else {
$('#phone-num').hide();
}
});
#phone-num {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="yes"> Phone Me concerning this case: </label>
<input type="checkbox" name="phone_me" id="yes" />
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />
Add a listener for the checkbox change.
If you don't want the checkbox to be visible the first time, you can add a style with display:none to hide it.
$('#yes').change(
function(){
//console.log("check if checked!");
if ($(this).is(':checked')) {
$('#phone-num').show();
}
else
{
$('#phone-num').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" style="display:none;" />
You can hide the input by default, then add an on click handler to the check box and toggle visibility
$(function() {
$(document).on('click', '#yes', function() {
$('#phone-num').toggle();
});
});
#phone-num {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />

How to get label values of checkbox in javascript

I have two checkbox, depending upon,which checkbox user clicks, I need to call other function, however, I'm not abler to get the checkbox label values.
Here is my code :
function getLabel(id)
{
return $("#"+id).next().text();
}
function BillStatus(){
console.log("its here");
var label=getLabel('checkboxid1');
console.log(label);
if(label=="No") {
//some function to call here
}else{
//other function to call here
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus()" style="visibility: visible"/>
Yes
</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus()" style="visibility: visible" />
No
</label>
</div>
You've several typos in your code, but the main problem comes from the return line, you should use parent() instead of next() :
return $("#"+id).parent().text().trim();
NOTE : Use trim() to remove the extra spaces from the label text returned.
Hope this helps.
function getLabel(id)
{
return $("#"+id).parent().text().trim();
}
function BillStatus(_this){
console.log("its here");
var label=getLabel(_this.id);
console.log(label);
if( $(_this).parent().text().trim() === "No"){
console.log("Nooooo");
}else{
console.log("Yessss");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus(this)" style="visibility: visible" /> Yes
</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus(this)" style="visibility: visible" />No
</label>
</div>
Since you're using jQuery the alternative solution will attach the click event to the common class and get the label from the currently clicked one like the example below.
$('.checkbox-container input:checkbox').on('click', function()
{
if( $(this).parent().text().trim() === "No"){
console.log("Nooooo");
}else{
console.log("Yessss");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1" class="checkbox-container">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1"/> Yes
</label>
</div>
<br>
<div id="check2" class="checkbox-container">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No"/>No
</label>
</div>
You need to add the this keyword as parameter to your BillStatus functions.
Instead of getLabel you can simply write:
ele.parentElement.textContent.trim();
You need to use the onchange event instead of onclick.
function BillStatus(ele) {
var label=ele.parentElement.textContent.trim();
console.log('Label: ' + label + ' Checked: ' + ele.checked);
if(label=="No") {
//some function to call here
}else{
//other function to call here
}
}
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" onchange="BillStatus(this)" style="visibility: visible"
/> Yes</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onchange="BillStatus(this)" style="visibility: visible" />No</label>
</div>
A full javascript version, without inline code is:
document.addEventListener('DOMContentLoaded', function(e) {
document.querySelectorAll('div[id^=check] [type="checkbox"]').forEach(function(ele, idx) {
ele.addEventListener('change', function(e) {
var label = this.parentElement.textContent.trim();
console.log('Label: ' + label + ' Checked: ' + this.checked);
if(label=="No") {
//some function to call here
}else{
//other function to call here
}
})
})
})
//
// on document ready
//
document.addEventListener('DOMContentLoaded', function(e) {
//
// for each div having aan id starting with and having a checkbox...
//
document.querySelectorAll('div[id^=check] [type="checkbox"]').forEach(function(ele, idx) {
//
// add the change event handler
//
ele.addEventListener('change', function(e) {
var label = this.parentElement.textContent.trim();
console.log('Label: ' + label + ' Checked: ' + this.checked);
if(label=="No") {
//some function to call here
}else{
//other function to call here
}
})
})
})
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" style="visibility: visible"
/> Yes</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" style="visibility: visible" />No</label>
</div>
you can try $("input[type='checkbox']:checked:last").next().text()
function getLabel(id)
{
return $("#"+id).next().text();
}
function BillStatus(){
console.log("its here");
var label = $("input[type='checkbox']:checked:last").next().text();
label = $.trim(label);
if(label== "No") {
console.log("No is checked");
}else if(label== "Yes") {
console.log("Yes is checked");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1">
<input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus()" style="visibility: visible"/>
<label>
Yes
</label>
</div>
<br>
<div id="check2">
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus()" style="visibility: visible" />
<label>
No
</label>
</div>
I think your are selecting the next dom element instead of parent element.Please refer this bin.
function getLabel(id)
{
return $("#"+id).parent().text().trim();
}
function BillStatus(){
var elem=this.event.target.id;
var label=getLabel(elem);
console.log(label);
if(label=="No") {
alert(label)
}else{
alert(label)
}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus()" style="visibility: visible"
/> Yes</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus()" style="visibility: visible" />No</label>
</div>
</body>
</html>

Auto scroll while selecting checkbox from div using javascript

i have two division tag one for maintain overflow content and another contain the check box
when i click any check box i just need to scroll bar depending up on the check box
i.e there is 20 check box, 9-10 are visible, if you want other then you have to scroll scroll bar, but i want functionality like when i click on 9 check box and the user want to go forward then 10 check box come up automatic. this functionality already provided in hot mail for selecting the mail.
for that one i have use following
<div>
<div id="text" style="width: 500px; height:200px; border: solid 1px grey; overflow: scroll;">
<input id="check1" type="checkbox" onclick="update(this.id)">Auto-scroll1<br>
<input id="check2" type="checkbox" onclick="update(this.id)">Auto-scroll2<br>
<input id="check3" type="checkbox" onclick="update(this.id)">Auto-scroll3<br>
<input id="check4" type="checkbox" onclick="update(this.id)">Auto-scroll4<br>
<input id="check5" type="checkbox" onclick="update(this.id)">Auto-scroll5<br>
<input id="check6" type="checkbox" onclick="update(this.id)">Auto-scroll6<br>
<input id="check7" type="checkbox" onclick="update(this.id)">Auto-scroll7<br>
<input id="check8" type="checkbox" onclick="update(this.id)">Auto-scroll8<br>
<input id="check9" type="checkbox" onclick="update(this.id)">Auto-scroll9<br>
<input id="check10" type="checkbox" onclick="update(this.id)">Auto-scroll10<br>
<input id="check11" type="checkbox" onclick="update(this.id)">Auto-scroll11<br>
<input id="check12" type="checkbox" onclick="update(this.id)">Auto-scroll12<br>
<input id="check13" type="checkbox" onclick="update(this.id)">Auto-scroll13<br>
<input id="check14" type="checkbox" onclick="update(this.id)">Auto-scroll14<br>
<input id="check15" type="checkbox" onclick="update(this.id)">Auto-scroll15<br>
<input id="check16" type="checkbox" onclick="update(this.id)">Auto-scroll16<br>
<input id="check17" type="checkbox" onclick="update(this.id)">Auto-scroll17<br>
<input id="check18" type="checkbox" onclick="update(this.id)">Auto-scroll18<br>
<input id="check19" type="checkbox" onclick="update(this.id)">Auto-scroll19<br>
<input id="check20" type="checkbox" onclick="update(this.id)">Auto-scroll20<br>
<script type="text/javascript">
function update(checkID) {
var box = document.getElementById("checkID");
var tag = document.getElementById("text");
tag.scrollTop = tag.scrollTop - 17;
setTimeout('update(checkID)', 1000);
}
</script>
</div>
</div>
how to scroll scroll bar when user select check box from the list
and also if user selecting forward than scroll down or user select backward than scroll up as per the user requirement
please help me
thanks in advance ...
I think i did what you want. You will need jQuery for this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="text" style="width:500px;height:200px;border:solid 1px grey;overflow:scroll;">
<input type="checkbox" />Auto-scroll1<br/>
<input type="checkbox" />Auto-scroll2<br/>
<input type="checkbox" />Auto-scroll3<br/>
<input type="checkbox" />Auto-scroll4<br/>
<input type="checkbox" />Auto-scroll5<br/>
<input type="checkbox" />Auto-scroll6<br/>
<input type="checkbox" />Auto-scroll7<br/>
<input type="checkbox" />Auto-scroll8<br/>
<input type="checkbox" />Auto-scroll9<br/>
<input type="checkbox" />Auto-scroll10<br/>
<input type="checkbox" />Auto-scroll11<br/>
<input type="checkbox" />Auto-scroll12<br/>
<input type="checkbox" />Auto-scroll13<br/>
<input type="checkbox" />Auto-scroll14<br/>
<input type="checkbox" />Auto-scroll15<br/>
<input type="checkbox" />Auto-scroll16<br/>
<input type="checkbox" />Auto-scroll17<br/>
<input type="checkbox" />Auto-scroll18<br/>
<input type="checkbox" />Auto-scroll19<br/>
<input type="checkbox" />Auto-scroll20<br/>
</div>
<script type="text/javascript">
$(function() {
var ct = $('#text'),
cboxes = $('input[type="checkbox"]', ct),
lastChecked = null;
cboxes.click(function() {
if (!lastChecked)
lastChecked = this;
var _current = $(this),
_last = $(lastChecked),
cindex = cboxes.index(_current),
lindex = cboxes.index(_last),
t = null;
//next
if (cindex >= lindex) {
t = $(cboxes[cindex + 1]);
if (t) ct.animate({ scrollTop: ct.scrollTop() + t.height() * 1.5 }, 500);
//prev
} else if (cindex < lindex) {
t = $(cboxes[cindex - 1]);
if (t) ct.animate({ scrollTop: ct.scrollTop() - t.height() * 1.5 }, 500);
}
lastChecked = this;
});
});
</script>
see this

How can I make this javascript form validation DRYer?

The user has to select one radio from each of three input "categories". If he "submits" without doing so, he gets a warning:
http://jsfiddle.net/bqyvS/
Markup like this:
<form>
<div id="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
if (!$('#color input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a color!");
}
else if(!$('#shape input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a shape!");
}
else if(!$('#size input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a size!");
}
});
This is a simplified version of a larger piece of code. How can I rewrite the conditional more efficiently so that I'm not verbosely checking each input name? (There should only be one "warning" displayed per "submit", even if multiple input name categories aren't checked.) Editing the markup would be okay.
Thanks!
When applying behavior to similar groups, you should start thinking about classes instead of ids, in this solution, you don't need a separate data-name but I believe it's better to have data separate from html id, but you could use this.id if you prefer
<form>
<div id="color" class="selection-group" data-name="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape" class="selection-group" data-name="square">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size" class="selection-group" data-name="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
$('.selection-group').each(function() {
if(!$(this).find('input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a "+ $(this).data('name') +"!");
return false;
}
});
});
function validationCheck() {
var isValid = true,
errorText = "";
$("form div").each( //get the divs that hold the radios and loop
//$("#color, #shape, #size").each( //could do it by ids of the divs also
function(){
var div = jQuery(this), //div reference
isChecked = div.find('input[type="radio"]:checked').length>0; //see if we have anything selected
if (!isChecked) { //if no selections, show error message
isValid = false; //set validation to false
errorText = "Oops! Please choose a " + div.prop("id") + "!"; //build error message
return false; //exit each loop
}
}
);
$('#warning').text(errorText); //set error message
return isValid;
}
$('#link').on('click', function(){
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
$('#warning').text("Oops! Please choose a " + this.id + "!");
});
});
jsFiddle
You may want to consider generating a warning message in the case a user does not select any inputs or only 1 input.
In this example, a user will recieve a message similar to Oops! Please choose a color, and shape!
$('#link').on('click', function(){
var msgs = [];
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
msgs.push(this.id);
});
if(msgs.length > 0)
$('#warning').text("Oops! Please choose a " + msgs.join(", and "));
});
jsFiddle

Categories