Read and Write HTML Form Data

EasyProgramming.net tutorial on reading and writing form element data

by otorineko6790

HTML

<label for="name">Name: </label><input id="name" type="text" /><br /><br />
<label for="name">City: </label><input id="city" type="text" /><br /><br />
<button id="submit">Submit</button>
<button id="capitalize">Capitalize Everything!</button>
<button id="clear">Clear</button>

<p>
Your Name is <span id="outputName">____</span>. The city in which you live is <span id="outputCity">____</span>. 
</p>

CSS

#outputName, #outputCity{
  color: red;
}

JavaScript

var submit = document.getElementById("submit");
var capitalize = document.getElementById("capitalize");
var clear = document.getElementById("clear");

submit.onclick = function(){
	var name = document.getElementById("name").value;
  var city = document.getElementById("city").value;
  
  document.getElementById("outputName").innerText = name;
  document.getElementById("outputCity").innerText = city;
}

capitalize.onclick = function(){
	var name = document.getElementById("name").value;
  var city = document.getElementById("city").value;
  
  document.getElementById("name").value = name.toUpperCase();
  document.getElementById("city").value = city.toUpperCase();
}

clear.onclick = function(){
	document.getElementById("name").value = "";
  document.getElementById("city").value = "";
}