Using javascript to check a radio button by it's value - javascript

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

Why does handleChange not fire correctly in react.js?

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.

How to get the ID value while the radio button is checked in Shopify?

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="">

getElementById with Radio Button not working

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

radio button not shows updated value

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>

Update price on two checkbox selection with javascript or jQuery

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();
});

Categories

Resources