I've created the following code to create a form of 11 questions where each question worths one point. In the end, the page calculates your score and displays it into an alert message.
The code I wrote works in local but it doesn't work when I put it into the wordpress element html, used for the scope of embed external code. When I'm on elementor, it works also. The problem is when I save the progress and try the page. The alert doesn't appear, cant understand why.
Can you help me? (New at coding)
Thanks in advance
This is the page: https://gcodetraining.it/test-score-form/
This is the form:
<html>
<head>
<style>
fieldset {
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
label {
margin-left: 10px;
}
input[type="submit"] {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
form div{
display:block; /*Utile per disporre in modo verticale le risposte*/
}
</style>
<script>
const correctAnswers = {
question1:"option4",
question2:"option4",
question3:"option1",
question4:"option2",
question5:"option3",
question6:"option2",
question7:"option1",
question8:"option2",
question9:"option2",
question10:"option1",
question11:"option1"
};
let score = 0;
function checkScore() {
let inputs = document.querySelectorAll('input[type="radio"]:checked');
for(let input of inputs) {
if(input.value === correctAnswers[input.name]) {
score++;
}
}
score_perc=score/11;
score_perc=score_perc*100;
let final_score= Math.round(score_perc);
if(score_perc>= 80) {
alert("Il tuo punteggio è: " + final_score + "%. Molto Bene, Complimenti!");
} else {
alert("Il tuo punteggio è: " + final_score +"%");
}
}
</script>
</head>
<body>
<h2>QUIZ DISEGNO TECNICO E TORNITURA</h2>
<form onsubmit=" checkScore();">
<!--in wp ho messo senza event.preventDefault(); poichè dopo l'alert deve ricaricare la pagina se lo lasci si nota il bug di questo codice ovvero il fatto che se clicchi sul submit più volte il punteggio si cumula!-->
<fieldset>
<legend>In un disegno meccanico si definiscono quote:</legend>
<div><input type="radio" id="q1a1" name="question1" value="option1">
<label for="q1a1">le sole misure date in gradi</label>
</div>
<div><input type="radio" id="q1a2" name="question1" value="option2">
<label for="q1a2">le sole misure date in mm dei diametri</label>
</div>
<div><input type="radio" id="q1a3" name="question1" value="option3">
<label for="q1a3">le sole misure date in mm delle lunghezze</label>
</div>
<div><input type="radio" id="q1a4" name="question1" value="option4">
<label for="q1a4">le misure espresse in mm e decimali di mm, di tutte le dimensioni del pezzo</label>
</div>
</fieldset>
<fieldset>
<legend>Nella filettatura metrica l'angolo al vertice del triangolo che la forma è pari a:</legend>
<div><input type="radio" id="q2a1" name="question2" value="option1" >
<label for="q2a1">30°</label>
</div>
<div><input type="radio" id="q2a2" name="question2" value="option2" >
<label for="q2a2">55°</label>
</div>
<div><input type="radio" id="q2a3" name="question2" value="option3" >
<label for="q2a3">15°</label>
</div>
<div><input type="radio" id="q2a4" name="question2" value="option4" >
<label for="q2a4">60°</label>
</div>
</fieldset>
<fieldset>
<legend>In un disegno, la quotatura di un filetto metrico di una vite il cui diametro esterno è 10 mm con passo standard o grosso, si indica:</legend>
<div><input type="radio" id="q3a1" name="question3" value="option1" >
<label for="q3a1">M10</label>
</div>
<div><input type="radio" id="q3a2" name="question3" value="option2" >
<label for="q3a2">10</label>
</div>
<div><input type="radio" id="q3a3" name="question3" value="option3" >
<label for="q3a2">Ø10</label>
</div>
<div><input type="radio" id="q3a4" name="question3" value="option4" >
<label for="q3a2">Ø10 x 1</label>
</div>
</fieldset>
<fieldset>
<legend>In un disegno il simbolo usato per la quotatura dei diametri è:</legend>
<div><input type="radio" id="q4a1" name="question4" value="option1" >
<label for="q4a1"></label>
</div>
<div><input type="radio" id="q4a2" name="question4" value="option2" >
<label for="q4a2">Ø</label>
</div>
<div><input type="radio" id="q4a3" name="question4" value="option3" >
<label for="q4a3">ç</label>
</div>
<div><input type="radio" id="q4a4" name="question4" value="option4" >
<label for="q4a4">O</label>
</div>
</fieldset>
<fieldset>
<legend>
Il simbolo
<svg id="global-element" version="1.0" xmlns="http://www.w3.org/2000/svg"
width="68.000000pt" height="60.000000pt" viewBox="0 0 68.000000 60.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,60.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M524 451 l-68 -121 -137 0 c-76 0 -140 -4 -143 -8 -3 -4 24 -57 59
-118 36 -60 65 -112 65 -116 0 -4 -57 -9 -127 -11 -71 -1 16 -3 192 -3 176 0
240 2 143 3 -98 2 -178 6 -178 9 0 6 118 214 217 382 30 51 53 96 50 98 -3 3
-36 -49 -73 -115z m-87 -148 c-45 -83 -120 -213 -122 -213 -2 0 -77 130 -122
213 -2 4 53 7 122 7 69 0 124 -3 122 -7z"/>
<path d="M222 428 c-17 -17 -15 -63 4 -79 34 -28 68 26 44 70 -12 24 -30 27
-48 9z m38 -13 c16 -19 5 -65 -16 -65 -19 0 -28 24 -20 55 7 29 18 32 36 10z"/>
<path d="M381 426 c-9 -10 -9 -16 -1 -21 8 -5 8 -11 -1 -21 -18 -22 -3 -46 28
-42 26 3 28 6 28 48 0 38 -3 45 -21 48 -11 2 -26 -4 -33 -12z m40 -11 c-1 -15
-24 -12 -29 3 -3 9 2 13 12 10 10 -1 17 -7 17 -13z m7 -48 c2 -11 -3 -17 -17
-17 -23 0 -35 15 -26 31 10 15 39 6 43 -14z"/>
<path d="M335 350 c-3 -5 1 -10 10 -10 9 0 13 5 10 10 -3 6 -8 10 -10 10 -2 0
-7 -4 -10 -10z"/>
</g>
</svg>
posto sul disegno di un particolare significa:
</legend>
<div><input type="radio" id="q5a1" name="question5" value="option1" >
<label for="q5a1">rugosità pari all' 8%</label>
</div>
<div><input type="radio" id="q5a2" name="question5" value="option2" >
<label for="q5a2">superficie la cui rugosità è pari a 0,8 μm</label>
</div>
<div><input type="radio" id="q5a3" name="question5" value="option3" >
<label for="q5a3">superficie ottenuta con asportazione di truciolo, rugosità pari a 0,8 μm</label>
</div>
<div><input type="radio" id="q5a4" name="question5" value="option4" >
<label for="q5a4">superficie ottenuta senza asportazione di truciolo, rugosità pari a 0,8 μm</label>
</div>
</fieldset>
<fieldset>
<legend>In un disegno una quota è espressa nel seguente modo Ø 50 ± 0,1. Il valore massimo e minimo del diametro sarà:</legend>
<div><input type="radio" id="q6a1" name="question6" value="option1" >
<label for="q6a1">Dmax = 51,00 ; Dmin = 49,00</label>
</div>
<div><input type="radio" id="q6a2" name="question6" value="option2" >
<label for="q6a2">Dmax = 50,10 ; Dmin = 49,90</label>
</div>
<div><input type="radio" id="q6a3" name="question6" value="option3" >
<label for="q6a3">Dmax = 50,01 ; Dmin = 49,99</label>
</div>
<div><input type="radio" id="q6a6" name="question6" value="option6" >
<label for="q6a6">Dmax = 50,00 ; Dmin = 50,00</label>
</div>
</fieldset>
<fieldset>
<legend>Cosa si intende per velocità di taglio:</legend>
<div><input type="radio" id="q7a1" name="question7" value="option1" >
<label for="q7a1">La velocità di avanzamento degli assi nelle macchine a controllo numerico</label>
</div>
<div><input type="radio" id="q7a2" name="question7" value="option2" >
<label for="q7a2">La velocità rotazione del pezzo o dell’utensile nei centri a controllo</label>
</div>
<div><input type="radio" id="q7a3" name="question7" value="option3" >
<label for="q7a3">Il lavaggio del pezzo in alta pressione</label>
</div>
</fieldset>
<fieldset>
<legend>Cosa si intende con origine macchina:</legend>
<div><input type="radio" id="q8a1" name="question8" value="option1" >
<label for="q8a1">Il baricentro del centro a controllo</label>
</div>
<div><input type="radio" id="q8a2" name="question8" value="option2" >
<label for="q8a2">Il punto di partenza di tutte le coordinate</label>
</div>
<div><input type="radio" id="q8a3" name="question8" value="option3" >
<label for="q8a3">Il punto di partenza delle lavorazioni del pezzo</label>
</div>
</fieldset>
<fieldset>
<legend>Cosa si intende con i comandi M3 M4:</legend>
<div><input type="radio" id="q9a1" name="question9" value="option1" >
<label for="q9a1">In tornitura, guardando il mandrino da dietro M3 rotazione antioraria e M4 rotazione oraria</label>
</div>
<div><input type="radio" id="q9a2" name="question9" value="option2">
<label for="q9a2">In tornitura, guardando il mandrino da dietro M3 rotazione oraria e M4 rotazione antioraria</label>
</div>
</fieldset>
<fieldset>
<legend>Un utensile ha solo un correttore o può averne anche più di uno?:</legend>
<div><input type="radio" id="q10a1" name="question10" value="option1" >
<label for="q10a1">SÌ</label>
</div>
<div><input type="radio" id="q10a2" name="question10" value="option2" >
<label for="q10a2">NO</label>
</div>
</fieldset>
<fieldset>
<legend>Che funzione ha il codice G01?</legend>
<div><input type="radio" id="q11a1" name="question11" value="option1" >
<label for="q11a1">Movimento assi macchina in lavoro</label>
</div>
<div><input type="radio" id="q11a2" name="question11" value="option2">
<label for="q11a2">Movimento assi macchina in rapido</label>
</div>
<div><input type="radio" id="q11a3" name="question11" value="option2" >
<label for="q11a3">Taglio con velocità costante</label>
</div>
</fieldset>
<input type="submit" value="Invia">
</form>
</body>
</html>
Related
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
i have a question.
I need to create a mortgage calculator but it's particulary complex because i need to sum others variable to the mortgage payment.
Please see the WIP website that i'm making: link.
As you can see, i have a mortgage payment, and some "plus" in the checkboxes.
Basically I have 3 problems:
I don't know why my mortgage payment starts with NaN, but i need to start with a precise number (maybe the max mortgage payment) as you can see is you use the sliders and put the first to the max
After you use the slider, and you click on one of the checkboxes, the price of the checkboxes doesn't sum to the mortgage payment but it will erase it. i need that the checkboxes and the mortgage payment sums to each others.
As it possible to make the slider values min and max as percentages? Like this:<input type="range" min="20%" max="80%" value="" step="5000" onchange="showAmount2(this.value)" id="slider1">?
Here a clean code to check:
//checkboxes-price
var basicPrice = 0; // This is how we start
$(document).on('change', 'input[type=checkbox]', getCheck);
function getCheck() {
var currentPrice = basicPrice; // every time
CurrentPrice = basicPrice,
plus = [],
total = 0;
console.log(currentPrice)
$("input[type=checkbox]").each(function(i, el) {
if ($(el).is(":checked")) {
total += parseInt($(el).val());
console.log(total);
// UPDATE:
plus.push($(el).data('name')); // get the label text
}
});
$("#plus-display").html(plus.join(", "));
$('#rata-display-2').html(total);
$('#rata-display-1').html(total);
}
//slider
$(document).ready(function() {
var zzz = document.getElementById('aaa').innerText;
document.getElementById('slider1').max = zzz;
});
const $mutuo = $("#mutuo"),
$rata = $("#rata-display-2"),
$anni = $("#anni"),
$slider1 = $("#slider1"),
$slider2 = $("#slider2"),
$max = $("#aaa").html();
function showAmount1(newAmount) {
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
function showAmount2(newAmount) {
document.getElementById('anni').innerHTML = newAmount;
$anni.val($("#anni").innerHTML);
update();
}
function update() {
let interesseannuo = 1.60,
C = $mutuo.html(),
anni = $anni.html(),
i = interesseannuo / 12 / 100,
n = anni * 12,
rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(0) + " €");
}
update();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="aaa" class="span text-sottotitolo_dimensione _2 rata checkout">100000</span><br> <br><br>
<div id="plus-display" class="text_piccolo black checkout">PLUS:<strong>place in which display the name of the checkboxes</strong></div><br><br><br>
<form id="plus" name="plus" data-name="plus" class="form-5">
<div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
<div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br></strong>+7 € al mese</label></div>
<div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br></strong>+9 € al mese</label></div>
<div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br></strong>+15 € al mese</label></div>
<div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br></strong>+123 € al mese</label></div>
<div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br></strong>+4 € al mese</label></div>
<div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br></strong>+45 € al mese</label></div>
<div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br></strong>+36 € al mese</label></div>
</form><br><br><br>
<div class="text-ckeckout_wrapper">
<div class="text-checkout color">SCEGLI <span class="bold text-span-4">L'IMPORTO</span> DEL MUTUO:</div>
<div class="slider w-embed"><input type="range" min="0" max="" value="" step="10000" onchange="showAmount1(this.value)" id="slider1"></div>
<div id="mutuo" class="text-checkout color bold">20%</div>
</div>
<div class="lineetta checkout"></div>
<div class="text-ckeckout_wrapper">
<div class="text-checkout color">SCEGLI <span class="bold text-span-5">LA DURATA</span> DEL MUTUO:</div>
<div class="slider w-embed"><input type="range" min="10" max="30" value="20" step="5" onchange="showAmount2(this.value)" id="slider1"></div>
<div id="anni" value="10" class="text-checkout color bold">10</div>
</div><br><br><br>
<span id="rata-display-2" class="prezzo-checkout">0 €</span><br><br><br><br><br><br><br><br><br>
Several things
Do not use commas with let and const - if you have globals, initialise them in the on ready - notice I call update there too now
Make sure your values are not strings ( +string will cast to number if string is a number)
Use $ consistently
user .text() and not .val for containers, val is for input fields
I am not sure what you were doing with this code - very bad mix of dom and val and innerHTML
duplicate IDs on the sliders
function showAmount1(newAmount) {
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
Here is an improved version
var $mutuo,$rata,$anni,$slider1,$slider2,$max; // set this globally if you use it globally
//checkboxes-price
var basicPrice = 0; // This is how we start
$(document).on('change', 'input[type=checkbox]', getCheck);
function getCheck() {
var currentPrice = basicPrice, // every time
plus = [],
total = 0;
$("input[type=checkbox]").each(function(i, el) {
if ($(el).is(":checked")) {
total += parseInt($(el).val());
console.log(total);
// UPDATE:
plus.push($(el).data('name')); // get the label text
}
});
$("#plus-display").html(plus.join(", "));
$rata.text(total);
$('#rata-display-1').html(total);
}
//slider
$(document).ready(function() {
var zzz = parseInt($('#aaa').text());
$('#slider1').attr("max", zzz);
$mutuo = $("#mutuo");
$rata = $("#rata-display-2");
$anni = $("#anni");
$slider1 = $("#slider1");
$slider2 = $("#slider2");
$max = $("#aaa").html();
update();
$(".slider").on("change",function() {
update();
$mutuo.text($("#slider1").val());
$anni.text($("#slider2").val());
})
});
function update() {
let interesseannuo = 1.60;
let C = +$mutuo.text() ||0;
let anni = +$anni.text() || 0
let i = interesseannuo / 12 / 100;
let n = anni * 12;
let rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(0) + " €");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="aaa" class="span text-sottotitolo_dimensione _2 rata checkout">100000</span><br> <br><br>
<div id="plus-display" class="text_piccolo black checkout">PLUS:<strong>place in which display the name of the checkboxes</strong></div><br><br><br>
<form id="plus" name="plus" data-name="plus" class="form-5">
<div class="plus-wrapper interior-pack w-checkbox"><input type="checkbox" id="interior-pack" name="interior-pack" data-name="interior-pack" value="25" class="check-plus w-checkbox-input"><label for="interior-pack" class="checkout-text w-form-label"><strong>Interior Pack<br></strong>+25 € al mese</label></div>
<div class="plus-wrapper domotica w-checkbox"><input type="checkbox" id="domotica" name="domotica" data-name="domotica" value="7" class="check-plus w-checkbox-input"><label for="domotica" class="checkout-text w-form-label"><strong>Sicurezza Domotica<br></strong>+7 € al mese</label></div>
<div class="plus-wrapper security w-checkbox"><input type="checkbox" id="security-plus" name="security-plus" data-name="security-plus" value="9" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Security Plus<br></strong>+9 € al mese</label></div>
<div class="plus-wrapper emotion w-checkbox"><input type="checkbox" id="emotion" name="emotion" data-name="emotion" value="15" class="check-plus w-checkbox-input"><label for="emotion" class="checkout-text w-form-label"><strong>Emotion<br></strong>+15 € al mese</label></div>
<div class="plus-wrapper box-auto w-checkbox"><input type="checkbox" id="box-auto" name="box-auto" data-name="box-auto" value="123" class="check-plus w-checkbox-input"><label for="checkbox-3" class="checkout-text w-form-label"><strong>Box Auto<br></strong>+123 € al mese</label></div>
<div class="plus-wrapper assicurazione w-checkbox"><input type="checkbox" id="assicurazione" name="assicurazione" data-name="assicurazione" value="4" class="check-plus w-checkbox-input"><label for="assicurazione" class="checkout-text w-form-label"><strong>Assicurazione<br></strong>+4 € al mese</label></div>
<div class="plus-wrapper wellness w-checkbox"><input type="checkbox" id="wellness" name="wellness" data-name="wellness" value="45" class="check-plus w-checkbox-input"><label for="wellness" class="checkout-text w-form-label"><strong>Wellness<br></strong>+45 € al mese</label></div>
<div class="plus-wrapper outdoor w-checkbox"><input type="checkbox" id="outdoor" name="outdoor" data-name="outdoor" value="36" class="check-plus w-checkbox-input"><label for="outdoor" class="checkout-text w-form-label"><strong>Outdoor Pack<br></strong>+36 € al mese</label></div>
</form><br><br><br>
<div class="text-ckeckout_wrapper">
<div class="text-checkout color">SCEGLI <span class="bold text-span-4">L'IMPORTO</span> DEL MUTUO:</div>
<div class="slider w-embed"><input type="range" min="0" max="" value="" step="10000" id="slider1"></div>
<div id="mutuo" class="text-checkout color bold">20%</div>
</div>
<div class="lineetta checkout"></div>
<div class="text-ckeckout_wrapper">
<div class="text-checkout color">SCEGLI <span class="bold text-span-5">LA DURATA</span> DEL MUTUO:</div>
<div class="slider w-embed"><input type="range" min="10" max="30" value="20" step="5" id="slider2"></div>
<div id="anni" value="10" class="text-checkout color bold">10</div>
</div><br><br><br>
<span id="rata-display-2" class="prezzo-checkout">0 €</span><br><br><br><br><br><br><br><br><br>
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 need some help with .toogle function: my proble is that i need that this function do the same thing by click on two different button;
this is my html code:
<div id="popup_prova">
<div id="contentElencoProva">
<span>Elenco Prove:</span>
<form action="responseregistrodocente" method="post">
<ul id="elencoProve">
<li><input type="radio" name="provaSelected" value="3" checked> <span>Id prova: 3 tipo [scritto/orale]: O conoscenza: Esame</span></li>
<li><input type="radio" name="provaSelected" value="4"> <span>Id prova: 4 tipo [scritto/orale]: O conoscenza: Esame</span></li>
</ul><p class="submitProve"><button type="button" name="creaProva">Crea Prova</button><button type="button" name="modificaProva">Mostra/Nascondi Dettagli Prova</button> <button type="button" name="eliminaProva">Elimina Prova</button>
</p><p class="infoVoto"><span id="info_Voto"></span>
<span><input type="text" name="voto"></span></p>
<p class="submitVoto"><input type="submit" name="modificaVoto" value="Modifica Voto"> <input type="submit" name="eliminaVoto" value="Elimina Voto"></p> </form>
</div>
<div id="gestioneProva">
<span id="titleProva"></span>
<form id="f_creaProva" action="">
<table>
<tr>
<td>Scegli il tipo di prova:
<select name="s_creaProva">
<option label="Scritto" value="S"></option>
<option label="Orale" selected value="O"></option>
</select>
</td>
</tr>
<tr>
<td>Scrivi i requisiti degli studenti [max 80 caratteri]<span id="counter1"></span></td>
</tr>
<tr>
<td colspan="2"><textarea id="requisiti" rows="4" cols="35"></textarea></td>
</tr>
<tr>
<td>Scrivi le abilità degli studenti [max 80 caratteri]<span id="counter2"></span></td>
</tr>
<tr>
<td colspan="2" ><textarea id="abilita" rows="4" cols="35"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Invia"><input type="reset" name="resettaProva" value="Cancella"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
and this is my javascript code:
<script type="text/javascript">
$(document).ready(function() {
//CREA PROVA VISUALIZZA IL CAMPO PER CREARE UNA NUOVA PROVA CHE ESISTE SEMPRE
$("button[name='creaProva']").on("click",function(event){
$("input[name='resettaProva']").trigger('click');
$("#titleProva").html("Creazione di una nuova Prova");
$("#gestioneProva").slideToggle();
event.stopPropagation();
});
//MODIFICA e NASCONDI LE INFORMAZIONI DI UNA PROVA
//.on scatena l'evento ogni qual volta esiste il pulsante in maniera dinamica anche se il pulsante non esiste ancora
$("button[name='modificaProva']").on("click",function(){
$("#titleProva").html("Prova attualmente selezionata: <input type=\"text\" name=\"idProva\" value=\""+$("input[name='provaSelected']:checked").val()+"\"readonly>");
$("#gestioneProva").slideToggle();
event.stopPropagation();
});
$("input[name='provaSelected']").on("change",function(){
$("#gestioneProva").hide();
event.stopPropagation();
});
});
</script>
now when i click on button "creaProva" .slidetoggle() works fine and show me the "div gestioneProva" but it doesn't work when i click on button modificaProva.
in my css i have also the display none only on div gestioneProva
Thx a lot for help!!!
You are missing the event argument in this line :
$("button[name='modificaProva']").on("click",function(){
change it to :
$("button[name='modificaProva']").on("click",function(event){
Does anyone know how to sum the total of the values. And I would like to multiply the total with 1072. I tried it a littlebit. But that didn't work out very well..
So I would like a javascript code where the total of the 4 values that are marked will be calculated.
<html>
<head>
<h2>Inboedelwaardemeter</h2>
<script type="text/javascript">
function sumCheckedRadioButtons() {
var sum = 0;
$('input[type=radio]:checked').each(function(i, el) {
sum += Number($(el).val());
});
return sum;
}
$('#show_sum').on('click', function() {
alert(sumCheckedRadioButtons());
});
</script>
</head>
<body>
<br>
<b> Leeftijd hoofdkostwinner:</b>
<form name="mijnForm1">
<br>
<input type="radio" id="getal1" name="leeftijd"
value="22" checked> 35 jaar en jonger
<br>
<input type="radio" id="getal2" name="leeftijd"
value="29"> 36 t/m 50 jaar
<br>
<input type="radio" id="getal3" name="leeftijd"
value="38"> 51 jaar en ouder
<br>
<br>
<b> Samenstelling huishouden:</b>
<br>
<form name="mijnForm2">
<input type="radio" id="getal4" name="huishouden"
value="22" checked> Alleenstaande
<br>
<input type="radio" id="getal5" name="huishouden"
value="29"> Echtpaar / Samenwonende
<br>
<br>
<b> Netto maandinkomen hoofdkostwinner</b>
<br>
<form name="mijnForm3">
<input type="radio" id="getal6" name="hoofdkostwinner"
value="22" checked> Tot en met €1000,-
<br>
<input type="radio" id="getal7" name="hoofdkostwinner"
value="29"> €1001,- tot en met €2000,-
<br>
<input type="radio" id="getal8" name="hoofdkostwinner"
value="38"> €2001,- tot en met €3000,-
<br>
<input type="radio" id="getal9" name="hoofdkostwinner"
value="38"> €3001,- of hoger
<br>
<br>
<b> Oppervlakte woning</b>
<br>
<form name="mijnForm4">
<input type="radio" id="getal10" name="Oppervlakte"
value="22" checked> tot en met90m²
<br>
<input type="radio" id="getal1" name="Oppervlakte"
value="29"> 91m² tot en met 140m²
<br>
<input type="radio" id="getal12" name="Oppervlakte"
value="38"> 141m² tot en met 190m²
<br>
<input type="radio" id="getal13" name="Oppervlakte"
value="38"> 191m² of meer
<br>
</form>
<input type="button" id="show_sum" value="Show Sum" />
</body>
</html>
Using jQuery you can simply select all radio buttons which are checked and add their numerical value to a sum:
function sumCheckedRadioButtons() {
var sum = 0;
$('input[type=radio]:checked').each(function(i, el) {
sum += Number($(el).val());
});
return sum;
}
Here is a working jsFiddle (press the "Show Sum" button at the bottom of the "Result" pane).
The following is a vanilla js solution:
function checkTotal() {
var a = document.querySelectorAll('input:checked');
var total = 0;
for(var x=0; x < a.length;x++){
total += a[x].value * 1;
}
alert(total);
}
Note: queryselector is available in (relatively) modern browsers only http://caniuse.com/queryselector
Example here: http://jsfiddle.net/2eU4E/1/