JavaScript HTML Input Examples

JavaScript can be used to interact dynamically with HTML input fields, allowing for a range of functionalities, from form validation to real-time feedback. Here are examples of handling various input types using JavaScript.

1. Getting Input Value

Retrieve the value from an input field and display it:

function showValue() {
    let inputValue = document.getElementById("textInput").value;
    document.getElementById("output").innerHTML = "You entered: " + inputValue;
}

HTML:

<input type="text" id="textInput" placeholder="Enter text">
<button onclick="showValue()">Submit</button>
<p id="output"></p>

2. Real-Time Input Display

Update a paragraph dynamically as the user types:

function updateText() {
    let input = document.getElementById("liveInput").value;
    document.getElementById("liveOutput").innerHTML = input;
}

HTML:

<input type="text" id="liveInput" oninput="updateText()">
<p id="liveOutput"></p>

3. Form Validation

Check if a required field is filled:

function validateForm() {
    let email = document.getElementById("emailInput").value;
    if (email === "") {
        alert("Email is required!");
        return false;
    }
    alert("Form submitted successfully!");
    return true;
}

HTML:

<form onsubmit="return validateForm()">
    <input type="email" id="emailInput" placeholder="Enter your email">
    <button type="submit">Submit</button>
</form>

4. Checkbox Selection

Display a message based on checkbox selection:

function checkSelection() {
    let isChecked = document.getElementById("checkBox").checked;
    document.getElementById("checkboxOutput").innerHTML = isChecked
        ? "Checkbox is checked."
        : "Checkbox is unchecked.";
}

HTML:

<input type="checkbox" id="checkBox" onclick="checkSelection()">
<p id="checkboxOutput"></p>

5. Radio Button Selection

Get the selected radio button’s value:

function getRadioValue() {
    let selected = document.querySelector('input[name="gender"]:checked').value;
    alert("You selected: " + selected);
}

HTML:

<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<button onclick="getRadioValue()">Submit</button>

6. Dropdown Selection

Retrieve the selected option from a dropdown menu:

function getSelectedOption() {
    let selectedValue = document.getElementById("dropdown").value;
    alert("You selected: " + selectedValue);
}

HTML:

<select id="dropdown" onchange="getSelectedOption()">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
</select>

7. File Upload Preview

Show the name of the uploaded file:

function showFileName() {
    let fileInput = document.getElementById("fileInput").files[0];
    document.getElementById("fileOutput").innerHTML = fileInput
        ? "Selected file: " + fileInput.name
        : "No file selected.";
}

HTML:

<input type="file" id="fileInput" onchange="showFileName()">
<p id="fileOutput"></p>

8. Range Slider

Display the current value of a range slider:

function showSliderValue() {
    let sliderValue = document.getElementById("slider").value;
    document.getElementById("sliderOutput").innerHTML = "Value: " + sliderValue;
}

HTML:

<input type="range" id="slider" min="0" max="100" oninput="showSliderValue()">
<p id="sliderOutput">Value: 50</p>

9. Textarea Word Counter

Count the words in a textarea:

function countWords() {
    let text = document.getElementById("textarea").value;
    let wordCount = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
    document.getElementById("wordCount").innerHTML = "Words: " + wordCount;
}

HTML:

<textarea id="textarea" oninput="countWords()"></textarea>
<p id="wordCount">Words: 0</p>

Enhance Your Skills

For more examples and hands-on tutorials, visit The Coding College, where JavaScript examples like these are curated to help you learn dynamically!

Leave a Comment