karthikraj-duraisamy/html-forms-manager.html

## html-forms-manager.html
<!DOCTYPE html>
<html>
<body>

<form id="myForm" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br>
  <input type="submit" value="Submit">
</form>

<p>Click the "Try it" button to display the number of elements in the form and print the form values with validation alert.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

	//This is for pre-populating the data in the fields
	var formName = "myForm";
    var x = document.getElementById(formName).elements.length;
    var form = "\nForm values: ";
    var element = "";
	for(var i = 0; i < x; i++) {
    	element = document.getElementById(formName).elements[i];
        element.value = "Nothing"
       	if(element.type == "text")
		form = form + "" + element.value;
	}

	//This is for parsing the data from the fields
	function myFunction() {
    	validation();
		var formName = "myForm";
    	var x = document.getElementById(formName).elements.length;
    	var form = "Form values: ";
    	var element = "";
		for(var i = 0; i < x; i++) {
    		element = document.getElementById(formName).elements[i];
        	element.value = "CDF"
       		if(element.type == "text")
			form = form + "<br/>" + element.value;

	}
    document.getElementById("demo").innerHTML = "Found " + x + " elements in the form. <br/><br/>" + form;
}

	//This is for validating the data from the fields
	function validation() {

    	var formName = "myForm";
    	var x = document.getElementById(formName).elements.length;

    	var element = "";
		for(var i = 0; i < x; i++) {
    		element = document.getElementById(formName).elements[i];
       		if(element.type == "text" && element.name == "fname" && element.value.length < 5)
			alert("First name should be more than 5 characters");

	}
    }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<form id="myForm" action="/action_page.php">
	First name: <input type="text" name="fname" value="Donald"><br>
	Last name: <input type="text" name="lname" value="Duck"><br>
	<input type="submit" value="Submit">
	</form>

	<p>Click the "Try it" button to display the number of elements in the form and print the form values with validation alert.</p>

	<button onclick="myFunction()">Try it</button>

	<p id="demo"></p>

	<script>

	//This is for pre-populating the data in the fields
	var formName = "myForm";
	var x = document.getElementById(formName).elements.length;
	var form = "\nForm values: ";
	var element = "";
	for(var i = 0; i < x; i++) {
	element = document.getElementById(formName).elements[i];
	element.value = "Nothing"
	if(element.type == "text")
	form = form + "" + element.value;
	}

	//This is for parsing the data from the fields
	function myFunction() {
	validation();
	var formName = "myForm";
	var x = document.getElementById(formName).elements.length;
	var form = "Form values: ";
	var element = "";
	for(var i = 0; i < x; i++) {
	element = document.getElementById(formName).elements[i];
	element.value = "CDF"
	if(element.type == "text")
	form = form + "<br/>" + element.value;

	}
	document.getElementById("demo").innerHTML = "Found " + x + " elements in the form. <br/><br/>" + form;
	}

	//This is for validating the data from the fields
	function validation() {

	var formName = "myForm";
	var x = document.getElementById(formName).elements.length;

	var element = "";
	for(var i = 0; i < x; i++) {
	element = document.getElementById(formName).elements[i];
	if(element.type == "text" && element.name == "fname" && element.value.length < 5)
	alert("First name should be more than 5 characters");

	}
	}
	</script>
	</body>
	</html>