show or hide button if some radio input is have fill - javascript

I have quiz with input form like this:
<form method="post">
//for question 1
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz1" class="radio" value="answer a"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz1" class="radio" value="answer b"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz1" class="radio" value="answer c"/><span>a</span>
</label></div>
//for question 2
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz2" class="radio" value="answer a"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz2" class="radio" value="answer b"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz2" class="radio" value="answer c"/><span>a</span>
</label></div>
<input type="submit" value="submit">
how to hide the submit button, if I have not answered all radio question?
I have this function, but not work well
$(function() {
$('form:radio[class=radio]').on('click coba', function() {
$('#submit').toggle($('#radio').prop('checked'));
}).trigger('coba');
});

Try using jQuery selectors in order to achieve this. Try the code below:
$(function() {
$('form input:radio').on('change', function() {
if($(":radio", "#myForm").length/3 === $(":radio:checked", "#myForm").length){
$('#submit-form').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post" id="myForm" >
//for question 1
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz1" class="radio" value="answer a"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz1" class="radio" value="answer b"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz1" class="radio" value="answer c"/><span>a</span>
</label></div>
//for question 2
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz2" class="radio" value="answer a"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz2" class="radio" value="answer b"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio" name="quiz2" class="radio" value="answer c"/><span>a</span>
</label></div>
<input type="submit" id="submit-form" style="display:none" value="submit">

I think you must use proper use of class and id attribute before create the JS code.
You actually have no way to identify which radio buttons belong to the first question and which belong to the second, at least wrap every question in a container
don't give the same class name to radio inputs and to their div wrappers, there is no need to do it. maybe leave class "radio" for all radio elements and give the class "radio-wrapper" to the divs
most important: don't use the same ID for multiple elements. It's really wrong: why all your radio inputs have the "radio" id? id MUST be unique, otherwise you use class

A quick a dirty way would be:
$(function() {
//hide submit button
$(":submit").hide();
//The script needs to know how many radio button each group has
var groupRadioCount = $(":radio[name='quiz1']").length;
//All radio buttons (where name starts with 'quiz')
var $allRadio = $(":radio[name^='quiz']");
//All radio checked length
var allSelectedLen = $allRadio.length / groupRadioCount;
$('form :radio').on('change', function() {
$(":submit").toggle( $allRadio.filter(":checked").length === allSelectedLen);
});
});
A Demo
P.S. I have removed the ID attribute from your radio buttons as an ID must be unique in any given document!

In your html form put id in your form and submit button... And every id of your radio button must be unique... you can change your id's by id="radio1" id="radio2" id="radio3" and so on.. you said, you have a submit button, why is that your submit is an input.
<form id="main-form" method="post">
<button id="Submit" type="submit" value="submit"></button>
for the id of radios and so on
//for question 1
<div class="input-group radio">
<label>
<input type="radio" id="radio1" name="quiz1" class="radio" value="answer a"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio2" name="quiz1" class="radio" value="answer b"/><span>a</span>
</label></div>
<div class="input-group radio">
<label>
<input type="radio" id="radio3" name="quiz1" class="radio" value="answer c"/><span>a</span>
</label></div>
After that you may ask another question for the function of submit button

Here's an example implementation given your current HTML code:
$(function () {
$("form").submit(function (event) {
answer_groups = {};
$self = $(this);
// First we group the radio names
$self.find(':radio').map(function (key, radio) {
answer_groups[radio.name] = true;
})
// Then we check and see if there exists an answer for that group
Object.keys(answer_groups).map(function (group_name) {
// if not, then cancel the form being submitted.
if ($self.find(':radio[name="' + group_name + '"]:checked').length <= 0) {
alert('You must fill all questions before proceeding.');
event.preventDefault();
return false;
}
})
});
})
The idea here is simply to iterate through the radio groups and check for the value of each of those. If one does not exist, then cancel the form being submitted and return an alert (or error of some kind).
Demo: https://jsfiddle.net/t1s8e5ae/

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"/>

How to show specific value when click on any radio button in console using JavaScript?

I am having difficulty to show a value of selected radio button. When I click on question 1 then result 1 should be display on console but I am getting all the values of radio button.Can anyone help me please? Thanks
html
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1">
<label>Question 2</label>
<input type="radio" class="question" value="2">
<label>Question 3</label>
<input type="radio" class="question" value="3">
<button type="submit">Submit</button>
</form>
JavaScript
<script>
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
</script>
You could check to see if it is checked with question.checked.
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
if(question.checked){
console.log(question.value);
}
});
event.preventDefault();
}
You might also want to add names to all the radios, because the idea of radios is that only one of them can be ticked at a time. name does that for you:
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Instead of checking the checked property inside a loop. You could use the :checked pseudo-class to only select checked radios.
function answers(event)
{
var q = document.querySelectorAll('.question:checked');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Also be aware to use the name property to group radio buttons.

How to set property of radio button to checked

There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?
Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>

jQuery multi-step form: disable 'next' button until input is filled in each section

I have a multi-step form with different input types inside each <fieldset>. I have a 'next' <button> which will trigger the next section of the form once the current fieldset has been completed.
Currently the next button is set to disabled until the user has met the criteria for that fieldset - ie: checked radios/checkboxes etc.
The issue I'm having is the jQuery I'm using to switch the button attribute to .prop('disabled', false); changes all of the buttons in the entire form to false. Is it possible to target the <button> within the current fieldset only?
Additionally, is it possible to disable the next button if a user goes back to a section and unchecks all inputs?
Here's a previous answer containing the script i'm currently using: Disable button until one radio button is clicked
I have a Codepen with a prototype of what I'm working on here: https://codepen.io/abbasarezoo/pen/jZgQOV - you can assume once live each one fieldset will show at a time.
Code below:
HTML:
<form>
<fieldset>
<h2>Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button disabled>Next</button>
</fieldset>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-4" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-5" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
<fieldset>
<h2>Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-2">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button disabled>Next</button>
</fieldset>
</form>
JS:
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
Thanks in advance for any help!
i have just change your js into this .. this will help you to enable current button in the fieldset not all of them
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});

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