Javascript input

⦁ The JavaScript input text property is provided to set and return the value of a text input field.
⦁ The value properties contain either the default value that is present upon loading the element. The value entered by the user(input field), or the value assigned by the script.

We have two examples of get input-value JavaScript. The first one holds a code that will return the value of the property. JavaScript get the value of input:

textObject.value

The second example can be provided for setting the value of the property. As you can see, it contains a value called text, indicating the value of the input text field:

textObject.value = text

Just like many other JavaScript properties, this one will also generate a return value. The JavaScript input text field value property will provide a string, containing the value of the text field.

EXAMPLE:

<!DOCTYPE html>
<html>

<head>
     <script type="text/javascript" src="scripts.js">
     </script>
</head>

<body>

      <form action="/learn/action_page.php" onsubmit="return sampleFunction()">
Name (max 15 characters): <input type="text" id="fname" size="15" name="fname"><br>
Age (from 1 to 100): <input type="text" id="age" size="3" name="age"><br>
E-mail: <input type="text" id="email" size="25" name="mail"><br><br>
<input type="submit" value="Submit"> 
</form>

</body>
</html>

Script:

function sampleFunction() {
 var at = document.getElementById("email").value.indexOf("@");
 var age = document.getElementById("age").value;
 var fname = document.getElementById("fname").value;
 submitOK = "true";

 if (fname.length > 10) {
   alert("The name may have no more than 10 characters");
   submitOK = "false";
  }

 if (isNaN(age) || age < 1 || age > 100) {
   alert("The age must be a number between 1 and 100");
   submitOK = "false";
  }

 if (at == -1) {
   alert("Not a valid e-mail!");
   submitOK = "false";
  }

 if (submitOK == "false") {
   return false;
  }
}

OUTPUT: