A html form with radio buttons which is assiociated with HTML label which looks like this.
<form action="demo_form.aspx">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
how to get values when user clicks radio buttons either using java script or using server-side script (ASP.Net- C#) ? And also which one of this will be more appropriate to use.
Try this Script:
window.onload = function () {
var btnSubmit = document.getElementById('btn-submit');
btnSubmit.onclick = function (e) {
e.preventDefault();
var radioInputs = document.querySelectorAll('#myform input[type="radio"][name="sex"]');
for (var i = 0; i < radioInputs.length; i++) {
if (radioInputs[i].checked)
{
var value = getlabelforValue(radioInputs[i]);
alert(value);
}
}
document.getElementById("myform").submit();
};
};
function getlabelforValue(inputname) {
var labelElements = document.querySelectorAll('#myform label');
for (var i = 0; labelElements[i]; i++) {
console.log(labelElements[i]);
if (labelElements[i].getAttribute('for') == inputname.getAttribute('id')) {
return labelElements[i].innerText || labelElements[i].textContent;
}
}
return null;
}
Html:
<form id="myform" action="demo_form.aspx">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female" /><br />
<input type="submit" id="btn-submit" value="Submit">
</form>
Here is the Demo
Or
In code behind you can do this to get value.
string radioValue = String.Format("{0}", Request.Form['sex']);
Please try this: 1. add to each input tag attribute class="sex". 2. use jquery you can do like this:
$('.sex').click(function(){
alert($(this).val());
})
Reworked on script given by @bios. This is shorter version of the script.
window.onload = function () {
var btnSubmit = document.getElementById('btn-submit');
btnSubmit.onclick = function (e) {
e.preventDefault();
var radioInputs = document.querySelectorAll('#myform input[type="radio"][name="sex"]');
var labelElements = document.querySelectorAll('#myform label');
for (var i=0; i<radioInputs.length; i++){
for (var j = 0; labelElements[j]; j++) {
if (radioInputs[i].checked)
{
var rdval = radioInputs[i].getAttribute('id');
var lblval = labelElements[j].getAttribute('for');
if(rdval == lblval){
var val = labelElements[j].textContent;
alert(val);
}
}
}
}
};
};
HTML
<form id="myform" action="demo_form.aspx">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female" /><br />
<input type="submit" id="btn-submit" value="Submit">
</form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.