Based on below HTML snippet, manage to get two lines of radio button. When you click on the radio button on the first line, and then proceeds to click any of the radio button on the second line, the result of the radio button on the first line disappears.
How can I make sure, results of both lines of radio button appear together.
<!-- Start first Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<!-- End first Div -->
<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option1">
<label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option2">
<label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option3" disabled>
<label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
</div>
<!-- End Second Div -->
Thanks
John
As stated in the MDN documentation on radio buttons:
A radio group is defined by giving each of radio buttons in the group
the same name. Once a radio group is established, selecting any radio
button in that group automatically deselects any currently-selected
radio button in the same group.
So, if you want the second <div> radio buttons to be separate, you have to use a different name for that set of buttons:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Start first Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<!-- End first Div -->
<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio4" value="option1">
<label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio5" value="option2">
<label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio6" value="option3" disabled>
<label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
</div>
<!-- End Second Div -->
Related
I have multiple radio button with different name attribute and with different class names. I need to auto-update these value to the mysql database table.
I am able to auto-update the first value of radio button(i.e,"gender-type") and
when I click on second radio button(i.e,"skincolor") it's value is not updating into the database table.
Can anyone help me with this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Gender: </h6>
<div class="form-check form-check-inline">
<input class="gender" type="radio" name="gender" value="Female" id="femaleGender" />
<label class="form-check-label " for="femaleGender">Female</label>
</div>
<div class="form-check form-check-inline">
<input class="gender" type="radio" name="gender" value="Male" id="maleGender" />
<label class="form-check-label " for="maleGender">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="gender" type="radio" name="gender" value="Other" id="otherGender" />
<label class="form-check-label " for="otherGender">Other</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Skin Color: </h6>
<div class="form-check form-check-inline">
<input class="scolor" type="radio" name="s_color" value="color1" id="color1" />
<label class="form-check-label " for="color1">color1</label>
</div>
<div class="form-check form-check-inline">
<input class="scolor" type="radio" name="s_color" value="color2" id="color2" />
<label class="form-check-label " for="color2">color2</label>
</div>
<div class="form-check form-check-inline">
<input class="scolor" type="radio" name="s_color" value="color3" id="color3" />
<label class="form-check-label " for="color3">color3</label>
</div>
</div>
<script>
function autosave()
{
var gender = $("input:radio[name='gender']:checked").val();
var s_color = $("input:radio[name='s_color']:checked").val();
if(gender !=" "&& s_color !=" ")
{
$.ajax({
url:"fetch1.php",
method:"POST",
data:
{
send_gender:gender,
send_s_color:s_color,
send_id:id
},
dataType:"text",
success:function(data){
if(data != ""){
$("#post_id").val(data);
}
$("#autosave").text("Data saved");
} /* success */
}) /* ajax */
} /* filter */
}
</script>
</body>
</html>
It is not clear from the code given how the Javascript/jQuery function autosave is actually invoked and nor is it clear whether or not this is an issue with the PHP so the following might or might not be of interest. There is no jQuery in this small fragment of Javascript - I don't use it so would do it a disservice but this is simple vanilla Javascript.
A small modification to the HTML ( not absolutely necessary but syntactically correct ) would be to use a section to define each of the radio groupings - which has the benefit of allowing us to easily count the number of radio groupings on the page and to compare that with the number of checked radio buttons - when these are the same the ajax function will be sent - thus ensuring that all radio buttons are included in the POST request which should mean the PHP can update the db OK.
const d=document;
// 1 radio button from each of these MUST be checked before ajax request is sent
let oSections=d.querySelectorAll('section');
d.addEventListener('change',e=>{
if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
// Find ALL checked radio buttons
let col=d.querySelectorAll('section [type="radio"]:checked');
if( col.length === oSections.length ){
// 1 radio from EACH section is now checked, create
// the FormData payload to send via AJAX to the server.
let fd=new FormData();
col.forEach(n=>fd.set(n.name,n.value));
// Send the request
fetch( 'fetch1.php', { method:'post',body:fd } )
.then(r=>r.text())
.then(data=>{
d.querySelector('#post_id').value=data;
d.querySelector('#autosave').textContent='Data saved';
})
.catch(alert)
}
}
});
section{
border:1px dotted grey;
margin:0.25rem;
padding:0.5rem
}
h6{
margin:0 0 1rem 0;
}
<section class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Gender:</h6>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="gender" type="radio" name="gender" value="Female" />Female
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="gender" type="radio" name="gender" value="Male" />Male
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="gender" type="radio" name="gender" value="Other" />Other
</label>
</div>
</section>
<section class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Skin Color:</h6>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Green" />Green
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Orange" />Orange
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Purple" />Purple
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Red" />Red
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Gold" />Gold
</label>
</div>
</section>
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"/>
I am trying to get selected values of all the radio buttons and if one is not selected, then null value.
Here is my HTML code:
<div class="question m-2">
<div class="question-title">Question 1</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-1">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-1">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-1">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-1">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 2</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-2">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-2">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-2">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-2">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 3</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-3">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-3">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-3">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-3">Option d
</label>
</div>
</div>
I want to store all the answers of each question, if selected then the selected value, if not selected, then null value. Can anyone help me with jQuery code?
You can get the answers like this:
$("#submit").on("click", function() {
let questions = $(".question");
let answers = [];
let answer;
questions.each(function() {
if ($(this).find("input[type='radio']:checked").length) {
answer = $(this).find("input[type='radio']:checked").val();
} else {
answer = "null";
}
answers.push(answer);
});
console.log(answers);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question m-2">
<div class="question-title">Question 1</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-1">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-1">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-1">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-1">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 2</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-2">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-2">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-2">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-2">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 3</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-3">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-3">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-3">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-3">Option d
</label>
</div>
</div>
<button id="submit">
Submit
</button>
You can get it with javascript as well
const questions = document.querySelectorAll('.question');
const answers = Array.from(questions).map(e => e.querySelector('input.form-
check - input: checked ').value);
In JQuery
const answers = $('.question input.form-check-input:checked').val();
I need to validate checkboxes using javascript, and if validation fails - show div with invalid-feedback under checkboxes.
Unfortunately when I add invalid-feedback class to my div, it disappears.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck1" oninput="validateCheckbox()">
<label class="form-check-label" for="gridCheck1">
checbkox1
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck2" oninput="validateCheckbox()">
<label class="form-check-label" for="gridCheck2">
Checbkox12
</label>
</div>
<div id="checkboxIdError">NEED TO HAVE invalid-feedback class</div>
</div>````
Here is the bootstrap validation http://bootstrapvalidator.votintsev.ru/validators/choice/
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.