You can create an intermediate function to handle the event and pass the values to your function.
Something like this:
<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>
But this specifically responding to your question as to send the values of three inputs as parameters of the funcao function. I do not know the logic you want to apply, but you can probably use one function only. Something like this:
<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>
Only one fix: the native javascript event is in lowercase ( docs ). Then the correct would be onchange instead of onChange , although some browsers will understand the two versions.
EDIT (after updating the question)
First, you can not have more than one ID on the same page, that is, the ID's should be unique. In your loop, you are assigning the ID's nome , email and telefone to more than one element.
So in this case, a possible solution is replace the ID's with a class (to reference them later), and group them (this part is important) into a parent element with a class dados .
Another thing, your question code is in trouble (php code mixed with html), but it may have been time to copy / paste.
I've put some comments in the javascript to explain what's going on at each step. These ways to get event and target are very popular and unfortunately are necessary for maximum compatibility.
There are libraries like jQuery that facilitate these operations, but it's up to you whether you want to include it or not, and goes beyond the scope of the question.
Here is the code:
<!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>
One last tip: If you're confused by the || operator, you have a answer here in the SOpt which explains its operation well.
EDIT 2 (after the OP has shown the current code)
Based on your code posted in the pastebin, I realized that it was not the same structure as the example, and this influenced the response. The strategy I suggested was to group your inputs into a tag that would be the element in common of all. Then just call parentNode that it would find the parent element (which we put the class dados ), and from it you would find the children.
But in its actual code, the element in common with its inputs is two layers above% w / o, that is, the table row. In order to work, you must add <tr /> to .parentNode so it goes up two layers in the DOM. Something like this:
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);
}
In this way, you can remove the .parentNode div. It would look like this: link
