How to get the data-value data-list

1

I have data-list for teacher names, whose values are their names. By default, no input % captures the data contained in value . This causes a problem, since my database expects a numeric value.

When I change the values of option to numeric (1 to name 1, 2 to name 2 and etc.), it generates another problem (this time aesthetic): the user selects a teacher, and in the selection field no the name appears, but the value of 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 be displayed in the selection bar, and that a numeric value is sent to input .

The data-value of code is from a hint that I found here on stackoverflow , but it did not work

    
asked by anonymous 01.04.2018 / 11:04

1 answer

1

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

p>

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 make a treatment using javascript you can get the value of <input> and search with querySelector() a <option> element that has in the attribute value="" an equal value and extract / retrieve the content of its attribute data-value and reassign this value (from option ) to <input> , eg:

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: Values passed by a form (x-www-form-urlencoded) are {String} normally comparison functions (used on the server) already read {String} as if they represented example numbers:

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

However, if you want to save a "numeric" value in the database, it would ideally be 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:

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

By observing the event submit it is possible to replace the value of <input> without a noticeable change to the user (since the value "visible" will be renamed 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 on:

  • Node : version 8.9.4
  • PHP : version 7.0
01.04.2018 / 12:12