2

Tenho uma data-list para os nome de professores, cujos valores (values) são os nomes dos mesmos. De forma padrão, no submit o input captura os dados contidos em value. O que gera um problema, já que meu banco de dados espera um valor númerico.

Quando mudo os valores dos option para númerico (1 para o nome 1, 2 para nome 2 e etc.), gera outro problema (dessa vez estético): o usuário seleciona um professor, e no campo de seleção não aparece mais o nome, e sim o valor do 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>

Resumo: Quero que na barrinha de seleção apareça o nome do professor selecionado, e que seja enviado para o input um valor númerico.

O data-value do código é de uma dica que encontrei aqui no stackoverflow, mas não funcionou

1 Resposta 1

3

Se você não está fazendo o tratamento do formulário com javascript o que será enviado no valor de seu campo <input> será o valor da opção (isso é padrão) como demonstrado no código abaixo (simples demonstração):

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">

Se você fizer um tratamento usando javascript podes pegar o valor do <input> e buscar com querySelector() um elemento <option> que tenha no atributo value="" um valor igual e extrair/recuperar o conteúdo de seu atributo data-value e reatribuir este valor (vindo do option) ao <input>, exemplo:

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: os valores passados por um formulário (x-www-form-urlencoded) são {String} normalmente funções de comparação (usadas no servidor) já lêem a {String} como se representassem números exemplo:

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

Contudo, se você deseja salvar no banco de dados um valor "numérico" o ideal seria converter esta {String} numérica para um número de fato:

// 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

edição:

Ok, o segundo exemplo modifica o valor do "nó" noDOM mas não o valor do <input> que esta em memória ... uma abordagem não muito diferente deste exemplo (o segundo) usa um observador de evento submit para o formulário.

Observando o evento submit é possível substituir o valor do <input> sem que haja uma mudança perceptível ao usuário (uma vez que o valor "visível" será mudado do nome para um "número").

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>

A recomendação (caso queira salvar um número no banco de dados) continua a mesma.

Testado em:

  • Node: versão 8.9.4
  • PHP: versão 7.0
8
  • Se existe possibilidade de "conflito" com outros elementos <option> na página, o ideal seria passar na "query" de consulta o id do <datalist> e percorrer seus elementos na busca de uma opção que atenda a consulta exigida (um value igual ao valor do <input>) Commented 1/04/2018 às 10:58
  • Quando envio o valor para o formulário o valor enviado continua sendo o value que está em option. E aí dá erro porque o banco de dados espera um número e recebe uma {String} como, por exemlo, {Nome 1}. @LauroMoraes Commented 1/04/2018 às 15:47
  • @WellingtonAlbertoni você marcou a resposta pq conseguiu resolver? Caso não, qual é sua linguagem no servidor? Commented 1/04/2018 às 16:09
  • Uso PHP e a propósito, o action do form está para a mesma página action="<?php echo $_SERVER['PHP_SELF']; ?>" Commented 1/04/2018 às 16:50
  • 1
    Se quiser dar uma olhada, o código da página está aqui, o input em questão está na linha 47, o javascript na linha 74. Commented 1/04/2018 às 17:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .