How to get the data-value of the data-list

Question

I have a data-list for the names of teachers, whose values (values) are their names. By default, in the input captures the data contained in value. Which creates a problem, since my database expects a numerical value.

When I change the values of option for numeric (1 for name 1, 2 for name 2 and etc.), generates another problem (this time aesthetic): the user selects a teacher, and in the selection field no longer appears the name, but the value of the value.

                <datalist id="teachers">
                    <select>
                        <option data-value="1" value="Nome 1">Nome 1</option>
                        <option data-value="2" value="Nome 1">Nome 2</option>
                    </select>
                </datalist>

Summary: I want the name of the selected teacher to appear in the selection bar, and to be sent to the input a numerical value.

The data-value of the code is from a tip I found here at stackoverflow, but it didn’t work

Answer 1

If you are not doing the form treatment with javascript what will be sent in the value of your field <input> will be the option value (this is default) as demonstrated in the code below (simple demonstration):

let input = document.getElementById('x')

input.addEventListener('input', function(evt) {
    if ( input.value !== '' ) {
        alert(this.value)
    }
}, false)

<datalist id="teachers">
    <select>
        <option data-value="1" value="Nome 1">Nome 1</option>
        <option data-value="2" value="Nome 2">Nome 2</option>
    </select>
</datalist>

<input id="x" type="text" list="teachers">

If you take a treatment using javascript you can take the value of <input> and seek with querySelector() an element <option> that you have in the attribute value="" an equal value and extract/retrieve content from its attribute data-value and reallocate this value (from option) at the <input>, example:

let input = document.getElementById('x')

input.addEventListener('input', function(evt) {
    let selector = document.querySelector('option[value="'+this.value+'"]')
    if ( selector ) {
        input.setAttribute('value', selector.getAttribute('data-value'))
        console.log(input)
    }
}, false)

<datalist id="teachers">
    <select>
        <option data-value="1" value="Nome 1">Nome 1</option>
        <option data-value="2" value="Nome 2">Nome 2</option>
    </select>
</datalist>

<input id="x" type="text" list="teachers">

---

PS: the values passed by a form (x-www-form-urlencoded) are {String} normally compare functions (used on the server) already read the {String} as if they represent example numbers:

"10" > 5  // verdadeiro
"10" > 15 // falso

However, if you want to save in the database a "numerical" value would be ideal to convert this {String} numeric to a fact number:

// em PHP
$string_number = "10";
$number = (int) $string_number;
// test
echo(gettype($string_number).' - '.gettype($number));
// output: string - integer

// em JavaScript (Node)
let stringNumber = "10",
    number = Number(stringNumber)

// test
console.log(typeof stringNumber +' - '+ typeof number)
// output: string - number

---

editing:

Ok, the second example modifies the value of the "node" in theDOM but not the value of <input> that this in memory ... an approach not very different from this example (the second) uses an event observer submit for the form.

Observing the event submit it is possible to replace the value of the <input> without there being a noticeable change to the user (once the "visible" value will be changed from the name to a "number").

let input = document.getElementById('x')

input.addEventListener('input', function(evt) {
    let selector = document.querySelector('option[value="'+this.value+'"]')
    if ( selector ) {
        this.form.addEventListener('submit', function(evt) {
            input.value = selector.getAttribute('data-value')
        }, false)
    }
}, false)

<datalist id="teachers">
    <select>
        <option data-value="1" value="Nome 1">Nome 1</option>
        <option data-value="2" value="Nome 2">Nome 2</option>
    </select>
</datalist>

<form method="post" action="/?">
    <input id="x" name="teacher" type="text" list="teachers">
    <input type="submit" value="Send">
</form>

The recommendation (if you want to save a number in the database) remains the same.

Tested in:

• Node: version 8.9.4
• PHP: version 7.0