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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Datalist Labels and Submit Actual Values</title>
</head>
<body>
<!-- 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>
</datalist>
<!-- Button to submit the form -->
<button onclick="submitForm()">Submit</button>
<script>
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 = "";
}
</script>
</body>
</html>
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.
