10-formulare/10-js-form-fields.html

<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8" />
	<title>JS form fields</title>
</head>


<body>
	
	<h1>JS form fields</h1>
	
	
	<input type="button" onclick="fillForm()" value="Fill the form!">

	<form id="myForm">

		<label for='first'>First Name</label>
		<input type="text" id="first">
		
		<br/><br/>


		<label for='last'>Last Name</label>
		<input type="text" id="last">

		<br/><br/>

		<label for='rock'>Wanna rock?</label>
		<input type="checkbox" id="rock">
		
		<br/><br/>
		
		<input type="submit">
		
		<input type="reset" onclick="return confirmReset()">

		
	</form>
	

	<script>
	
	function fillForm() {
		
		var form = document.getElementById('myForm').elements;
		
		form.namedItem('first').value = 'John';
		
		form.namedItem('last').value = 'Doe';
		
		form.namedItem('rock').checked = true;
		
		
	}
	
	
	function confirmReset(){
		return confirm('Do you want to reset the form?');
	}
	
	
	</script>
	
	
</body>

</html>