0

Como passar values de outros inputs (como parâmetro) para uma função que somente será executada em um determinado input?

<input id="nome" type="text" value="LocalHost"/>
<input id="email" type="email" value="[email protected]"/>
<input id="tel" type="tel" onChange="funcao()" value="(62)90000-0000"/>

JavaScript:

function funcao(nome, email, telefone) {
   // valor do type="text", type="email" e type="tel"
}

Observação:

Os inputs estão dentro de um foreach:

<?php foreach($resultado as $res){?>
    <input id="nome" type="text" value="<?php echo $res['nome']; ?>"/>
    <input id="email" type="email" value="<?php echo $res['email']; ?>"/>
    <input id="tel" type="tel" onChange="funcao()" value="<?php echo $res['telefone']; ?>"/>
<?php } ?>
2
  • document.getElementById("nome").value;...
    – MagicHat
    Commented 21/01/2017 às 2:31
  • @MagicHat, preciso que esses valores sejam passados como parâmetro da função...
    – lucasbento
    Commented 21/01/2017 às 2:34

2 Respostas 2

2

Você pode criar uma função intermediária para lidar com o evento e passar os valores para sua função.

Algo assim:

<head>
  <script>
    function onChangePhone(e) {
      var nome = document.getElementById('nome').value;
      var email = document.getElementById('email').value;
      var tel = document.getElementById('tel').value;
      funcao(nome,email,tel);
    }

    function funcao(nome, email, telefone) {
       console.log("Nome: " + nome);
       console.log("E-mail: " + email);
       console.log("Telefone: " + telefone);
    }
  </script>
</head>
<body>
  <input id="nome" type="text" value="LocalHost"/>
  <input id="email" type="email" value="[email protected]"/>
  <input id="tel" type="tel" onchange="onChangePhone()" value="(62)90000-0000"/>
</body>

Mas isto respondendo especificamente sua pergunta de como enviar os valores de três inputs como parâmetros da função funcao. Não sei a lógica que você quer aplicar, mas provavelmente você pode usar uma função só. Algo assim:

<head>
  <script>
    function funcao(e) {

      var nome = document.getElementById('nome').value;
      var email = document.getElementById('email').value;
      var telefone = document.getElementById('tel').value;

       console.log("Nome: " + nome);
       console.log("E-mail: " + email);
       console.log("Telefone: " + telefone);
    }
  </script>
</head>
<body>
  <input id="nome" type="text" value="LocalHost"/>
  <input id="email" type="email" value="[email protected]"/>
  <input id="tel" type="tel" onchange="funcao()" value="(62)90000-0000"/>
</body>

Apenas uma correção: o evento javascript nativo é em minúsculo (docs). Então o correto seria onchange ao invés de onChange, em que pese alguns navegadores entenderem as duas versões.

EDITADO (após a atualização da pergunta)

Primeira coisa, você não pode ter mais de um ID igual na mesma página, ou seja, os ID's devem ser únicos. No seu loop, você está atribuindo os ID's nome, email e telefone a mais de um elemento.

Então, neste caso, uma solução possível é substituir os ID's por uma classe (para referenciá-los posteriormente), e agrupá-los (esta parte é importante) em um elemento pai com uma classe dados.

Outra coisa, seu código da pergunta está com problema (código php misturado com o html), mas pode ter sido na hora de copiar/colar.

Coloquei uns comentários no javascript para explicar o que está acontecendo em cada etapa. Estas formas de obter o event e o target são bem populares e infelizmente são necessárias para se ter uma máxima compatibilidade.

Existem bibliotecas como o jQuery que facilitam estas operações, mas é uma decisão sua se você quer incluí-la ou não, e foge do escopo da pergunta.

