Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Make JavaScript take HTML input from user, parse and display?
JavaScript can retrieve HTML input values as strings and parse them into different data types. This tutorial shows how to get user input from HTML forms and convert it appropriately.
Basic Input Retrieval
HTML input elements return string values by default. Use document.getElementById() to access input values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Parser Example</title>
</head>
<body>
<input type="text" id="txtInput" placeholder="Enter a number">
<button type="button" onclick="parseInput()">Parse Input</button>
<p id="result"></p>
</body>
<script>
function parseInput() {
var inputValue = document.getElementById("txtInput").value;
var resultElement = document.getElementById("result");
if (!isNaN(inputValue) && inputValue !== "") {
var parsedNumber = parseInt(inputValue);
resultElement.innerHTML = "Parsed integer: " + parsedNumber;
console.log("The value = " + parsedNumber);
} else {
resultElement.innerHTML = "Please enter a valid integer";
console.log("Please enter a valid integer value");
}
}
</script>
</html>
Multiple Input Types
Different parsing methods handle various data types:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Input Parser</title>
</head>
<body>
<input type="text" id="intInput" placeholder="Integer">
<input type="text" id="floatInput" placeholder="Decimal">
<input type="text" id="textInput" placeholder="Text">
<button onclick="parseAllInputs()">Parse All</button>
<div id="output"></div>
</body>
<script>
function parseAllInputs() {
var intVal = document.getElementById("intInput").value;
var floatVal = document.getElementById("floatInput").value;
var textVal = document.getElementById("textInput").value;
var output = document.getElementById("output");
var results = "<h3>Parsed Results:</h3>";
// Parse integer
if (!isNaN(intVal) && intVal !== "") {
results += "<p>Integer: " + parseInt(intVal) + " (type: " + typeof parseInt(intVal) + ")</p>";
}
// Parse float
if (!isNaN(floatVal) && floatVal !== "") {
results += "<p>Float: " + parseFloat(floatVal) + " (type: " + typeof parseFloat(floatVal) + ")</p>";
}
// String (no parsing needed)
if (textVal !== "") {
results += "<p>Text: " + textVal + " (type: " + typeof textVal + ")</p>";
}
output.innerHTML = results;
}
</script>
</html>
Parsing Methods Comparison
| Method | Purpose | Example Input | Result |
|---|---|---|---|
parseInt() |
Convert to integer | "42.7" | 42 |
parseFloat() |
Convert to decimal | "42.7" | 42.7 |
Number() |
Convert to number | "42.7" | 42.7 |
| No parsing | Keep as string | "hello" | "hello" |
Input Validation
Always validate input before parsing to prevent errors:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Validation</title>
</head>
<body>
<input type="text" id="numberInput" placeholder="Enter number">
<button onclick="validateAndParse()">Validate & Parse</button>
<p id="validation"></p>
</body>
<script>
function validateAndParse() {
var input = document.getElementById("numberInput").value;
var validation = document.getElementById("validation");
// Check if empty
if (input.trim() === "") {
validation.innerHTML = "? Input is empty";
return;
}
// Check if numeric
if (isNaN(input)) {
validation.innerHTML = "? Not a valid number";
return;
}
// Parse successfully
var parsed = parseFloat(input);
validation.innerHTML = "? Valid number: " + parsed;
console.log("Parsed value:", parsed, "Type:", typeof parsed);
}
</script>
</html>
Output
When you run the first example and enter "123" in the input field, the console will display:
The value = 123
If you enter invalid input like "abc", it will show:
Please enter a valid integer value
Conclusion
Use parseInt() for integers, parseFloat() for decimals, and always validate input with isNaN() before parsing. This ensures your JavaScript handles user input safely and converts it to the appropriate data type.
Updated on: 2026-03-15T23:19:00+05:30
2K+ Views
Advertisements