JavaScript Answers

How to show datalist labels but submit the actual value with JavaScript?

Spread the love

To show datalist labels to users while submitting the actual value associated with those labels, you can achieve this using JavaScript.

You would need to create a hidden input field to store the actual value while displaying the labels in a visible input field.

To do this, we write:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Datalist Labels and Submit Actual Values</title>
    <!-- Visible input field for displaying labels -->
    <label for="fruit">Choose a fruit:</label>
    <input list="fruits" id="fruitInput">
    <!-- Hidden input field for storing actual values -->
    <input type="hidden" id="hiddenFruitInput" name="hiddenFruitInput">
    <!-- Datalist with options -->
    <datalist id="fruits">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
    <!-- Button to submit the form -->
    <button onclick="submitForm()">Submit</button>

        function submitForm() {
            // Get the selected value from the visible input field
            var visibleInput = document.getElementById("fruitInput").value;
            // Set the value of the hidden input field to the actual value associated with the label
            var hiddenInput = document.getElementById("hiddenFruitInput");
            hiddenInput.value = visibleInput;
            // You can now submit the form or perform any other actions with the hidden input value
            // For demonstration purposes, let's log the hidden input value
            console.log("Actual value submitted:", hiddenInput.value);
            // Clear the visible input field
            document.getElementById("fruitInput").value = "";

In this example, we have a visible input field (<input list="fruits" id="fruitInput">) that displays the labels from the datalist.

We also have a hidden input field (<input type="hidden" id="hiddenFruitInput" name="hiddenFruitInput">) to store the actual values associated with the labels.

When the form is submitted (by clicking the “Submit” button), the JavaScript function submitForm() is called.

Inside the submitForm() function, we retrieve the value entered in the visible input field, set the value of the hidden input field to the actual value, and then perform any further actions needed (e.g., logging the value or submitting the form to the server).

This way, the labels are displayed to the user, but the actual values associated with those labels are submitted with the form.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *