डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

Full Stack Web Development with Laravel

Full Stack Web Development with Laravel

Affiliate Program

Affiliate Program

Form handling in java script

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>
© 2016 - 2023, All Rights are Reserved.