0

Tenho mais de um Button dentro do form. E preciso que um deles ao clicado realize uma função javascript enquanto que o outro realize o submit. Mas acontece que os dois estão realizando o submit, e eu preciso que o button esteja dentro do formulario. O botão "Confirmar" realiza o submit e o outro deveria realizar a funcao olho(), mas ele tbm ta funcionando como submit, mesmo sendo do tipo button. Ai eu teria que impedir o evento submit e realizar a funcao olho(), mas nao to conseguindo fazer. Agradeço desde já.

function olho() {
    if (document.getElementById('senha').type == 'password') {
        document.getElementById('senha').type = 'text';
        var img = document.getElementById('img-olho');
        img.src = 'img/olho-fechado.svg';
    } else {
        document.getElementById('senha').type = 'password';
        var img = document.getElementById('img-olho');
        img.src = 'img/olho-aberto.svg';
    }   
}
<form id="form" method="POST" action="#">
		<label id="label-user">Usuário:</label>
			<input type="text" name="usuario" id="usuario" placeholder="Digite seu email..."><br>
		<label id="label-senha">Senha:</label>
			<input type="password" name="senha" id="senha" placeholder="Digite a senha...">
			<button type="button" onclick="olho()" id="olho"><img id="img-olho" src="img/olho-aberto.svg"/></button>
		<button type="submit" id="botao">Confirmar</button>
</form>

1 Resposta 1

0

Então, se o button não for do tipo submit não tem por que o formulário ser enviado, como pode ver no exemplo. Se clicar no botão com a imagem o form não é submetido e executa a função que lhe aconselho trocar de nome, pois pode haver problemas com o id do botão:

function olhos() {
  if (document.getElementById('senha').type == 'password') {
    document.getElementById('senha').type = 'text';
    var img = document.getElementById('img-olho');
    img.src = 'img/olho-fechado.svg';
    console.log('Não enviou');
  } else {
    document.getElementById('senha').type = 'password';
    var img = document.getElementById('img-olho');
    img.src = 'img/olho-aberto.svg';
  }
}
<form id="form" method="POST" action="#">
  <label id="label-user">Usuário:</label>
  <input type="text" name="usuario" id="usuario" placeholder="Digite seu email..."><br>
  <label id="label-senha">Senha:</label>
  <input type="password" name="senha" id="senha" placeholder="Digite a senha...">
  <button type="button" onclick="olhos()" id="olho"><img id="img-olho" src="img/olho-aberto.svg"/></button>
  <button type="submit" id="botao">Confirmar</button>
</form>

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 .