multiple checkboxs required to click submit js conditionals - javascript

I am currently trying to make a form where multiple things are required like name email etc i am not having any trouble sorting those ones out but when it comes to the check boxes i struggle to figure out how to make it so that two or more checkboxes are required to the submit the form this is the way i have been trying to do it. after checkbox.value i have tried <2. also here is the code for the checkboxes in html.
if (checkbox.value ) {
messages.push('Two intrests must be selected')
}
<div class="form-check form-check-column">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
</label>

You can add a simple id to container of checkbox then for each checked checkbox plus a counter +1 for check if is equal or plus 2 like:
function Check()
{
var howmuch = 0;
var container = document.getElementById('container');
var checkbox = container.querySelectorAll('input[type="checkbox"]');
//You can use short without var like document.getElementById('container').querySelectorAll('input[type="checkbox"]')
checkbox.forEach(function(item) {
if(item.checked){howmuch += 1}
});
if(howmuch >= 2){
console.log('ok');
}else{
console.log('MUST BE 2 or +');
}
}
<div class="form-check form-check-column" id="container">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
</label>
</div>
<button onClick="Check();">simulate form</button>
obviously you will change my console.log with an action like alert if is not ok and form submit if is ok (remember to use event.preventdefault() for prevent submit before check if all is ok)

var howmuch = 0;
var container = document.getElementById('container');
var checkbox = container.querySelectorAll('input[type="checkbox"]');
checkbox.forEach(function(item) {
if(item.checked){howmuch += 1}
});
if(howmuch < 2){
messages.push('Two to three intersts must be selected')
} else if (howmuch > 3) {
messages.push('You can only select three intrests max')
}

Related

enable submit button only if radio button in all questions are selected jquery

