One all day triying to display an input box if a radio button if checked on 'Si' value in a form made under google app script. All logic i saw here for a normal JS-HTML form failed and can't realize what is wrong
<div class="w3-half">
<label class="w3-text-brown"><b>¿Cuenta con alguna certificación o sello de calidad?</b></label>
<div class="w1-one">
<input class="w3-radio" type="radio" name="calidad" id="calidad" value="SI"onchange="my_function()" >
<label>SI</label>
<input class="w3-radio" type="radio" name="calidad"id="calidad" value="NO">
<label>NO</label>
</div>
</div>
<div class="w3-half">
<label class="w3-text-brown"><b>¿Cuál? </b></label>
<input class="w3-input w3-border w3-sand" id="selloCali" type="text"style="display:none;">
</div>
</div>
function my_function() {
if( document.getElementById("calidad").value == 'Si' ){
document.getElementById("selloCali").style.display = 'block';
} else {
document.getElementById("vigencia1").style.display = 'block';
};
};
Related
I have a poll for my mock website where I need to vote for one of three contestants. I need to store the vote in local storage and then after each additional vote, I need to update the vote in local storage and display it beside the contestants. My main problem is with updating the vote in local storage. I have to do it with only javaScript, HTML and CSS
<html>
<body>
<fieldset>
<legend> <h3>Vote For Your Favorite Chef! </h3></legend>
<form onsubmit="getChoice()" id="pollForm"> <!-- do js for the getCHoice-->
<input type="radio" id="Nominee1" name="Nominee" value="Reynold Poernomo" required/>
<label for="Nominee1"> Reynold Poernomo </label>
<span id="nom1" class="vote"></span>
<br/>
<input type="radio" id="Nominee1.1" name="Nominee" value="Christine Tania" required>
<label for="Nominee1.1"> Christine Tania </label>
<span id="nom2" class="vote"></span>
<br/>
<input type="radio" id="Nominee1.2" name="Nominee" value="Christina Tosi" required>
<label for="Nominee1.2"> Christina Tosi </label>
<span id="nom3" class="vote"></span> <br />
<br/>
<input type="submit">
</form>
<script src="js/localStorage.js"></script>
</fieldset>
</body>
</html>
<script>
function incrementPoll() {
let nominee1 = document.getElementById('Nominee1').value;
let nominee2 = document.getElementById('Nominee2').value;
let nominee3 = document.getElementById('Nominee3').value;
if (nominee1.checked == true) {
updatePoll("Nominee1");
} else if (nominee2.checked == true) {
updatePoll("Nominee2");
} else if (nominee3.checked == true) {
updatePoll("Nominee3");
}
}
function updatePoll(entry) {
let voteUpdate = parseInt(localStorage.getItem(entry),10) + 1;
return localStorage.setItem(entry, (Number(voteUpdate)).toString()); //how to convert to string
}
These two functions are supposed to check which button is being selected and updates the vote in local storage. But it doesn't actually work.
Here's a working version of your code. I hope this helps.
const nominee1 = document.getElementById('Nominee1');
const nominee2 = document.getElementById('Nominee2');
const nominee3 = document.getElementById('Nominee3');
function incrementPoll(e) {
e.preventDefault();
if (nominee1.checked == true) {
updatePoll("Nominee1");
} else if (nominee2.checked == true) {
updatePoll("Nominee2");
} else if (nominee3.checked == true) {
updatePoll("Nominee3");
}
}
function updatePoll(entry) {
const voteUpdate = (parseInt(localStorage.getItem(entry), 10) || 0) + 1;
localStorage.setItem(entry, voteUpdate);
document.querySelector(`#${entry.replace('Nominee', 'nom')}`).innerText = voteUpdate;
}
<fieldset>
<legend>
<h3>Vote For Your Favorite Chef! </h3>
</legend>
<form onsubmit="incrementPoll(event)" id="pollForm">
<input type="radio" id="Nominee1" name="Nominee" value="Reynold Poernomo" required/>
<label for="Nominee1"> Reynold Poernomo </label>
<span id="nom1" class="vote"></span>
<br/>
<input type="radio" id="Nominee2" name="Nominee" value="Christine Tania" required>
<label for="Nominee1.1"> Christine Tania </label>
<span id="nom2" class="vote"></span>
<br/>
<input type="radio" id="Nominee3" name="Nominee" value="Christina Tosi" required>
<label for="Nominee2"> Christina Tosi </label>
<span id="nom3" class="vote"></span> <br />
<br/>
<input type="submit">
</form>
</fieldset>
Since the snippet won't work because localStorage is not accessible in an SO snippet, here is a fiddle
I know this has been already asked. I checked all the previous question about this topic but I can't find a solution.
This is the problem: I have two input, one is a checkbox and the other one is a radio with three possible choices. Inside a function I have to see firstly if the first checkbox is checked, if yes I will check some other things with an if else statement, otherwise the function will proceed. The radio input will appear later inside the same function. This one will check which of the three choices had been checked previously and will set a variable equal to the value of the checked one. To see if the checkbox is checked I use jQuery with .is(':checked'), but it every returns false, even if I checked them. Any idea?
Sorry if I haven't properly used Stack Overflow, but this is my first question.
This is the HTML, the input is #geoloc_waypoint_active and the radio is #locomotion_radio
<div id="create_route_modal_content" class="modal-body">
<div id="geo_switch">
<div id="geoSwitchDiv">
<label for="geoloc_waypoint_active">
Usa la tua posizione
</label>
<label class="switch">
<input id="geoloc_waypoint_active" class="form-check form-check-inline" type="checkbox">
<span class="slider round"></span>
</label>
</div>
<br>
<div id="locomotion_radio">
<label><input class="locomInput" type="radio" name="locomotion" value="walking" checked><img class='locomotionImg' src='immagini/walking.png'></label>
<label><input class="locomInput" type="radio" name="locomotion" value="cycling"><img class='locomotionImg' src='immagini/cycling.png'></label>
<label><input class="locomInput" type="radio" name="locomotion" value="driving"><img class='locomotionImg' src='immagini/driving.png'></label>
</div>
DrawOnMap() {
let formattedCoord = "";
let geoposition = $('#geoloc_waypoint_active').is(':checked');
console.log(geoposition)
if (geoposition) {
var geoL = $('#geo_Locator .mapboxgl-ctrl .mapboxgl-ctrl-icon');
if (!map.getLayer('points') && geoL.attr('aria-pressed') === 'false') {
alert("L'utente non ha una posizione attualmente attiva.");
return;
} else {
this.waypoints.unshift(window.userPosition);
}
}
if (this.waypoints.length < 2) {
alert("Devi inserire almeno due punti di interesse.");
return;
}
this.waypoints.forEach((waypoint, index, source) => {
formattedCoord += waypoint[0] + "," + waypoint[1];
if (index < source.length - 1) {
formattedCoord += ";";
}
});
let locomotion = $('input[name=locomotion]:checked').val();
let geoposition = $('#geoloc_waypoint_active').is(':checked'); is always false and so It never enter the if
Same thing with let locomotion = $('input[name=locomotion]:checked').val(); It can't find the checked one and set locomotion
have you tried this $("#geoloc_waypoint_active")[0].checked it will give you control right value.
$(document).ready(function(){
console.log($("#geoloc_waypoint_active")[0].checked)
$('#check').on('click',function(){
console.log($("#geoloc_waypoint_active")[0].checked)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value='checkVakue' type='button' id='check'/>
<div id="create_route_modal_content" class="modal-body">
<div id="geo_switch">
<div id="geoSwitchDiv">
<label for="geoloc_waypoint_active">
Usa la tua posizione
</label>
<label class="switch">
<input id="geoloc_waypoint_active" class="form-check form-check-inline" type="checkbox">
<span class="slider round"></span>
</label>
</div>
<br>
<div id="locomotion_radio">
<label><input class="locomInput" type="radio" name="locomotion" value="walking" checked><img class='locomotionImg' src='immagini/walking.png'></label>
<label><input class="locomInput" type="radio" name="locomotion" value="cycling"><img class='locomotionImg' src='immagini/cycling.png'></label>
<label><input class="locomInput" type="radio" name="locomotion" value="driving"><img class='locomotionImg' src='immagini/driving.png'></label>
</div>
what coding html if else or switch for checkbox? Example when tick 1 checkbox 'text' statement will appear. But if tick 3 checkbox the statement change to 'another text'. Given my coding; If tick 'cat' checkbox 'British shorthair' checkbox will appear and click again 'cute' text appear. How to make it if two or more checkbox tick the text change example like 'super cute'
<script type="text/javascript">
function ShowHideDiv(Cat) {
var dvCat = document.getElementById("bigCat");
bigCat.style.display = Cat.checked ? "block" : "none";
console.log(Cat.value)
console.log("Text Inside LABEL:" + Cat.parentNode.textContent)
}
</script>
<label for="Cat">
<input type="checkbox" id="Cat" onclick="ShowHideDiv(this)" value="cat"/> Cat
</label>
<script type="text/javascript">
function ShowHideDiv2(Rabbit) {
var bigRabbit = document.getElementById("bigRabbit");
bigRabbit.style.display = Rabbit.checked ? "block" : "none";
console.log(Rabbit.value)
console.log("Text Inside LABEL:" + Rabbit.parentNode.textContent)
}
</script>
<label for="Rabbit">
<input type="checkbox" id="Rabbit" onclick="ShowHideDiv2(this)" value="Rabbit"/> Rabbit
</label>
<div id="bigCat" style="display: none">
<label>
<input type="checkbox" id="bigSubCat" /> British shorthair
</label>
<label>
<p id="subCats1" ></p>
</label>
<script>
document.getElementById("bigSubCat").addEventListener("click", function() {
document.getElementById("subCats1").innerHTML = "Cute";
});
</script>
<label>
<input type="checkbox" id="bigSubCat" /> Exotic Shorthair
</label>
</div>
<div id="bigRabbit" style="display: none">
<label>
<input type="checkbox" id="bigSubRabbit" /> White Rabbit
</label>
<label>
<input type="checkbox" id="bigSubRabbit" /> Black Rabbit
</label>
I am trying to show a red circle with the "!" when the radio buttons are unchecked and to show a green circle when both are checked. After that I use a function to make the button submit or not according to the red/green circle.
I've tried many ways to tangle with the code but it doesn't want to show the green circle when it's checked any idea why ?
PS:
span3 (red circle )
span2 (green circle)
Basically I want to make my form validation by js not by php ...
HTML:
<label id="labelage">Age:</label>
<br>
<input type="radio" id="under_13" value="under_13" name="age">
<label for="under_13" class="light">Under 13</label>
<input type="radio" id="over_13" value="over_13" name="age">
<label for="over_13" class="light">13 or Older</label>
<div class="break"></div>
<div id="borderlabel">
<label id="labelage1">Gender:</label>
<input type="radio" id="male" value="male" name="gender">
<label for="male" class="light1">Male</label>
<input type="radio" id="female" value="female" name="gender">
<label for="female" class="light1">Female</label>
</div>
....
<button type="submit" id="signupb" name="register">Sign up
<div class="span3">!</div>
<div class="span2">✔</div>
</button>
JavaScript
$(".span1").hide();
$(".span2").hide();
$(".span3").hide();
function submit() {
if (!$('#male').is(':checked') || !$('#female').is(':checked')) {
$(".span3").show();
} else {
if (!$('#under_13').is(':checked') || !$('#over_13').is(':checked')) {
$(".span3").show();
} else {
$(".span2").show();
}
}
}
$("#signupb").on("mouseover", submit);
Your logic is off
Have the radio clicks also update the !
Do not call something submit
Cancel the submission if clicking anyway
Try this:
function checkRad() {
var ok = ($('#male').is(':checked') || $('#female').is(':checked')) &&
($('#under_13').is(':checked') || $('#over_13').is(':checked'))
$(".span3").toggle(!ok);
$(".span2").toggle(ok);
return ok;
}
$(function() {
$(".span1").hide();
$(".span2").hide();
$(".span3").hide();
$("#signupb").on("mouseover", checkRad)
.on("click", function(e) {
if (!checkRad()) e.preventDefault();
})
$("input[type=radio]").on("click", function() {
checkRad();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label id="labelage">Age:</label>
<br>
<input type="radio" id="under_13" value="under_13" name="age">
<label for="under_13" class="light">Under 13</label>
<input type="radio" id="over_13" value="over_13" name="age">
<label for="over_13" class="light">13 or Older</label>
<div class="break"></div>
<div id="borderlabel">
<label id="labelage1">Gender:</label>
<input type="radio" id="male" value="male" name="gender">
<label for="male" class="light1">Male</label>
<input type="radio" id="female" value="female" name="gender">
<label for="female" class="light1">Female</label>
</div>
....
<button type="submit" id="signupb" name="register">Sign up
<div class="span3">!</div>
<div class="span2">✔</div>
</button>
I would recommend using jQuery Validation plugin instead
It's bad practice to assign IDs to every input element, makes code harder to maintain. Consider accessing elements by name attribute.
Consider adding server-side validation as well against browser errors/malicious users.
Change your submit() function to:
function validateForm() {
$(".span2").hide();
$(".span3").hide();
var isError = false;
if (!$('#male').is(':checked') && !$('#female').is(':checked')) {
isError = true
} else if (!$('#under_13').is(':checked') && !$('#over_13').is(':checked')) {
isError = true;
}
if(isError){
$(".span3").show();
} else {
$(".span2").show();
}
}
$("#signupb").on("mouseover", validateForm);
DEMO
Suppose I have the following code which creates two radio buttons:
<li id="foli517" class=" ">
<label class="desc" id="shippingChoice" for="Field517_0">
Shipping Options
</label>
<div>
<input id="shippingChoice" name="Field517" type="hidden" value="" />
<span>
<input id="shipping1" name="Field517" type="radio" class="field radio" value="$2.00 Shipping Fee" tabindex="13" checked="checked" />
<label class="choice" for="Field517_0" >
$2.00 Shipping Fee</label>
</span>
<span>
<input id="Field517_1" name="Field517" type="radio" class="field radio" value="I will pick up the items (free shipping)" tabindex="14" />
<label class="choice" for="Field517_1" >
I will pick up the items (free shipping)</label>
</span>
</div>
</li>
How would I implement a javascript function onclick which updates the inner html of a span with id "mySpan" with the word "FREE" when the 2nd radio button is clicked, and "NOT FREE" otherwise?
document.getElementById(WHAT GOES HERE).onclick = function() {
//what goes here?
};
document.getElementById('foli517').onchange = function(e) {
var e = e || event;
var target = e.target || e.srcElement;
var span = document.getElementById('mySpan');
var span2 = document.getElementById('mySpan2');
if (target.type === "radio") {
span.innerHTML = (target.id === "Field517_1") ? "FREE" : "NOT FREE";
}
if (target.type === "checkbox") {
span2.innerHTML = "Is it checked? " + target.checked;
}
};
Example: http://jsfiddle.net/pEYnm/2/
I would add onclick="setSpan('FREE');" and onclick="setSpan('NOT FREE');" to HTML of the respective radio buttons then add a javascript function as below that sets the HTML of the span.
function setSpan(text) {
document.getElementById('mySpan').innerHTML = text;
}
Please check Working code of Radio button on click !