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

Spread the love

Sometimes, we want to show datalist labels but submit the actual value with JavaScript.

In this article, we’ll look at how to show datalist labels but submit the actual value with JavaScript.

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

To show datalist labels but submit the actual value with JavaScript, we can store the value we submit in a data attribute.

For instance, we write

<input list="answers" id="answer" />
<datalist id="answers">
  <option data-value="42" value="The answer"></option>
</datalist>

to add an input with its datalist element.

Then we write

const shownVal = document.getElementById("answer").value;
const value2send = document.querySelector(
  `#answers option[value='"${shownVal}"']`
).dataset.value;

to get the value of the input with document.getElementById("answer").value.

Then we get the option with the value with document.querySelector(#answers option[value=’"${shownVal}"’]); .

And then we get its data-value attribute with the dataset.value property.

Conclusion

To show datalist labels but submit the actual value with JavaScript, we can store the value we submit in a data attribute.

Leave a Reply

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