2

Tenho dois input num formulário, que na verdade é um placar de um jogo. Quero que envie esse placar com focusout() quando o usuário preencher os dois campos do form.

Meu formulário está assim:

<form method="post" id="form1" action="teste2.php">
  <label>Time1</label>
  <input type="text" name="gols1" id="gols1">
  <label>Time2</label>
  <input type="text" name="gols2" id="gols2">
</form>

É um formulário simples com dois inputs e quero enviá-lo sem ter que colocar botão de enviar, quero que envie quando perder o foco.

1
  • Não faça isso, pense em seus usuários. S e o cara digitar algo errado, ou so clicar sem querer você já vai submeter os dados errados? E como vai validar se terminou de preencher? Se for quando o campo perder o foco o cara pode começar a digitar e clicar fora do form atoa e enviar sem querer... não recomendaria isso Commented 23/02/2016 às 23:35

2 Respostas 2

3

Pode aguardar pelo evento blur nos inputs e se ambos estiverem com um valor definido, o formulário será submetido.

(function() {

  var $gols1 = document.getElementById('gols1'),
      $gols2 = document.getElementById('gols2');

  function handleSubmit(){
    if ($gols1.value && $gols2.value)
      alert('Formulário enviado.');
  }

  $gols1.addEventListener('blur', handleSubmit);
  $gols2.addEventListener('blur', handleSubmit);
})();
<form method="post" id="form1" action="teste2.php">
  <label for='gols1'>Time1</label>
  <input type="text" name="gols1" id="gols1">
  <label for='gols2'>Time2</label>
  <input type="text" name="gols2" id="gols2">
</form>

No exemplo eu coloquei um alert() somente para mostrar o momento em que o formulário foi enviado. No seu caso, você enviaria o formulário substituindo o alert() por document.getElementById('form1').submit();.

1
  • Perfeito amigo! Obrigado pela ajuda!
    – user41251
    Commented 23/02/2016 às 23:50
1

olha, você não precisa de JavaScript para realizar isto, pode usar a tag required.

<form method="post" id="form1" action="teste2.php">
  <div>
    <label for="gols1">Time1</label>
    <input type="text" name="gols1" id="gols1" required />
  </div>
  <div>
    <label for="gols2">Time2</label>
    <input type="text" name="gols2" id="gols2" required />
  </div>
  <div>
    <input type="submit" name="enviar" id="enviar">
  </div>
</form>

2
  • Obrigado por responder amigo! Mas eu nao quero que tenha um botao submit no form, apenas os dois inputs, e quando ele preencher os dois e sair do input , envia o form
    – user41251
    Commented 23/02/2016 às 22:11
  • @user41251, vejo que alguem aqui andou faltando as aulas de UX. Commented 24/02/2016 às 11:29

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 .