i have a simple html form where i have like 50 questions, all the questions hasve ther own radio button options, something like below:
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
i want the user to complete all the questions,and only submit after completion, i did something like below:
$(function(){
$("input[type='radio']").change(function(){
$("input[type='submit']").prop("disabled", false);
});
});
<input type="submit" disabled="disabled"/>
however this is not accurate as the submit button enables if a user complete 1 question, can anyone please tell me how to accomplish this, thanks in advance
Make it simple by making one of the radio buttons selected
your code will look like
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11" checked>
<label class="form-check-label" for="flexRadioDefault11">Option 1</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefaultq12">
<label class="form-check-label" for="flexRadioDefaultq12">Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefaultq21" checked>
<label class="form-check-label" for="flexRadioDefaultq21"> Option 1 </label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefaultq22">
<label class="form-check-label" for="flexRadioDefaultq22"> Option 2 </label>
$("#btn").on("click", function (e) {
e.preventDefault;
$(".radio").each(function (index) {
if (!$(this).is(":checked")) {
alert(index + "is uncheck");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<button id="btn">submit</button>
You need tu ose .each() method.
Each radio question should have a unique name so I changed them to q1,q2,q3. Even I added a wrapper for each question block. Whenever a question is answered, I loop each question block and check whether any block still remains unanswered. If any block(question) is unanswered, doEnable variable changes to false and loop break out.
$(function(){
$("input[type='radio']").change(function(){
let doEnable = true;
$(".form-check-input-wrap").each(function(){
if($(this).find("input[type='radio']:checked").length == 0){
doEnable = false;
return false;
}
});
if(doEnable) {
$("input[type='submit']").prop("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="text-danger">1. Question 1</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11">
<label class="form-check-label" for="flexRadioDefault11">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault12">
<label class="form-check-label" for="flexRadioDefault12">
Option 2 </label>
</div>
<h3 class="text-danger">2. Question 2</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefault21">
<label class="form-check-label" for="flexRadioDefault21">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefault22">
<label class="form-check-label" for="flexRadioDefault22">
Option 2 </label>
</div>
<h3 class="text-danger">3. Question 3</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q3" id="flexRadioDefault31">
<label class="form-check-label" for="flexRadioDefault31">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q3" id="flexRadioDefault32">
<label class="form-check-label" for="flexRadioDefault32">
Option 2 </label>
</div>
<input type="submit" disabled="disabled"/>

Trying to set Radio button in Update form when user clicks update/edit button

Trying to set Radio button in Update form
when user clicks update/edit button, a new window opens and loads the previous values that user entered in the respective elements with the radio buttons checked/set to the previous values but no radio buttons are selected
It is multiple choice question type with 6 options and user selects 1 out of them
trying to set with name (as ID's are unique to all the radio buttons in the group) but not solved
enter code here
//this code works in console:
$('#inlineRadio1_1').attr('checked', true);
// but the below code does not when trying to set/check radio button
var SetRadio1; //previous radio button value in the variable SetRadio1 from 1 to 6
if (SetRadio1 == 1) {
$('#inlineRadio1_1').attr('checked', true);
}
else if (SetRadio1 == 2) {
$('#inlineRadio1_2').attr('checked', true);
}
else if (SetRadio1 == 6) {
$('#inlineRadio1_6').attr('checked', true);
}
<div class="col-md-12 pb-4">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio1_1" value="1">
<label class="form-check-label" for="inlineRadio">1</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio1_2" value="2">
<label class="form-check-label" for="inlineRadio">2</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio1_3" value="3">
<label class="form-check-label" for="inlineRadio">3</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio1_4" value="4">
<label class="form-check-label" for="inlineRadio">4</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio1_5" value="5">
<label class="form-check-label" for="inlineRadio">5</label>
</div>
<div class="form-check form-check-inline px-1">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio1_6" value="6">
<label class="form-check-label" for="inlineRadio">6</label>
</div>
</div>
```````````````````````````````````
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('SharePointList')/items?$filter=ID eq " + ID_number,
type: "GET",
async:false,
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
$("#Cars").val(data.d.results[0]["Car"]); //text area, works
$("#Books").val(data.d.results[0]["Book"]); //text area, works
$('input[name=inlineRadioOptions1][value=' + data.d.results[0]["Score_x0020_Q1"] + ']').prop('checked','checked'); //does not work
$('input:radio[name="inlineRadioOptions1"]').attr('checked', true); //does not work
$('#inlineRadio1_1').attr('checked', true); //by ID, works when tried in console
},
error: function (error) {
alert(JSON.stringify(error));
}
});
Lets suppose we have this structure and using the script included,everytime we click on a radio button we store its id to localStorage,and next time the page is loaded,the forEach loop will compare every radio id with the stored id,and when it finds it,makes it the selected one.
LocalStorage is one of the methods we can persist our data,the easiest one,but usefull only for storing small amounts of data (i think 5mb is the limit) and only locally,meaning you will be able to access it only in this particular system (and browser),if you clear browser's cache,you also clear localStorage data.
If you need this data accesible across the web,you should start learning how to use databases.
<!DOCTYPE html>
<html lang="en">
<body>
<input type="radio" id="radio1" name="radio" onclick="storeSelectedRadio(this)">
<label for="radio1">radio1</label><br>
<input type="radio" id="radio2" name="radio" onclick="storeSelectedRadio(this)">
<label for="radio2">radio2</label><br>
<input type="radio" id="radio3" name="radio" onclick="storeSelectedRadio(this)">
<label for="radio3">radio3</label><br>
<input type="radio" id="radio4" name="radio" onclick="storeSelectedRadio(this)">
<label for="radio4">radio4</label><br>
<input type="radio" id="radio5" name="radio" onclick="storeSelectedRadio(this)">
<label for="radio5">radio5</label><br>
<input type="radio" id="radio6" name="radio" onclick="storeSelectedRadio(this)">
<label for="radio6">radio6</label><br>
<script defer>
function storeSelectedRadio(e){
localStorage.setItem("selectedRadio", e.id );
}
const selectedRadio = localStorage.getItem("selectedRadio");
document.querySelectorAll('input[type="radio"]').forEach(radio =>{
if ( radio.id === selectedRadio ){
radio.checked = true;
}
})
</script>
</body>
</html>
Next time you should provide your own structure though,and a reproducible example.

For loop iteration - Checkbox auto increment by no

I am creating a checkbox group like below. It will be increment for 20 to 30 groups.
Instead of write jQuery like below for each checkbox group, is it possible to make through for loop iteration?
I tried through loop, but its not working as expected.
$('.checkbox-1 .done-check').change(function() {
$('.checkbox-1 .done-check').prop('checked', false);
$(this).prop('checked', true);
});
$('.checkbox-2 .done-check').change(function() {
$('.checkbox-2 .done-check').prop('checked', false);
$(this).prop('checked', true);
});
$('.checkbox-3 .done-check').change(function() {
$('.checkbox-3 .done-check').prop('checked', false);
$(this).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check checkbox-1">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
<div class="form-check checkbox-2">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
<div class="form-check checkbox-3">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
You do not need to loop at all. You just need to use contextual lookups correctly.
$('.done-check').on('change', function(){
if (this.checked) {
$(this).closest('div.form-check').find('.done-check').not(this).prop('checked', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check checkbox-1">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
<div class="form-check checkbox-2">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
<div class="form-check checkbox-3">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
When a checkbox is checked, you find the parent form-check wrapping the grouped checkboxes. You then find the nested checkboxes, exclude the one just checked, and then mark the rest unchecked.
Yes, iterating will be much more efficient. Also, let's clean up your selectors a little. Selectors like $('.checkbox-3 .done-check') work but are inefficient because jQuery reads them from right to left. Instead use $('.checkbox-3').find('.done-check').
For the loop:
var max = 30; // or how ever you determine it
for(var i = 1; i <= max; i++)
{
$('.checkbox-' + i).find('.done-check').change(function(){
$('.checkbox-' + i).find('.done-check').prop('checked',false);
$(this).prop('checked',true);
});
}
Now, I don't know why you have the two different lines there inside the function because they both target the same element but whatever your reason, that is one way to do the loop.

How to call javascript function for many radio button sets?

I have 10 questions each having 4 radio buttons as options. I want to validate whether all questions have a radio button checked. And call javascript function on submit button onclick.
Please help me with the javascript function.
Can i use a 2d elements to target each radio button in each question in the javascript function.Please resolve the javascript issue.running this javascript i can only target the questions using the 1d array.
function validateForm() {
var radios = document.getElementsByClassName("surveyQuestions");
var formValid = false;
var i = 0;
while (formValid == false && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
if (formValid == false) alert("Must Check Option !!");
}
<form class="forward">
<div class="surveyQuestions">
<label>2.Who is your Favorite Forward ? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
<label class="form-check-label" for="exampleRadios1">
Lionel Messi
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Cristiano Ronaldo
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Neymar Jr
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Mohammed Salah
</label>
</div>
</div>
</form>
<form class="midfielder">
<div class="surveyQuestions">
<label>3.Who is your favourite Midfielder? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<label class="form-check-label" for="exampleRadios1">
Toni Kroos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Andreas Iniesta
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Kevin De Bruyne
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Paul Pogba
</label>
</div>
</div>
</form>
<form class="defender">
<div class="surveyQuestions">
<label>4.Who is your Favorite Defender ? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
<label class="form-check-label" for="exampleRadios1">
Sergio Ramos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Gerard Pique
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Leonardo Bonucci
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Thiago Silva
</label>
</div>
</div>
</form>
Maybe you need to use classes to your radios. For example:
<input type="radio" class="checkthis group_01" id="group_01_item_01">
<input type="radio" class="checkthis group_01" id="group_01_item_02">
<input type="radio" class="checkthis group_01" id="group_01_item_03">
<input type="radio" class="checkthis group_01" id="group_01_item_04">
<input type="radio" class="checkthis group_02" id="group_02_item_01">
// ...and so on
After this you can select all radios with .checkthis class, and a group by .group_01 class, and an item with id.
Now you can use jQuery to find a selected from a group, like this:
var object_array = $('.group_01').find(':checked');
if (object_array.length > 0) {
// you have a selected element
} else {
// there isn't selected element
}
UPDATED:
Without jQuery, only native JavaScript:
var object_array = document.body.querySelector('.group_01:checked');
The if statement is the same.
You can try something like
Just modify your function something like below
function validateForm() {
var totalQue = document.getElementsByClassName("surveyQuestions").length;
var selectedAns = document.querySelectorAll("input[type='radio']:checked").length;
if(totalQue != selectedAns){
alert("Must Check Option !!");
return false;
}
}
This will give you all radio buttons which are selected.

Radio Buttons and javascript, wrong output

below is the code for my radio buttons,
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_north autocomplete='off'>North
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_south" autocomplete='off'>South
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_east" autocomplete='off'>East
</label>
and below is my javascript,
var form = document.getElementById("info_form");
alert(form.elements["radio_north"].value);
but I get 'on' on alert, instead of north, south or east. I tried my best but cannot figure out the reason.
Your HTML elements don't have a value attribute set, so you can't get North using .value
If you're trying to get North from the parent label tag, you can access it this way:
JS
var form = document.getElementById("info_form");
console.log(form.querySelector("#radio_north").parentNode.innerText);
HTML (note there was a missing " in your question)
<form id="info_form">
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_north" value="north" autocomplete='off'>North
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_south" autocomplete='off'>South
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_east" autocomplete='off'>East
</label>
</form>
JS Fiddle Example
https://jsfiddle.net/csqgq1qh/
Hope that helps!
EDIT
If you need to get the value of the radio, you first have to assign a value attribute. Once you have that, you can get the checked radio's value using some JavaScript.
HTML
<form id="info_form">
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_north" value="north" checked autocomplete='off'>North
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_south" value="south" autocomplete='off'>South
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_east" value="east" autocomplete='off'>East
</label>
</form>
<button id="clicker">Get Value</button>
JS
var form = document.getElementById("info_form");
console.log(form.querySelector("input[name='optradio']:checked").value);
/* use an event listener to alert the value when the button is clicked */
document.querySelector("#clicker").addEventListener('click', function() { alert(form.querySelector("input[name='optradio']:checked").value); } )
Updated JSFiddle
https://jsfiddle.net/csqgq1qh/2/

Categories