I'm trying to set up a form which takes in userame, email and favorite color of the user (datalist), and shows it back in an alert box. Everything seems to work so far, except that the color is shown as HEX code - I would like it to be either the name of the color or the text of the option.
const button = document.querySelector("button");
const email = document.querySelector("#email");
const username = document.querySelector("#username");
button.addEventListener("click", function(e) {
e.preventDefault();
alert(`Username: ${username.value} \nE-Mail: ${email.value} \nFavorite color: ${document.querySelector("input[list=presets]").value}`);
})<form action="">
<label for="username">Username:</label>
<input type="text" name="username" id="username"> <br>
<label for="email">Email:</label>
<input type="email" name="email" id="email"> <br>
<label for="color">Favorite color:</label>
<input type="color" list="presets">
<datalist id="presets">
<option value="#000000" name="black">Black</option>
<option value="#cccccc" name="grey">Grey</option>
<option value="#ffffff" name="white">White</option>
<option value="#0000ff" name="blue">Blue</option>
<option value="#ff0000" name="red">Red</option>
<option value="#00ff00" name="green">Green</option>
</datalist>
<button>Submit</button>
</form>I tried some things and most of the time got "Color: undefined", so getting HEX is already an improvement. Still it would be nice to see the color as string.
As Cjmarkham pointed out, you can get the name attribute of the selected <option> tag.
To get the selected option tag, you need to use some trickery (see this answer). You need to get the value of the <input> tag, then use a query selector that gets the <option> tag that is a child of the <datalist> element and has the same value attribute as the <input> tag. See the code below:
const button = document.querySelector("button");
const email = document.querySelector("#email");
const username = document.querySelector("#username");
button.addEventListener("click", function(e) {
e.preventDefault();
const input = document.querySelector('input[list=presets]');
const selected = document.querySelector(`#presets>option[value="${input.value}"]`);
alert(`Username: ${username.value} \nE-Mail: ${email.value} \nFavorite color: ${selected.getAttribute('name')}`);
})<form action="">
<label for="username">Username:</label>
<input type="text" name="username" id="username"> <br>
<label for="email">Email:</label>
<input type="email" name="email" id="email"> <br>
<label for="color">Favorite color:</label>
<input type="color" list="presets">
<datalist id="presets">
<option value="#000000" name="black">Black</option>
<option value="#cccccc" name="grey">Grey</option>
<option value="#ffffff" name="white">White</option>
<option value="#0000ff" name="blue">Blue</option>
<option value="#ff0000" name="red">Red</option>
<option value="#00ff00" name="green">Green</option>
</datalist>
<button>Submit</button>
</form>