I tried to get innerText from a click button with js event
for exemple :
<label class="sc-AxirZ haYsgf">
<span>brouh</span>
<span></span>
<input type="radio" name="bruh" value="bruh1">
</label>
<label class="sc-AxirZ haYsgf">
<span>test</span>
<span></span>
<input type="radio" name="bruh1" value="bruh2">
</label>
<label class="sc-AxirZ haYsgf">
<span>test2</span>
<span></span>
<input type="radio" name="bruh3" value="bruh4">
</label>
I would like to get the value of the button when I clicked on it. (get "moins de 20 ans" if I clicked on it)
The only one prob it's, I've more than one button with the same class
Can you help me, please?
I try to do this for Google Tag Manager to get values.
Thanks a lot
Attach event listeners to the radio buttons and call a function when they change.
const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => radio.addEventListener('change', handleChange, false));
function handleChange(e) {
console.log(e.target.value);
}
<label class="sc-AxirZ haYsgf"><span>Moins de 25 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R01"></label>
<label class="sc-AxirZ haYsgf"><span>Moins de 20 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R02"></label>
<label class="sc-AxirZ haYsgf"><span>Moins de 29 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R03"></label>
Alternatively you can wrap your radio buttons in a container and apply the event listener to that element.
const container = document.querySelector('#container');
container.addEventListener('change', handleChange, false);
function handleChange(e) {
console.log(e.target.value);
}
<div id="container">
<label class="sc-AxirZ haYsgf"><span>Moins de 25 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R01"></label>
<label class="sc-AxirZ haYsgf"><span>Moins de 20 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R02"></label>
<label class="sc-AxirZ haYsgf"><span>Moins de 29 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R03"></label>
</div>
Additional documentation
querySelectorAll
addEventListener
Related
i'm using Uikit radio input (https://altair-html.tzdthemes.com/forms_regular.html).
The problem is the radio input is transforming between code and on site display
After load my form with Ajax, i want to alert value for radio choice after each change.
Here my code :
HTML :
<div class="uk-width-medium-1-2">
<h5>Radio set 1</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_1" value="Yes" data-md-icheck />
<label for="radio_opt_1" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_2" value="Non" data-md-icheck />
<label for="radio_opt_2" class="inline-label">No</label>
</span>
</div>
</div>
<div class="uk-width-medium-1-2">
<h5>Radio set 2</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_3" value="Yes" data-md-icheck />
<label for="radio_opt_3" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_4" value="Non" data-md-icheck />
<label for="radio_opt_4" class="inline-label">No</label>
</span>
</div>
</div>
Then here my JS (doesnt' work)
$(document).on('change', 'input:radio', function () {
alert('test');
});
That theme is using iCheck and according to the docs you should use:
$('input:radio').on('ifChecked', function(event) {
alert('test');
});
I am currently working on a filter that displays products categories through Radio Button selection:
<div class="round" id="r-group">x
<label for="r2" class="label-filter">
<input type="radio" id="r1" name="club-selection" value="club-selection">
<span class="label-text">The Club Selection</span>
</label>
<label for="r2" class="label-filter">
<input type="radio" id="r2" name="upholstery" value="upholstery">
<span class="label-text">All Upholstery</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r3" name="casegoods" value="casegoods">
<span class="label-text">All Casegoods</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r4" name="tables" value="tables">
<span class="label-text">All Tables</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r5" name="lighting" value="lighting">
<span class="label-text">All Lighting</span>
</label>
</div>
I want to be able show each category as I select the radio buttons. For example: If I select All Casegoods, I want to only show the div with data-category="casegoods". If I select Tables and Lighting I want to show the div with data-category="tables" and data-category="lighting". These are the basic structure of the divs per category:
<div class="product" data-category="club-selection">
<h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
<h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
<h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
<h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
<h4>Lighting</h4>
</div>
So far, I am able to store the value of the selected radio buttons into an array (selectedValues), but I am not sure what to do next to be able to display only the divs of the categories selected.This is the code that store the values:
$(function(){
var items = $("[data-category]");//get all the elements that has data-categories attribute
items.show(); //show all of the elements we found above
$("input[type=radio]").on("change",function(ev){ //bind onchange event
var selectedValues = []; //this array will hold all of the current categories
$("input:checked").each(function(idx, checkedRadio){//get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
selectedValues.push($(checkedRadio).val().toLowerCase());
//THIS IS WHERE I´M STUCK. What do I do with the values stored in the array?
});
});
});
EDIT:fixed the ids on the inputs.
You can do something like this:
var elems = $("[data-category]").filter(function() {
return selectedValues.indexOf($(this).data("category")) > -1;
});
elems.show();
I believe you want to use checkbox and not radio, since you cant deselect them again. Else you have to use the same name so you cant select more than one.
Also please note that many of your inputs have the same id, ID should always be unique.
Demo
$(function() {
var items = $("[data-category]"); //get all the elements that has data-categories attribute
items.show(); //show all of the elements we found above
$("input[type=checkbox]").on("change", function(ev) { //bind onchange event
$("[data-category]").hide()
var selectedValues = []; //this array will hold all of the current categories
$("input:checked").each(function(idx, checkedRadio) { //get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
selectedValues.push($(checkedRadio).val().toLowerCase());
});
var elems = $("[data-category]").filter(function() {
return selectedValues.indexOf($(this).data("category")) > -1;
});
elems.show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="round" id="r-group">
<label for="r2" class="label-filter">
<input type="checkbox" id="r2" name="club-selection" value="club-selection">
<span class="label-text">The Club Selection</span>
</label>
<label for="r2" class="label-filter">
<input type="checkbox" id="r2" name="upholstery" value="upholstery">
<span class="label-text">All Upholstery</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="casegoods" value="casegoods">
<span class="label-text">All Casegoods</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="tables" value="tables">
<span class="label-text">All Tables</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="lighting" value="lighting">
<span class="label-text">All Lighting</span>
</label>
</div>
<div class="product" data-category="club-selection">
<h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
<h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
<h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
<h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
<h4>Lighting</h4>
</div>
Im trying to unhide div id=Q3 with my first 2 radio inputs (id= Q1 & id = Q2)
if (Q1 = Ja and Q2 = Ja) show Q3.
Can somebody please help me!
See my html code below (sorry for the bad coding im a totally noob!).
HTML
<body>
<header>
<h2>Helpdesk</h2>
<div>Wat is u probleem?</div>
</header>
<form>
<h4>Kunt computer normaal aanzetten?<span class = "req" id= "req_Q1">*</span></h4>
<input type="radio" name="A1" id="A1" value ="Ja" /> : Ja<br />
<input type="radio" name="A1" id="A2" value ="Nee" /> : Nee<br />
<p class= "instruct" id="instruct_Q1">
<small>Controleer eerst de kabels!</small>
</p>
<h4 id= "Q2">Geeft de monitor normaal beeld?<span class = "req" id= "req_Q2">*</span> </h4>
<input type="radio" name="A2" id="A3" /> : Ja<br />
<input type="radio" name="A2" id="A4"/> : Nee<br />
<p class= "instruct" id="instruct_Q2">
<small>Controleer eerst de kabels!</small>
</p>
</div>
<div id= "Q3" style="display: none;">
<label for ="Q3.1" ><h4>Start windows normaal op?</h4></label>
<select name="Q3.1">
<option value="A3.1" >Ja, geen probleem</option>
<option value="A3.2" >Ja, maar met foutmelding</option>
<option value="A3.3" >Nee, zwart scherm</option>
<option value="A3.4" >Nee, blauw scherm</option>
</select>
</div>
<div style="display: none;">
<h4>Kunt u inloggen?</h4>
<input type="radio" name="Q4" />Ja, geen probleem<br />
<input type="radio" name="Q4" /> Nee, ik krijg een foutmelding<br />
</div>
<div style="display: none;">
<h4>Ik krijg de volgende foutmelding <span class = "req" id= "req_Q5">*</span></h4>
<input type="radio" name="Q5" />Kan u niet aanmelden bij het domein. Controleer of uw gebruikersnaam en/of toegangscode correct zijn.<br />
<input type="radio" name="Q5" />Kan u niet aanmelden omdat het domein niet beschikbaar is. <br />
<input type="radio" name="Q5" />Uw account is geblokkeerd. Neem contact op met de beheerder. <br />
</div>
Javascript
$("input[name=A1]").click(function()
{
if(this.id =="A1"){
$("#Q3").show('slow');
}
else {
$("#Q3").hide('slow');
}
});
You can use a ternary instead of an if statement to make a little more elegant
/* get the status of the answers */
var status = $("#A1").is(':checked') && $("#A3").is(':checked');
/* let the status decide which $ method to use */
$("#Q3")[status ? 'fadeIn' : 'fadeOut'](500);
$("#helpdesk :input").change(function() {
var status = $("#A1").is(':checked') && $("#A3").is(':checked');
$("#Q3")[status ? 'fadeIn' : 'fadeOut'](500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2>Helpdesk</h2>
<div>Wat is u probleem?</div>
</header>
<form id="helpdesk">
<h4>Kunt computer normaal aanzetten?<span class="req" id="req_Q1">*</span></h4>
<input type="radio" name="A1" id="A1" value="Ja" /> : Ja<br />
<input type="radio" name="A1" id="A2" value="Nee" /> : Nee<br />
<p class="instruct" id="instruct_Q1">
<small>Controleer eerst de kabels!</small>
</p>
<h4 id="Q2">Geeft de monitor normaal beeld?<span class="req" id="req_Q2">*</span> </h4>
<input type="radio" name="A2" id="A3" /> : Ja<br />
<input type="radio" name="A2" id="A4" /> : Nee<br />
<p class="instruct" id="instruct_Q2">
<small>Controleer eerst de kabels!</small>
</p>
<div id="Q3" style="display: none;">
<label for="Q3.1"><h4>Start windows normaal op?</h4></label>
<select name="Q3.1">
<option value="A3.1" >Ja, geen probleem</option>
<option value="A3.2" >Ja, maar met foutmelding</option>
<option value="A3.3" >Nee, zwart scherm</option>
<option value="A3.4" >Nee, blauw scherm</option>
</select>
</div>
<div style="display: none;">
<h4>Kunt u inloggen?</h4>
<input type="radio" name="Q4" />Ja, geen probleem<br />
<input type="radio" name="Q4" /> Nee, ik krijg een foutmelding<br />
</div>
<div style="display: none;">
<h4>Ik krijg de volgende foutmelding <span class="req" id="req_Q5">*</span></h4>
<input type="radio" name="Q5" />Kan u niet aanmelden bij het domein. Controleer of uw gebruikersnaam en/of toegangscode correct zijn.<br />
<input type="radio" name="Q5" />Kan u niet aanmelden omdat het domein niet beschikbaar is. <br />
<input type="radio" name="Q5" />Uw account is geblokkeerd. Neem contact op met de beheerder. <br />
</div>
Look at this fiddle, and let me know, if it is the desired result :-) https://jsfiddle.net/7LL98L24/
$("#helpdesk :input").change(function() {
if($("#A1").is(':checked') && $("#A3").is(':checked')) {
$("#Q3").fadeIn(500);
} else {
$("#Q3").fadeOut(500);
}
});
Please notice, that I added an ID to your form Element to use the .change Method of jQuery
First of all to hide / unhide elements you should use the CSS.
There was question about it on StackOverflow: JavaScript: How to Hide / Unhide <div>
However to my current knowledge to make IF statment - like you mentioned:
if(Q1 == Ja && Q2 == Ja){ show Q3 }
You need to use JavaScript.
EDIT: Hide/unhide div with button?
I think there can be answer for your question: hide / unhide using JQuery - I found it preety quickly when asked google.
I have two radio buttons. If the user chose one of them i would like my code to execute one particular function. I need to get the value from the radio button selection and push it to my function on the server-side as "valueButton". Guess i need a function on the client-side, but how should that look?
The buttons (client-side):
<div>
<input type="radio" name="origin" id="radio-origin-1" value="ID1">
<label for="radio-origin-auto">Grupp 1</label>
</div>
<div>
<input type="radio" name="origin" id="radio-origin-2" value="ID2">
<label for="radio-origin-en">Grupp 2</label>
</div>
The functions (server-side):
function dataSelect(valueButton){
if (valueButton == "ID1") {
ID1(); }
else if (valueButton == "ID2") {
ID2(); }
}
function ID1(){
MailApp.sendEmail("test.acc#outlook.com", "subjects", GetDataFromSpreadsheet());}
function ID2(){
MailApp.sendEmail("test.acc2#outlook.com", "subjects", GetDataFromSpreadsheet());}
HTML Code
<div>
<input type="radio" name="origin" id="radio-origin-1" value="ID1" onChange="dataSelect(this.value);">
<label for="radio-origin-auto">Grupp 1</label>
</div>
<div>
<input type="radio" name="origin" id="radio-origin-2" value="ID2" onChange="dataSelect(this.value);">
<label for="radio-origin-en">Grupp 2</label>
</div>
I have a huge, involved form with hundreds of fields built in Business Catalyst that uses the following jquery to show and hide several divs:
$(document).ready(function() {
$( '#CAT_Custom_128' ).click(function() {
$( '#19th_form' ).fadeToggle( "fast" );
});
});
Long story short this script works beautifully for me to show and hide divs based on if a check box is toggled. However I am generating the results of this form on another page that allows a user to edit the form entries. When the form results are generated the check boxes selected in the initial submission are default not shown. It is only when the checkboxes are unchecked (or toggled) that the hidden divs are shown.
Basically I need a script that says if a checkbox is generated as checked a correlating div is displayed. Note that the way this is set up a loop will most likely not work.
Any ideas or help are greatly appreciated. Thank you! :)
EDIT: Here is a sample of the html within the form:
<div class="twelve columns">
<label>Select the dates for your service site.</label>
</div>
<div class="row">
<div class="six columns label_text">
<input type="checkbox" name="CAT_Custom_128" id="CAT_Custom_128" value="1" /><span> Saturday, April 19th</span>
<br />
<input type="checkbox" name="CAT_Custom_129" id="CAT_Custom_129" value="1" /><span> Sunday, April 20th</span>
<br />
<input type="checkbox" name="CAT_Custom_130" id="CAT_Custom_130" value="1" /><span> Monday, April 21st</span>
<br />
<input type="checkbox" name="CAT_Custom_131" id="CAT_Custom_131" value="1" /><span> Tuesday, April 22nd</span>
</div>
<div class="six columns label_text">
<input type="checkbox" name="CAT_Custom_132" id="CAT_Custom_132" value="1" /><span> Wednesday, April 23rd</span><span> </span>
<br />
<input type="checkbox" name="CAT_Custom_133" id="CAT_Custom_133" value="1" /><span> Thursday, April 24th</span>
<br />
<input type="checkbox" name="CAT_Custom_134" id="CAT_Custom_134" value="1" /><span> Friday, April 25th</span>
<br />
<input type="checkbox" name="CAT_Custom_135" id="CAT_Custom_135" value="1" /><span> Saturday, April 26th</span>
</div>
</div>
</div>
<div id="19th_form" class="servicesite_form_date" style="display: none;">
<div class="h2_date"><span>Saturday, April 19th</span>
</div>
<div class="row shift_selection">
<div class="twelve columns">
<p><span>Select each box to customize up to six shifts.</span>
</p>
<input type="checkbox" name="19_s1_box" id="19_s1_box" value="1" /><span> Shift 1 </span>
<input type="checkbox" name="19_s2_box" id="19_s2_box" value="1" /><span> Shift 2 </span>
<input type="checkbox" name="19_s3_box" id="19_s3_box" value="1" /><span> Shift 3 </span>
<input type="checkbox" name="19_s4_box" id="19_s4_box" value="1" /><span> Shift 4 </span>
<input type="checkbox" name="19_s5_box" id="19_s5_box" value="1" /><span> Shift 5 </span>
<input type="checkbox" name="19_s6_box" id="19_s6_box" value="1" /><span> Shift 6
</span>
</div>
</div>
The script only works on click of the checkbox. You gotta do the same for it on document ready.
$(document).ready(function() {
if ($( '#CAT_Custom_128' ).is(':checked')) {
$( '#19th_form' ).fadeToggle( "fast" );
}
});