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
document.getElementById("nome").value;
...