How to toggle div by clicking radio button? - javascript

By default the both reagent_code should be hidden. By selecting the radio button, have to show the appropriate DIV (following its #id).
function marketer(x) {
if (x == 0) {
document.getElementById('reagent_code').style.display = 'none';
} else if (x == 1) {
document.getElementById('reagent_code').style.display = 'block';
return;
}
}
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
<label class="form-check-label" for="no">No</label>
</div>
I get this error.
TypeError: marketer is not a function

make sure you do not use the same function names and elements names
use an event listener and toggle the element
jQuery
$("[name=marketer]").on("click", function() {
console.log(this.value)
$('#reagent_code').toggle(this.value == 1)
})
$("[name=marketer]:checked").click()
#Reagent {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" checked id="yes" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" value="0">
<label class="form-check-label" for="no">No</label>
</div>
<div id="reagent_code">Reagent</div>
Plain JS
[...document.querySelectorAll("[name=marketer]")].forEach(function(elem) {
elem.addEventListener("click", function() {
console.log(this.value)
document.getElementById('reagent_code').style.display = this.value === "0" ? 'none' : 'block';
})
if (elem.checked) {
elem.click();
}
})
#Reagent { display:none }
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" checked id="yes" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" value="0">
<label class="form-check-label" for="no">No</label>
</div>
<div id="reagent_code">Reagent</div>

Following suggestion of AvcS to your code, without any other library.
The function marketer should be defined on global scope, use window.marketer = function, if you are defining it inside a function
window.marketer = function(x) {
if (x == 0) {
document.getElementById('reagent_code').style.display = 'none';
} else if (x == 1) {
document.getElementById('reagent_code').style.display = 'block';
return;
}
}
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
<label class="form-check-label" for="no">No</label>
</div>
</div>
<div id='reagent_code'>
My amazing div
</div>
However, as suggested by Rory McCrossan, you should review your code.

Try This
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
<label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
<label class="form-check-label" for="no">No</label>
</div>
<!-- div to hide and show -->
<div id="div1" style="display: none;">
<h1>this is div 1 will show if yes</h1>
</div>
<div id="div2" style="display: none;">
<h1>this is div 2 will show if no</h1>
</div>
<script>
function marketer(x) {
if (x == 0) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
} else if (x == 1) {
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
return;
}
}
</script>

Try this simple code below :
$('input[type=radio]').change(function(){
if($(this).val() == 'ON') {
return $('.content').css('display', 'block');
}
return $('.content').css('display', 'none');
});
<input type="radio" name="radio" id="radio-1" value="ON" checked="">
<label for="radio-1">ON</label>
<input type="radio" name="radio" id="radio-2" value="OFF">
<label for="radio-2">OFF</label>
<div class="content">
Hello world.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

multiple checkboxs required to click submit js conditionals

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')
}

Get nested inner content value of each div using jQuery

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();

something wrong on my two radio inputs in js and php

This is part of my PHP and JS. These two radio inputs are on my contact form and after I added "domain" radio input, it stopped sending emails to me.
It was working fine until "transfer" radio input. I'm trying to figure out what am I missing.
thanks
if(isset( $_POST['transfer'])){
$transfer = $_POST['transfer'];
}
if(isset( $_POST['domain'])){
$domain = $_POST['domain'];
}
document.getElementById('status').innerHTML = "Sending...";
formData = {
'transfer' : $('input:radio[name=transfer]:checked').val()
'domain' : $('input:radio[name=domain]:checked').val()
};
<form>
<div class="col-md-6">
<div class="form-group">
<label class="form-check-label" for="transfer"><span style="color: #000">transfer</span></label>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label active" for="transfer1"><span style="color: #67615e">yes</span></label>
<input class="form-check-input" type="radio" name="transfer" id="transfer1" value="yes" checked="">
<label class="form-check-label" for="transfer2"><span style="color: #67615e">no</span></label>
<input class="form-check-input" type="radio" name="transfer" id="transfer2" value="no">
<label class="form-check-label" for="transfer3"><span style="color: #67615e">no clue</span></label>
<input class="form-check-input" type="radio" name="transfer" id="transfer3" value="no clue">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-check-label" for="domain"><span style="color: #000">domain</span></label>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label active" for="domain1"><span style="color: #67615e">yes</span></label>
<input class="form-check-input" type="radio" name="domain" id="domain1" value="yes" checked="">
<label class="form-check-label" for="domain2"><span style="color: #67615e">no</span></label>
<input class="form-check-input" type="radio" name="domain" id="domain2" value="no">
<label class="form-check-label" for="domain3"><span style="color: #67615e">no clue</span></label>
<input class="form-check-input" type="radio" name="domain" id="domain3" value="no clue">
</div>
</div>
</div>
</form>
I see you lack "," in json format, it should like this
document.getElementById('status').innerHTML = "Sending...";
formData = {
'transfer' : $('input:radio[name=transfer]:checked').val(),
'domain' : $('input:radio[name=domain]:checked').val()
};
Try to add ","
'transfer' : $('input:radio[name=transfer]:checked').val(),
Hope it's help

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.

Categories