There is 3 radio buttons on a website, and I want to use javascript to check the radio button that says "female". How would I do that?
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
document.getElementsByValue("female").checked = true;
With document.querySelector("input[value='female']" you can select it with the value.
document.querySelector("input[value='female']").click()
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
You can get value by binding this to function and accessing the boolean value with .checked and .name which value is checked
function radionButtonChecked(e) {
console.log(e.checked, " ",e.value);
}
<input type="radio" name="gender" value="male" onclick="radionButtonChecked(this)"> Male<br>
<input type="radio" name="gender" value="female" onclick="radionButtonChecked(this)"> Female<br>
<input type="radio" name="gender" value="other" onclick="radionButtonChecked(this)"> Other
Related
I am working on a project where I have created a form in react.js with radio buttons but handleChange event is not firing the correct value of selected radio button. When I select male the formData object still has an empty value of gender, when I select it again the value of gender in formData gets updated to 0 which is equal to female. Please help me know what is the problem with my code.
import React from "react"
function Questions(props) {
const [formData, setFormData] = React.useState({
age: "",
gender: "",
polyuria: "",
polydipsia: "",
weight_loss: "",
weakness: "",
polyphagia: "",
genital_thrush: "",
visual_blurring: "",
itching: "",
irritability: "",
delayed_healing: "",
partial_paresis: "",
muscle_stiffness: "",
alopecia: "",
obesity: ""
})
function handleChange(event) {
const name = event.target.name
const value = event.target.value
setFormData(prevFormData => ({
...prevFormData,
[name]: value
}))
console.log(formData)
}
return (
<div>
<h1>Here will be Questions</h1>
<div className="form">
<p id="age" name="age">How old are you?</p>
<input type="number" min="1.20" max="5" htmlFor="age" value={formData.age} name="age"
onChange={handleChange}/>
<p id="gender">What is your gender?</p>
<input type="radio" id="male" name="gender" value="1" htmlFor="gender"
onChange={handleChange} checked={formData.gender === "1"}/>Male
<input type="radio" id="female" name="gender" value="0" htmlFor="gender"
onChange={handleChange} checked={formData.gender === "0"}/>Female
<p>Do you suffer from Polyuria?</p>
<p>If you are unfamiliar, read about Polyuria here</p>
<label><input type="radio" id="yes" name="polyuria" value="1" onChange={handleChange} checked={formData.polyuria === "1"}/>Yes</label>
<label><input type="radio" id="no" name="polyuria" value="0" onChange={handleChange} checked={formData.polyuria === "0"}/>No</label>
<p>Do you suffer from Polydipsia?</p>
<p>If you are unfamiliar, read about Polydipsia here</p>
<label><input type="radio" id="yes" name="polydipsia" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="polydipsia" value="0" onChange={handleChange}/>No</label>
<p>Have you noticed sudden weight loss in yourself?</p>
<label><input type="radio" id="yes" name="weight_loss" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="weight_loss" value="0" onChange={handleChange}/>No</label>
<p>Do you feel more weakness than usual throughout the day?</p>
<label><input type="radio" id="yes" name="weakness" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="weakness" value="0" onChange={handleChange}/>No</label>
<p>Do you suffer from Polyphagia?</p>
<label><input type="radio" id="yes" name="polyphagia" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="polyphagia" value="0" onChange={handleChange}/>No</label>
<p>Do you suffer from Genital Thrush?</p>
<label><input type="radio" id="yes" name="genital_thrush" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="genital_thrush" value="0" onChange={handleChange}/>No</label>
<p>Have you noticed your vision blurring?</p>
<label><input type="radio" id="yes" name="visual_blurring" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="visual_blurring" value="0" onChange={handleChange}/>No</label>
<p>Do you duffer from unusual itching on your body?</p>
<label><input type="radio" id="yes" name="itching" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="itching" value="0" onChange={handleChange}/>No</label>
<p>Do you experience unusual irritability/ mood swings?</p>
<label><input type="radio" id="yes" name="irritability" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="irritability" value="0" onChange={handleChange}/>No</label>
<p>Have you noticed delayed healing of wounds/ scars?</p>
<label><input type="radio" id="yes" name="delayed_healing" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="delayed_healing" value="0" onChange={handleChange}/>No</label>
<p>Do you suffer from Partial paresis?</p>
<label><input type="radio" id="yes" name="partial_paresis" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="partial_paresis" value="0" onChange={handleChange}/>No</label>
<p>Do you suffer from muscle stiffness?</p>
<label><input type="radio" id="yes" name="muscle_stiffness" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="muscle_stiffness" value="0" onChange={handleChange}/>No</label>
<p>Do you suffer from Alopecia?</p>
<label><input type="radio" id="yes" name="alopecia" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="alopecia" value="0" onChange={handleChange}/>No</label>
<p>Are you obese?</p>
<label><input type="radio" id="yes" name="obesity" value="1" onChange={handleChange}/>Yes</label>
<label><input type="radio" id="no" name="obesity" value="0" onChange={handleChange}/>No</label>
<button>Predict</button>
</div>
<button onClick={props.toggleBack}>Back</button>
</div>
)
}
export default Questions
change your handle function to this
function handleChange(event) {
const name = event.target.name
const value = event.target.value
const updatedData = {...formData,[name]:value}
setFormData(updatedData)
console.log(formData)
}
currently your state update and render is not aligned.
I have a radio button group and one input field. What I want is when the radio button property is CHECKED the below ID gets their value. I tried something which is wrong.
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="text" id="{%if radio.checked='checked'%} Account {%endif%}" class="">
I think you need input box value as selected radio button value. if you change the id of input control then HTML page will have 2 controls with same id. If you want input control value to show selected radio value then use below code.
<script language="javascript">
function onCheck(isChecked, value){
document.getElementById('displaySelRad').value = value
}
</script>
<input type="radio" id="male" name="gender" value="male" checked onclick="onCheck(this.checked, this.value)">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female" onclick="onCheck(this.checked, this.value)">
<label for="female">Female</label><br>
<input type="text" id="displaySelRad" class="">
How to get radio button value in javascript using onChange?
Here's my HTML:
if (document.getElementById('male').checked) {
document.getElementById('gender2').innerHTML = "Male";
}
if (document.getElementById('female').checked) {
document.getElementById('gender2').innerHTML = "Femmale";
}
<div class="radio">
<label>
<input type="radio" name="gender" onChange="(checkGender)" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" onChange="(checkGender)" id="female" value="Female">
Female
</label>
</div>
<td>Gender</td>
<td><span id="gender2"></span></td>
You need to define an actual function for call back:
function checkGender() {
if (document.getElementById('male').checked) {
document.getElementById('gender2').innerHTML = "Male";
}
if (document.getElementById('female').checked) {
document.getElementById('gender2').innerHTML = "Femmale";
}
}
<div class="radio">
<label>
<input type="radio" name="gender" onChange="checkGender()" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" onChange="checkGender()" id="female" value="Female">
Female
</label>
</div>
<td>Gender</td>
<td><span id="gender2"></span></td>
Your JavaScript is executed once, when the page loads. You need to call it when something changes (based on an event), and react to the change.
HTML:
<div class="radio">
<label>
<input type="radio" name="gender" onclick="checkGender()" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" onclick="checkGender()" id="female" value="Female">
Female
</label>
</div>
JS:
function checkGender() {
if (document.getElementById('male').checked) {
document.getElementById('gender2').innerHTML = "Male";
}
if (document.getElementById('female').checked) {
document.getElementById('gender2').innerHTML = "Femmale";
}
}
Add an event handler to the container (.radio) using Element.addEventListener(). When the handler is triggered check if the event target is a radio button using Element.matches(). If is is and radio button update the value of the #gender1 div:
var radio = document.querySelector('.radio');
var gender2 = document.getElementById('gender2');
radio.addEventListener('change', function(e) {
if(!e.target.matches('input[type=radio]')) return;
gender2.innerText = e.target.value;
});
<div class="radio">
<label>
<input type="radio" name="gender" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" value="Female">
Female
</label>
</div>
<div id="gender2"></div>
You can add an event listener on radio buttons and check for the values.
var radios = document.querySelectorAll('input[type=radio]');
var genderEl = document.getElementById("gender");
for(var i=0; i< radios.length; i++)
{
radios[i].addEventListener("click", function(){
genderEl.innerHTML = this.value
})
}
<div class="radio">
<label>
<input type="radio" name="gender" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" id="female" value="Female">
Female
</label>
<h3 id="gender"></h3>
</div>
Note: You should always use eventlisteners rather than using inline event handlers. Inline event handlers are evaluated as eval. Moreover, it's a bad practice
I'm trying to update values from form except gender value all updates.
Gender value is not updating
here is code for gender radio button.
<label>
Gender: </label>
<input type="radio" id="gender" name="gender" value="male" required> Male
<input type="radio" name="gender" id="gender" value="female" required> Female
<input type="radio" name="gender" id="gender" value="other" required> Other
I'fetching value of form using js function which send it to update function.
var gender = $('#gender').val();
what mistake I had made?
This should work
// Get the value from a set of radio buttons
$('input:radio[name="gender"]:checked').val();
See also the examples given at http://api.jquery.com/val/
try this,
var gender = $('#gender:checked').val();
https://jsfiddle.net/dave17/tdk60unr/
i hope it will be helpful.
try this code working fine at my end
<form >
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
I need a way to show correct price for a product with selection options. Radio Box 1 has 4 products with different price ProductA=$10, ProductB=$20, ProductC=$30, ProductD=$40
Radio Box 2 has two options Male and Female
For female all products are always $10 regardless of Radio Box 1 selection. Price varies for men depending on product choice. I need to show price change dynamically with js.
http://jsfiddle.net/pe2gpp01/
<div><label class="product">Product</label>
<span>
<input name="category" type="radio" value="10">
<label>Product A</label>
<input name="category" type="radio" value="20">
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40">
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="">
<label>Male</label>
<input name="gender" type="radio" value="">
<label>Female</label>
</span></div>
<span>Price:</span>
DEMO
html
<div>
<label class="product">Product</label>
<span>
<input name="category" type="radio" value="10" >
<label>Product A</label>
<input name="category" type="radio" value="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40" >
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="male" checked>
<label>Male</label>
<input name="gender" type="radio" value="female">
<label>Female</label>
</span></div>
<span>Show Price: <span id="price"></span></span>
js
$(function() {
$('[type="radio"]').on('change', function() {
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
$('#price').text(price);
}).change();
});