I am using the jQuery .after method to add a radio button and label to a fieldset after the radio button that is clicked.
I am altering this fieldset:
<fieldset>
<legend>Choose a color:</legend>
<input type="radio" value="firstChoice" name="colorChoice">
<label for="firstChoice">red<br></label>
<input type="radio" value="secondChoice" name="colorChoice">
<label for="secondChoice">yellow<br></label>
<input type="radio" value="thirdChoice" name="colorChoice">
<label for="thirdChoice">orange<br></label>
<input type="radio" value="fourthChoice" name="colorChoice">
<label for="fourthChoice">green<br></label>
<input type="radio" value="fifthChoice" name="colorChoice">
<label for="fifthChoice">blue<br></label>
<input type="radio" value="sixthChoice" name="colorChoice">
<label for="sixthChoice">rebeccapurple<br></label>
</fieldset>
Using this JS script:
const radios = querySelectorAll("input");
const lineBreak = document.createElement("br");
const newRadio = document.createElement("input");
newRadio.type = "radio";
newRadio.value = "blackAddition";
newRadio.name = "colorChoice";
const newLabel = document.createElement("label");
newLabel.htmlFor = "blackAddition";
const newColour = document.createTextNode("black");
newLabel.appendChild(newColour);
newLabel.appendChild(lineBreak);
radios.forEach(radio => {
radio.addEventListener("click", function addRadio() {
radio.nextElementSibling.after(newLabel);
radio.nextElementSibling.after(newRadio);
});
});
It adds the new label and input perfectly fine but without the new lines in the HTML as seen here (adding it after the first radio button):
<fieldset>
<legend>Choose a color:</legend>
<input type="radio" value="firstChoice" name="colorChoice">
<label for="firstChoice">red<br></label><input type="radio" value="blackAddition" name="colorChoice"><label for="blackAddition">black<br></label>
<input type="radio" value="secondChoice" name="colorChoice">
<label for="secondChoice">yellow<br></label>
<input type="radio" value="thirdChoice" name="colorChoice">
<label for="thirdChoice">orange<br></label>
<input type="radio" value="fourthChoice" name="colorChoice">
<label for="fourthChoice">green<br></label>
<input type="radio" value="fifthChoice" name="colorChoice">
<label for="fifthChoice">blue<br></label>
<input type="radio" value="sixthChoice" name="colorChoice">
<label for="sixthChoice">rebeccapurple<br></label>
</fieldset>
How do I use the .after() method so that it will make a new line for every addition? The reason I need to solve this is because adding to the same line causes the new text to not be indented like the others as it should be:
It's not just that it's a "newline" that's causing the layout different, it's that the browser renders all contiguous whitespace - so you need to either (correctly) style your elements with css or you can add a space before your label.
In your code this would be:
radio.nextElementSibling.after(document.createTextNode(" "));
Note: if you're using a <label for (which you are) then the for= needs to match with an id= so you can click on the label. The alternative is to nest the radio in the label.
Updated snippet:
const radios = document.querySelectorAll("input");
const lineBreak = document.createElement("br");
const newRadio = document.createElement("input");
newRadio.type = "radio";
newRadio.value = "blackAddition";
newRadio.id = "blackAddition";
newRadio.name = "colorChoice";
const newLabel = document.createElement("label");
newLabel.htmlFor = "blackAddition";
const newColour = document.createTextNode("black");
newLabel.appendChild(newColour);
newLabel.appendChild(lineBreak);
radios.forEach(radio => {
radio.addEventListener("click", function addRadio() {
radio.nextElementSibling.after(newLabel);
radio.nextElementSibling.after(document.createTextNode(" "));
radio.nextElementSibling.after(newRadio);
});
});
<fieldset>
<legend>Choose a color:</legend>
<input type="radio" value="firstChoice" id="firstChoice" name="colorChoice">
<label for="firstChoice">red<br></label>
<input type="radio" value="secondChoice" id="secondChoice" name="colorChoice">
<label for="secondChoice">yellow<br></label>
<input type="radio" value="thirdChoice" id="thirdChoice" name="colorChoice">
<label for="thirdChoice">orange<br></label>
</fieldset>
Related
I have seen that this works for most of users, but for some reason it doesn't for me. I use Google Chrome.
radioBut = document.querySelector(".rad-design")
getColor = function(){
for (i=0; i<radioBut.length; i++){
if (radioBut[i].checked){
console.log(radioBut[i)
}
}
Html
<form id = "rad">
<div class = "radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" name="colList">
<div class="rad-design"></div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="colList">
<div class="rad-design"></div>
</label>
</div>
</form>
The selector should be document.querySelectorAll to get inputs as array and you should target to .rad-input class which is the input and not .rad-design which is the label. Also you should use checked for the inputs to make the input checked, its not check. Also you cannot set checked to two inputs with same name. If thats done only the last input with that name will be checked.
Working Fiddle
const radioBut = document.querySelectorAll(".rad-input")
getColor = function () {
for (i = 0; i < radioBut.length; i++) {
if (radioBut[i].checked) {
console.log(radioBut[i])
}
}
}
<form id="rad">
<div class="radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" checked name="colList">
<div class="rad-design">One</div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="colList">
<div class="rad-design">Two</div>
</label>
</div>
<button type="button" onclick="getColor()">getColor</button>
</form>
document.querySelector returns just one element not an array/list, so in the for loop at i<radioBut.length radioBut.length is undefined, you need to use document.querySelectorAll() instead.
Also I noticed you have selected the div and not the input and you have a couple of syntax errors.
Maybe this can help you:
const radioBut = document.querySelectorAll(".rad-input")
const getColor = function(){
for (let i=0; i<radioBut.length; i++){
if (radioBut[i].checked){
console.log(radioBut[i].value)
}
}
}
console.log(getColor())
<form id = "rad">
<div class = "radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" value='A' name="colList">
<div class="rad-design"></div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" value='B' name="colList" checked>
<div class="rad-design"></div>
</label>
</div>
</form>
Another options is to use the form element functionality
const form = document.getElementById('rad');
const getColor = function(){
return form.colList.value;
}
console.log(getColor())
<form id = "rad">
<div class = "radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" value='A' name="colList">
<div class="rad-design"></div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" value='B' name="colList" checked>
<div class="rad-design"></div>
</label>
</div>
</form>
let opinions = [];
if (localStorage.myTreesComments) {
opinions = JSON.parse(localStorage.myTreesComments);
}
console.log(opinions);
const myFrmElm = document.getElementById("opnFrm");
myFrmElm.addEventListener("submit", processOpnFrmData);
function processOpnFrmData(event) {
const nopName = document.getElementById("menoapriezvisko").value.trim();
const nopEmail = document.getElementById("email").value.trim();
const nopUrl = document.getElementById("url").value.trim();
const nopComm = document.getElementById("komentar").value.trim();
const nopStar1 = document.getElementById("star-rating").value.trim();
const nopStar2 = document.getElementById("star-rating2").value.trim();
const nopScale = document.getElementById("scale-rating").value.trim();
const nopWillReturn = document.getElementById("willReturnElm").checked;
if (nopName == "" || nopEmail == "" || nopUrl == "" || nopComm == "") {
window.alert("Prosím, zadajte všetky údaje.");
return;
}
const newOpinion = {
name: nopName,
email: nopEmail,
url: nopUrl,
comment: nopComm,
gdpr: nopWillReturn,
created: new Date()
};
console.log("Nový názor návštevníka:\n " + JSON.stringify(newOpinion));
opinions.push(newOpinion);
localStorage.myTreesComments = JSON.stringify(opinions);
//4. Notify the user
window.alert("Tvoj názor bol uložený! Pre viac info nahliadni do konzole.");
console.log("Nový názor bol pridaný!");
console.log(opinions);
//5. Reset the form
myFrmElm.reset();
}
<form id="opnFrm">
<label for="menoapriezvisko">Meno a priezvisko</label>
<input type="text" id="menoapriezvisko" name="menoapriezvisko">
<label for="email">Kontaktný email</label> <input type="email" id="email">
<label>1. Celková spokojnosť s dizajnom a funkcionalitou stránky ?</label><br>
<span class="star-rating">
<input type="radio" name="rating1" value="1"><i></i>
........................
<input type="radio" name="rating1" value="5"><i></i>
</span>
<div class="clear"></div>
<hr class="survey-hr">
<label>2. Celková spokojnosť s obsahom.</label><br>
<span class="star-rating2">
<input type="radio" name="rating2" value="1"><i></i>
..........................
<input type="radio" name="rating2" value="5"><i></i>
</span>
<div class="clear"></div>
<hr class="survey-hr">
<label style="color: red;"><b>3. Celkové hodnotenie stránky (1-10)</b></label>
<span class="scale-rating">
<label value="1">
<input type="radio" name="rating" >
<label style="width:100%;"></label>
</label>
<label value="2">
<input type="radio" name="rating" >
<label style="width:100%;"></label>
</label>
..................
<label value="10">
<input type="radio" name="rating" value="10">
<label style="width:100%;"></label>
</label>
</span>
<div class="clear"></div>
<input style="background:#43a7d5;color:#fff;padding:12px;border:0" type="submit" value="Odoslať">
<button type="submit">Odošli</button>
<input style="background:#43a2d1;color:#fff;padding:12px;border:0" type="reset" value="Resetuj">
</form>
</div>
</article>
I need to write values from 3 spans of radio buttons to my JS script into const Opinions.
In first 2 spans I have star rating from 1-5 and in the third span I have points (1-10).. I need to read these values and write them into my script. Please if u can help me i would be really pleased. It is hard for me.
I am using jQuery and Javascript.
Thanks for any help.
In my project I want change src part (ar-button's src) related to my radio buttons check.
For ex: When you check "Option 1" I want to change src part on ar-button. Than when you check Option3x(with checked option1 and option1x) I want to change src again.
I mean for all 64 combination of checks I want to change src.
Any help or suggestion would be great!
Thanks..
<label>
<input type="radio" id="diffuse" name="kumas" value="textues/kumas/2/pgwfpjp_2K_Albedo.jpg"checked>
Option1
</label>
<label>
<input type="radio"id="adiffuse" name="kumas" value="textues/kumas/1/oi2veqp_2K_Albedo.jpg">
Option 2
</label>
<label>
<input type="radio" id="bdiffuse"name="kumas" value="textues/kumas/3/sjfvce3c_2K_Albedo.jpg">
Option 3
</label>
<label>
<input type="radio" id="cdiffuse"name="kumas" value="textues/kumas/4/sjfvcjzc_2K_Albedo.jpg">
Option 4
</label>
<br><br>
<label>
<input type="radio" id="diffuse1" name="kol" value="textues\kol\1\teqbcizc_2K_Albedo.jpg" checked>
Option 1x
</label>
<label>
<input type="radio" id="adiffuse1" name="kol" value="textues\kol\2\tfjbderc_2K_Albedo.jpg">
Option 2x
</label>
<label>
<input type="radio" id="bdiffuse1"name="kol" value="textues\kol\3\tcnodi3c_2K_Albedo.jpg">
Option 3x
</label>
<label>
<input type="radio" id="cdiffuse1"name="kol" value="textues\kol\4\tcicdebc_2K_Albedo.jpg">
Option 4x
</label>
</div>
</div>
</div>
<br><br>
<label>
<input type="radio" id="diffuse2" name="dugme" value="textues\metal\1\scksebop_2K_Albedo.jpg" checked>
Option 1z
</label>
<label>
<input type="radio" id="adiffuse2" name="dugme" value="textues\metal\2\se4objgc_2K_Albedo.jpg">
Option 2z
</label>
<label>
<input type="radio" id="bdiffuse2"name="dugme" value="textues\metal\3\se4pcbbc_2K_Albedo.jpg">
Option 3z
</label>
<label>
<input type="radio" id="cdiffuse2"name="dugme" value="textues\metal\4\shkxcgfc_2K_Albedo.jpg">
Option 4z
</label>
<br><br>
<ar-button
id="change" src="https://basebros.com/models/ar_base_tekli_koltuk_3d.glb"
id="change2 ios-src="https://basebros.com/models/ar_base_tekli_koltuk_3d.usdz"
title="3D-AR by BASE">
<img class="arbuttonicon" src="Assets/evindebutton.png" width="170px" alt="AR-icon">
</ar-button>
Try using this code:
const kumas = document.getElementsByName("kumas");
const kol = document.getElementsByName("kol");
const dugme = document.getElementsByName("dugme");
const arButton = document.querySelector("ar-button");
let sources = [[[],[],[],[]],[[],[],[],[]],[[],[],[],[]],[[],[],[],[]]]; /* Fill this with the sources. The first element is if the first option for kumas is selected, the second is for if the second option is selected, etc. The elements inside those elements are for each of the different options for kol, and the elements inside those elements are for each of the different options for dugme. */
function foo() {
let kumasSelected;
let kolSelected;
let dugmeSelected;
for(let i of kumas) {
if(i.checked) {
kumasSelected = kumas.indexOf(i);
}
}
for(let i of kol) {
if(i.checked) {
kolSelected = kol.indexOf(i);
}
}
for(let i of dugme) {
if(i.checked) {
dugmeSelected = dugme.indexOf(i);
}
}
arButton.src = sources[kumasSelected][kolSelected][dugmeSelected];
}
Run the function each time you want to update the source.
<label>
<input type="radio" id="diffuse" name="kumas" value="textues/kumas/2/pgwfpjp_2K_Albedo.jpg"checked>
Option1
</label>
<label>
<input type="radio"id="adiffuse" name="kumas" value="textues/kumas/1/oi2veqp_2K_Albedo.jpg">
Option 2
</label>
<label>
<input type="radio" id="bdiffuse"name="kumas" value="textues/kumas/3/sjfvce3c_2K_Albedo.jpg">
Option 3
</label>
<label>
<input type="radio" id="cdiffuse"name="kumas" value="textues/kumas/4/sjfvcjzc_2K_Albedo.jpg">
Option 4
</label>
<br><br>
<label>
<input type="radio" id="diffuse1" name="kol" value="textues\kol\1\teqbcizc_2K_Albedo.jpg" checked>
Option 1x
</label>
<label>
<input type="radio" id="adiffuse1" name="kol" value="textues\kol\2\tfjbderc_2K_Albedo.jpg">
Option 2x
</label>
<label>
<input type="radio" id="bdiffuse1"name="kol" value="textues\kol\3\tcnodi3c_2K_Albedo.jpg">
Option 3x
</label>
<label>
<input type="radio" id="cdiffuse1"name="kol" value="textues\kol\4\tcicdebc_2K_Albedo.jpg">
Option 4x
</label>
</div>
</div>
</div>
<br><br>
<label>
<input type="radio" id="diffuse2" name="dugme" value="textues\metal\1\scksebop_2K_Albedo.jpg" checked>
Option 1z
</label>
<label>
<input type="radio" id="adiffuse2" name="dugme" value="textues\metal\2\se4objgc_2K_Albedo.jpg">
Option 2z
</label>
<label>
<input type="radio" id="bdiffuse2"name="dugme" value="textues\metal\3\se4pcbbc_2K_Albedo.jpg">
Option 3z
</label>
<label>
<input type="radio" id="cdiffuse2"name="dugme" value="textues\metal\4\shkxcgfc_2K_Albedo.jpg">
Option 4z
</label>
<br><br>
<ar-button
src="https://basebros.com/models/ar_base_tekli_koltuk_3d.glb"
title="3D-AR by BASE">
<img class="arbuttonicon" src="Assets/evindebutton.png" width="170px" alt="AR-icon">
</ar-button>
<script>
const kumas = document.getElementsByName("kumas");
const kol = document.getElementsByName("kol");
const dugme = document.getElementsByName("dugme");
const arButton = document.querySelector("ar-button");
let sources = [[["https://basebros.com/models/ar_base_ayakkabi.glb"],["https://basebros.com/models/ar_base_camasir_makinesi_3d.glb"],["https://basebros.com/models/ar_base_kahve_makinesi_3d.glb"],["https://basebros.com/models/ar_base_nintendo.glb"]],[[],[],[],[]],[[],[],[],[]],[[],[],[],[]]]; /* Fill this with the sources. The first element is if the first option for kumas is selected, the second is for if the second option is selected, etc. The elements inside those elements are for each of the different options for kol, and the elements inside those elements are for each of the different options for dugme. */
function foo() {
let kumasSelected;
let kolSelected;
let dugmeSelected;
for(let i of kumas) {
if(i.checked) {
kumasSelected = kumas.indexOf(i);
}
}
for(let i of kol) {
if(i.checked) {
kolSelected = kol.indexOf(i);
}
}
for(let i of dugme) {
if(i.checked) {
dugmeSelected = dugme.indexOf(i);
}
}
arButton.src = sources[kumasSelected][kolSelected][dugmeSelected];
}
</script>
I have a variable called genderMultiplier which is used in this calculation
const bloodAlcoholContent = (gramsOfAlcohol / ((weight * 1000) * genderMultiplyer))*100;
My genderMultiplier can have 2 values and I have made a radio input for that in HTML
<div class="gender-buttons" id="gender-buttons">
<input class="gender-button" type="radio" name="tools" id="tool-1" value="0.55" checked>
<label class="for-gender-button" for="tool-1">Male</label>
<input class="gender-button" type="radio" name="tools" id="tool-2" value="0.68">
<label class="for-gender-button" for="tool-2">Female</label>
</div>
const genderButtonElement = document.getElementById("gender-buttons")
const genderMultiplyer = parseFloat(genderButtonElement.input);
One radio button is [MALE] and [FEMALE]. So if the user clicks Male then I want the genderMultiplier to be 0.55 and if the user clicks Female then I want the genderMultiplier to be 0.68
Any advice on this?
Change your last line to
const genderMultiplier = parseFloat([...genderButtonElement.children].find(c=>c.checked).value)
To calculate bloodAlcoholContent, you need to know the values gramsOfAlcohol and weight. But you did not show the method for calculating these variables.
const genderButtonElement = document.querySelectorAll('.gender-buttons .gender-button');
genderButtonElement.forEach(function(current, index) {
current.addEventListener('click', function() {
const genderMultiplyer = parseFloat(current.value);
console.log(genderMultiplyer);
});
});
<div class="gender-buttons" id="gender-buttons">
<input class="gender-button" type="radio" name="tools" id="tool-1" value="0.55" checked>
<label class="for-gender-button" for="tool-1">Male</label>
<input class="gender-button" type="radio" name="tools" id="tool-2" value="0.68">
<label class="for-gender-button" for="tool-2">Female</label>
</div>
function getMultiplier()
{
const genderMultiplyer = parseFloat(document.querySelector('input[name="tools"]:checked').value);
alert("The multiplier is: " + genderMultiplyer);
}
<div class="gender-buttons" id="gender-buttons">
<input class="gender-button" type="radio" name="tools" id="tool-1" value="0.55" checked>
<label class="for-gender-button" for="tool-1">Male</label>
<input class="gender-button" type="radio" name="tools" id="tool-2" value="0.68">
<label class="for-gender-button" for="tool-2">Female</label>
</div>
<button onclick="getMultiplier()">Get Multiplier</button>
The pure Javascript way of doing this in your example is as follows:
const genderMultiplyer = parseFloat(document.querySelector('input[name="tools"]:checked').value);
If your are using JQuery you can get it this way:
const genderMultiplyer = parseFloat($('input[name="tools"]:checked').val());
I have been trying to get some divs to hover below my headers that have checkboxes in. I had this working:
Jsfiddle
initComplete: function(settings, json) {
let api = new $.fn.dataTable.Api(settings);
let header = api.column(0).header();
let originalText = $(header).text();
let newText = originalText + `<div class="filterOptions" id="FilterStatus">
<input type="checkbox" id="Status1" data-status="1">
<label for="Status1">1</label>
<input type="checkbox" id="Status2" data-status="2">
<label for="Status2">2</label>
<input type="checkbox" id="Status3" data-status="3">
<label for="Status3">3</label>
<input type="checkbox" id="Status4" data-status="4">
<label for="Status4">4</label>
</div>`;
$(header).html(newText).attr("id", "hover")
}
However when I try to apply the same to a second header, only the last header seems to have the dropdown applied:
Jsfiddle
That's because you are trying to add multiple properties with the same name initComplete. In the result, you overwrite it and only the last is processed. You should put all your logic into one initComplete property:
initComplete: function(settings, json) {
let api = new $.fn.dataTable.Api(settings);
let header = api.column(0).header();
let originalText = $(header).text();
let newText = originalText + `<div class="filterOptions" id="FilterStatus1">
<input type="checkbox" id="Status1" data-status="1">
<label for="Status1">1</label>
<input type="checkbox" id="Status2" data-status="2">
<label for="Status2">2</label>
<input type="checkbox" id="Status3" data-status="3">
<label for="Status3">3</label>
<input type="checkbox" id="Status4" data-status="4">
<label for="Status4">4</label>
</div>`;
$(header).html(newText).attr("id", "hover1");
let header2 = api.column(2).header();
let originalText2 = $(header2).text();
let newText2 = originalText2 + `<div class="filterOptions" id="FilterStatus2">
<input type="checkbox" id="Status1" data-status="1">
<label for="Status1">1</label>
<input type="checkbox" id="Status2" data-status="2">
<label for="Status2">2</label>
<input type="checkbox" id="Status3" data-status="3">
<label for="Status3">3</label>
<input type="checkbox" id="Status4" data-status="4">
<label for="Status4">4</label>
</div>`;
$(header2).html(newText2).attr("id", "hover2")
}
Working example in jsFiddle.