Get value of input field text
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="result">
</p>
<form>
<p>
<label for="name">Name</label>
<input type="text" id="name">
</p>
<p>
<button type="button" onclick="getName();">Get Name</button>
</p>
</form>
</body>
</html>
<script type="text/javascript">
function getName(){
var name=document.querySelector("#name").value;
document.querySelector("#result").innerHTML=name;
}
</script>
Get radio button value using java script
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="result">
</p>
<form name="form">
<p>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
</p>
<p>
<button type="button" onclick="getGender();">Get Gender</button>
</p>
</form>
</body>
</html>
<script type="text/javascript">
function getGender(){
var result=document.querySelector("#result");
if(document.form.gender[0].checked){
result.innerHTML=document.form.gender[0].value;
}
else if(document.form.gender[1].checked){
result.innerHTML=document.form.gender[1].value;
}
}
</script>
Get checkbox input field value
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="result">
</p>
<form name="form">
<p>
<label for="hobby">Hobby</label>
<input type="checkbox" name="hobby" value="Reading">Reading
<input type="checkbox" name="hobby" value="Singing">Singing
</p>
<p>
<button type="button" onclick="getHobby();">Get Hobby</button>
</p>
</form>
</body>
</html>
<script type="text/javascript">
function getHobby(){
var result=document.querySelector("#result");
var hobby="";
if(document.form.hobby[0].checked){
hobby+=document.form.hobby[0].value;
}
if(document.form.hobby[1].checked){
hobby+=document.form.hobby[1].value;
}
result.innerHTML=hobby;
}
</script>
