Read and Write HTML Form Data

EasyProgramming.net tutorial on reading and writing form element data

by vaibhav saxena

HTML

<!-- Easy JavaScript # 18 - Reading and Writing Form Element Values -->
<div>

<label for="name">Name: </label><input id="name" type="text" /><br /><br />

<textarea id="city"/></textarea> 
<button id="submit">Submit</button>
<button id="clear">Clear</button>

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

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 = replaceNum(document.getElementById("name").value);
  var city = replaceNum(document.getElementById("city").value);
  
  document.getElementById("outputName").innerText = name;
  document.getElementById("outputCity").innerText = city;
}

var replaceNum = (str)=>{
	return str.replace(new RegExp("[0-9]","g"), "[General_Number]")
}

capitalize.onclick = function(){
	var name = replaceNum(document.getElementById("name").value);
  var city = replaceNum(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 = "";
}