I have 3 Radio Buttons and 3 Buttons that each belong to 1 Radio Button. I want the Buttons only to be enabled if the according Radio Button is checked.
My code works, but only if I first click on a Radio Button and thus start the function. How can I make the function work, so that some buttons are disabled from the beginning?
The function looks like this
$("input:radio[name=Kartenthema]").change(function() {
if (this.value == "Geburtenrate") {
$("#karte_id").attr('src', 'kantone_interaktiv_geburten.svg');
$("#legende_id").attr('src', 'Legenden/GebLegende.PNG');
$("input[name=button1]").attr("disabled", true);
$("input[name=button1]").addClass("disabledClass");
$("input[name=button2]").attr("disabled", false);
$("input[name=button2]:enabled").removeClass("disabledClass");
$("input[name=button3]").attr("disabled", true);
$("input[name=button3]:disabled").addClass("disabledClass");
} else if (this.value == "Sterberate") {
$("#karte_id").attr('src', 'kantone_interaktiv_sterbe.svg');
$("#legende_id").attr('src', 'Legenden/SterbLegende.PNG');
$("input[name=button1]").attr("disabled", true);
$("input[name=button1]:disabled").addClass("disabledClass");
$("input[name=button2]").attr("disabled", true);
$("input[name=button2]:disabled").addClass("disabledClass");
$("input[name=button3]").attr("disabled", false);
$("input[name=button3]:enabled").removeClass("disabledClass");
} else if(this.value == "Wanderung") {
$("#karte_id").attr('src', 'kantone_interaktiv_wanderung.svg');
$("#legende_id").attr('src', 'Legenden/WandLegende.PNG');
$("input[name=button1]").attr("disabled", false);
$("input[name=button1]:enabled").removeClass("disabledClass");
$("input[name=button2]").attr("disabled", true);
$("input[name=button2]:disabled").addClass("disabledClass");
$("input[name=button3]").attr("disabled", true);
$("input[name=button3]:disabled").addClass("disabledClass")
}
}
And the Radio Buttons / Buttons look like this:
<embed id="legende_id" src="Legenden/GebLegende.PNG" width="180" height="230" style="margin-left:30px" type="image/PNG" />
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Geburtenrate" checked="ckecked">Geburtenziffer
<input type="button" class="Button" name="button2" value="Animation" onclick="location.href='animation_geburten.html'">
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Sterberate">Mortalität
<input type="button" disabled="disabled" class="Button" name="button3" value="Animation" onclick="location.href='animation_mortalität.html'">
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Wanderung">Interkantonale Wanderung
<input type="button" class="Button" name="button4" value="Animation" onclick="location.href='animation_wanderung.html'">
<br>
<br>
<input type="button" class="Button" name="button1" value="Kartogramm" onclick="location.href='kartogramm.html'" />
</br>
</br>
</input></input>
</h3>
</input></input>
</h3>
</input></input>
</h3>
I know that I can put a disabled after input type, but then the style doesn't change from enabled to disabled.
if (this.value == "Geburtenrate") {
Change this line and the next 2 similar lines to this:
if ($(this).val() == "Geburtenrate") {
Try using $("input[name=buttonN]").removeAttr("disabled") to set controls enabled.
No problem. Try changing your HTML code to this:
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Geburtenrate" checked="ckecked">Geburtenziffer
<input type="button" class="Button" name="button2" value="Animation" onclick="location.href='animation_geburten.html'" disabled="disabled">
</h3>
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Sterberate">Mortalität
<input type="button" disabled="disabled" class="Button" name="button3" value="Animation" onclick="location.href='animation_mortalität.html'">
</h3>
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Wanderung">Interkantonale Wanderung
<input type="button" class="Button" name="button4" value="Animation" onclick="location.href='animation_wanderung.html'" disabled="disabled">
<br>
<br>
<input type="button" class="Button" name="button1" value="Kartogramm" onclick="location.href='kartogramm.html'" disabled="disabled">
<br>
<br>
</h3>
Related
So I have the following form:
<form>
<input type="button" value="1" >
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<button>Create account</button>
</form>
Those values are to choose a package from a database (those are the IDs). But on the screen I don't want them to display a number but a name (basic, advanced, pro, pro+). Is it possible to have a value and display a different text?
You can use input type radio for choose a different type of value.
<form action="/action_page.php">
<label><input type="radio" name="radio" value="1"> Basic </label>
<label><input type="radio" name="radio" value="1"> Advanced </label>
<label><input type="radio" name="radio" value="3"> Pro</label>
<label><input type="radio" name="radio" value="4"> Pro + </label>
<button type="submit">Create account</button>
</form>
Use a button element:
<form>
<button type="button" value="1">Basic</button>
<button type="button" value="2">Advanced</button>
<button type="button" value="3">Pro</button>
<button type="button" value="4">Pro+</button>
<button>Create account</button>
</form>
style a placeholder or data-attribute, or a for= label.
Clicking this button but, I cannot input radio checked.
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="4"> value 4
</button>
js:
$(".button").click(function (){
$('input[name=choose]').attr('checked', true);
}
how can I do it?
jsfiddle demo
Instead of finding by the global selector, you need to use the button you clicked as the context by which you search in. This way you only check the nested input and do not try to check all of them, thus checking most likely only the last one.
$('.button').on('click', e => {
$('input', e.target).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="4"> value 4
</button>
$(".button").click(function (){
$(this).find('input.radio').attr('checked', true)
})
Try updating it like this?
Please see jsFiddle: https://jsfiddle.net/gto9ck47/1/
You should use prop instead.
$(".button").click(function (e){
$('input', e.target).prop('checked', true);
}
Try Pure javascript without embeding 80kb code to your website
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="4"> value 4
</button>
<script>
let buttons = document.querySelectorAll('.button');
buttons.forEach(button =>{
button.addEventListener('click', ()=> {
button.children[0].checked = true;
});
})
</script>
I need help with my virtual keyboard, On my keyboard there is a DIV that i use to make button value="MAG" work in javascript but i'm using the same DIV to make the keyboard work and write but using one Div with the same id="Div1" doesn't work for me ... so i have to chose between ((Writing using the keyboard .... or changing the keyboard from MAG to MIN )) not both !! .... here is my code and and as you can see you can only write using the keyboard but you can not use MAG button .... i'm sorry for my bad English ...
<html>
<head>
<style type="text/css">
#Div1{
display: block;
}
#Div2 {
display: none;
}
.divs
{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
<style type="text/css">
*{margin:0;padding:0;}
*{margin:0;padding:0;}</style>
<script>
(function() {
'use strict';
var i,c;
function init(){
/* get all the input elements within the div whose id is "keyboard */
i=document.getElementById('Div1').getElementsByTagName('input');
/* loop through all the elements */
for(c=0;c<i.length;c++) {
/* find all the the input type="button" elements */
if(i[c].type==='button') {
/* add an onclick handler to each of them and set the function to call */
i[c].addEventListener('onclick',makeClickHandler(c));
}
}
/* this is the type="reset" input */
document.getElementById('clear').onclick=function() {
/* remove all the characters from the input type="text" element */
document.getElementById('text').value='';
}
}
function makeClickHandler(c) {
i[c].onclick=function() {
/* find the non-text button which has an id */
if(i[c].id==='back') {
/* remove last character from the input the type="text" element using regular expression */
document.getElementById('text').value=
document.getElementById('text').value.replace(/.$/,'');
}
/* find the text buttons */
else {
/* add characters to the input type="text" element */
document.getElementById('text').value+=this.value.toLowerCase();
}
};
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
})();
</script>
</head>
<body>
<div id="Div1">
<div>
<input value="1" type="button">
<input value="2" type="button">
<input value="3" type="button">
<input value="4" type="button">
<input value="5" type="button">
<input value="6" type="button">
<input value="7" type="button">
<input value="8" type="button">
<input value="9" type="button">
<input value="0" type="button">
<input value="Borrar" type="button">
</div><div>
<input value="q" type="button">
<input value="w" type="button">
<input value="e" type="button">
<input value="r" type="button">
<input value="t" type="button">
<input value="y" type="button">
<input value="u" type="button">
<input value="i" type="button">
<input value="o" type="button">
<input value="p" type="button">
<input value="`" type="button">
<input value="+" type="button">
</div><div><input value="a" type="button">
<input value="s" type="button">
<input value="d" type="button">
<input value="f" type="button">
<input value="g" type="button">
<input value="h" type="button">
<input value="j" type="button">
<input value="k" type="button">
<input value="l" type="button">
<input value="ñ" type="button">
<input value="´" type="button">
<input value="ç" type="button">
</div><div>
<input value="<" type="button">
<input value="z" type="button">
<input value="x" type="button">
<input value="c" type="button">
<input value="v" type="button">
<input value="b" type="button">
<input value="n" type="button">
<input value="m" type="button">
<input value="+" type="button">
<input value="." type="button">
<input value="-" type="button">
<input disabled="disabled" value=" " type="button">
</div><div>
<input id="Button1" value="MAG." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" value="MAG." type="button" onclick="switchVisible();">
</div></div>
<div id="Div2" style="display:none" class="keyboard"><div>
<input value="!" type="button">
<input value=""" type="button">
<input value="·" type="button">
<input value="$" type="button">
<input value="%" type="button">
<input value="&" type="button">
<input value="/" type="button">
<input value="(" type="button">
<input value=")" type="button">
<input value="=" type="button">
<input value="Borrar" type="button">
</div><div>
<input value="Q" type="button">
<input value="W" type="button">
<input value="E" type="button">
<input value="R" type="button">
<input value="T" type="button">
<input value="Y" type="button">
<input value="U" type="button">
<input value="I" type="button">
<input value="O" type="button">
<input value="P" type="button">
<input value="^" type="button">
<input value="*" type="button">
</div><div>
<input value="A" type="button">
<input value="S" type="button">
<input value="D" type="button">
<input value="F" type="button">
<input value="G" type="button">
<input value="H" type="button">
<input value="J" type="button">
<input value="K" type="button">
<input value="L" type="button">
<input value="Ñ" type="button">
<input value="¨" type="button">
<input value="Ç" type="button">
</div><div>
<input value=">" type="button">
<input value="Z" type="button">
<input value="X" type="button">
<input value="C" type="button">
<input value="V" type="button">
<input value="B" type="button">
<input value="N" type="button">
<input value="M" type="button">
<input value=";" type="button">
<input value=":" type="button">
<input value="_" type="button">
<input disabled="disalbed" value="" type="button">
</div><div>
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
<input value=" " type="button">
<input id="Button1" value="Min." type="button" onclick="switchVisible();">
</div></div></div></div>
<div>
<label>Track Search</label> - <input id="text" type="text" readonly="readonly">
</div>
<script type="text/javascript">
function switchVisible() {
var div1=document.getElementById('Div1');
var div2=document.getElementById('Div2');
if (div1 !== undefined && div2 !== undefined) {
div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
}
}
</script>
</body>
</html>
There are a few issues that need to be addressed:
Major issues:
Console JS error - there is no button with an ID of "clear".
I didn't see a button with an ID of "back"
I'm guessing it's the "Borrar" button, but it lacks an ID.
It would also need to be skipped by the loop in the init function discussed in the next point.
There are 4 <input id="Button1"...:
IDs need to be unique.
But these buttons do need a class or id to prevent the makeClickHandler from attaching an onclick function and overriding the inline onclick defintiion.
/* find all the the input type="button" elements */
if(i[c].type==='button' && (i[c].id !== "Button1" || i[c].id !== "back")) {
/* add an onclick handler to each of them and set the function to call */
i[c].addEventListener('onclick',makeClickHandler(c));
}
Minor issues:
Move the IIFE script in the <head> to the bottom of the page; then you won't need to add an event listener for "onload".
The code is almost unreadable. Please use indention properly and be consistent!
There's an input with a misspelled disable - disabled="disalbed"
By convention, element id's shouldn't start with a capital letter.
Avoid using onclick or any inline javascript. This is called a separation of concerns.
Brush up/learn about event delegation; it'll make the code cleaner.
I need one help. I need to check the radio button dynamically using Javascript/Jquery. I am explaining my code below.
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type0" id="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setRadioButtonValue()">Set</button>
</span>
Here 3 radio button are available .When user will click on set button one radio button should be checked as per given value. My javascript code is given below.
function setRadioButtonValue(){
var valu="5736daffed8cda709ffc8917";
$('#answer_type0').val(valu).prop('checked', true);
console.log('check',document.getElementById('answer_type0').checked);
}
My updated code are available here
updated plunkr
Here i need to check as per the given value(i.e-var valu="5736daffed8cda709ffc8917") so as per code the Yes/No should be checked but in my case the first radio button always checked.Please help me to resolve this issue.similarly i need to also check the multiple set of radio button from each set. My plunkr code is here.
Use attribute selector and use :radio to select radio inputs.
Remove duplicate-id attributes
function setRadioButtonValue(elem) {
var value = "5736daffed8cda709ffc8917";
$(elem).closest('div').find(':radio[value="' + value + '"]').prop('checked', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
<button type="button" name="btn" onclick="setRadioButtonValue(this)">Set</button>
</div>
<br>
<br>
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
<button type="button" name="btn" onclick="setRadioButtonValue(this)">Set</button>
</div>
<br>
<br>
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
<button type="button" name="btn" onclick="setRadioButtonValue(this)">Set</button>
</div>
In your case when the loop is complete i is always set to 2. If you want to do it with for loop see this answer or you can try this simple approach with adding a class within divs.
var valu = ['5736daffed8cda709ffc8917', '5736db13ed8cda709ffc8918', '5736db29ed8cda709ffc8919']
function setRadioButtonValue() {
var i = 0;
$('.qclass').each(function() {
console.log($(this).find('input[value="' + valu[i] + '"]').is(':checked'));
$(this).find('input[value="' + valu[i] + '"]').prop('checked', true);
i++;
})
}
Add a class for the div containing the radios in my case qclass
var valu = ['5736daffed8cda709ffc8917', '5736db13ed8cda709ffc8918', '5736db29ed8cda709ffc8919']
function setRadioButtonValue() {
var i = 0;
$('.qclass').each(function() {
$(this).find('input[value="' + valu[i] + '"]').prop('checked', true);
console.log($(this).find('input[value="' + valu[i] + '"]').is(':checked'));
i++;
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left; margin-right:10px;" class="qclass">
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Scale
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Yes/No
<input type="radio" name="answer_type0" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Written
</div>
<br>
<br>
<div style="float:left; margin-right:10px;" class="qclass">
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">A
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">B
<input type="radio" name="answer_type1" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">C
</div>
<br>
<br>
<div style="float:left; margin-right:10px;" class="qclass">
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db13ed8cda709ffc8918">Male
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736daffed8cda709ffc8917">Female
<input type="radio" name="answer_type2" onclick="selectScale(this.value,'0');" value="5736db29ed8cda709ffc8919">Male+Female
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setRadioButtonValue()">Set</button>
</span>
So here's what my code does:
it displays 10 sets of radio buttons, each with 2 options. (so 20 radio buttons total). The 10 sets all have different names, but are within the same form. A person can only choose 5 buttons out of the 10. I have a piece of code that disables the radio buttons once 5 are selected. Now I want to prevent people from submitting the form if 4 or less buttons are selected.
Here is an example of the code:
HTML:
<form method="post" action="index.php" name="buttons" onsubmit="return Validation()">
<input type="radio" id="button" value="first_button" name="1" />
<input type="radio" id="button" value="second_button" name="1" />
<input type="radio" id="button" value="first_button" name="2" />
<input type="radio" id="button" value="second_button" name="2" />
<input type="radio" id="button" value="first_button" name="3" />
<input type="radio" id="button" value="second_button" name="3" />
<input type="radio" id="button" value="first_button" name="4" />
<input type="radio" id="button" value="second_button" name="4" />
<input type="radio" id="button" value="first_button" name="5" />
<input type="radio" id="button" value="second_button" name="5" />
<input type="radio" id="button" value="first_button" name="6" />
<input type="radio" id="button" value="second_button" name="6" />
<input type="radio" id="button" value="first_button" name="7" />
<input type="radio" id="button" value="second_button" name="7" />
<input type="radio" id="button" value="first_button" name="8" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="9" />
<input type="radio" id="button" value="second_button" name="9" />
<input type="radio" id="button" value="first_button" name="10" />
<input type="radio" id="button" value="second_button" name="10" />
</form>
JAVASCRIPT
function Validation()
{
var bol2 = $("input:radio:checked").length;
if (bol2<=4)
{
alert("Please select 5 buttons");
return false;
}
}
The code now works. Thanks #Climbage, I looked at other code and figured out what to do
Try this - http://jsfiddle.net/BeT4h/
<form method="post" action="index.php" name="buttons" id="form">
<script>
function showTime() {
var inputs = document.getElementById("form").elements;
var count = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'radio' && inputs[i].checked) {
count++;
}
}
alert(count);
}
</script>
Just make 5 of them checked by default.
Put check='checked' for every other input. Put in all first_button or second_button.