Aqui está o código:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function mudouTelefone(event) {
            /* 
                como você está usando javascript puro (vanilla),
                você tem que fazer alguns truques para manipular o objeto evento.
                Dependendo do navegador, ou ele vem como parâmetro da função, ou
                encontra-se como propriedade do objeto window.

            */  
            event = event || window.event;


            /* 
                a mesma coisa aqui. O alvo (target) do evento (ou seja, o elemento que foi clicado)
                pode vir como propriedade .target ou como propriedade .srcElement, a depender do navegador
            */
            var target = event.target || event.srcElement;

            /* pegamos a referência do pai, para depois procurar os filhos dele */
            var divDados = target.parentNode;

            /* procuramos os elementos dentro do pai divDados com o método .querySelector */
            var nome = divDados.querySelector('.nome').value;
            var email = divDados.querySelector('.email').value;
            var tel = divDados.querySelector('.tel').value;


            funcao(nome,email,tel);
        }

        function funcao(nome, email, tel) {
           console.log("Nome: " + nome);
           console.log("E-mail: " + email);
           console.log("Telefone: " + tel);
           alert("Nome: " + nome + ", E-mail: " + email + ", Telefone: " + tel);
        }
    </script>
</head>
<body>
<?php foreach($resultado as $res){ ?>
    <div class="dados">
        <input class="nome" type="text" value="<?php echo $res['nome']; ?>"/>
        <input class="email" type="email" value="<?php echo $res['email']; ?>"/>
        <input class="tel" type="tel" onchange="mudouTelefone(event)" value="<?php echo $res['tel']; ?>"/>
    </div>
<?php } ?>


</body>
</html>

Uma última dica: se você ficou confuso com o operador ||, tem uma resposta aqui no SOpt que explica bem seu funcionamento.

EDITADO 2 (após o OP ter mostrado o código atual)

Baseado no seu código postado no pastebin, percebi que não era a mesma estrutura mostrada no exemplo, e isto influenciou na resposta. A estratégia que eu sugeri era agrupar seus inputs em uma tag que seria o elemento em comum de todos. Aí era só chamar o parentNode que ele encontraria o elemento pai (que colocamos a class dados), e a partir dele você localizaria os filhos.

Mas, no seu código real, o elemento em comum aos seus inputs está duas camadas acima <tr />, ou seja, a linha da tabela. Para funcionar, você deve acrescentar um .parentNode ao .parentNode para ele subir duas camadas no DOM. Algo assim:

function ultimaNFe(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    /* pegamos a referência o elemento em comum, no caso, dois nodes acima (a linha da tabela) */
    var trNode = target.parentNode.parentNode;

    /* procuramos os elementos dentro do tr com o método .querySelector */
    var id_emp = trNode.querySelector('.id-emp').value;
    var ultima_nfe = trNode.querySelector('.ultima-nfe').value;
    funcao(id_emp,ultima_nfe);
}

Desta forma, pode remover o div dados. Ficaria assim: http://pastebin.com/3Tr4kQ00

0
1

Não acredito que seja a melhor forma a se fazer mas aqui esta:

<head>
        <script>
            function funcao(nome, email, telefone) {
                alert("nome: " + nome +" email: "+ email +" telefone: "+ telefone);
            }
        </script>
</head>
<body>
    <form>
        <input id="nome" type="text" value="LocalHost"/>
        <input id="email" type="email" value="[email protected]"/>
        <input id="tel" type="tel" onChange="funcao(nome.value, email.value, tel.value)" value="(62)90000-0000"/>
    </form>

</body>

http://jsfiddle.net/aWSSV/19/

Abs

7
  • um verdade, nem precisa getelement... boa
    – MagicHat
    Commented 21/01/2017 às 2:41
  • Olá Renato, o meu alert está a retornar undefined. @RenatoSerra
    – lucasbento
    Commented 21/01/2017 às 2:42
  • Ou melhor dizendo: ao realizar debug: nome, email e telefone estão undefined
    – lucasbento
    Commented 21/01/2017 às 2:51
  • estranho aqui esta trazendo normal, testei agora no chrome, esta em que navegador? Commented 21/01/2017 às 3:01
  • Google Chrome. Pode publicar no JSFiddle?
    – lucasbento
    Commented 21/01/2017 às 3:08

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 .