How to enter and change the field in an HTML form?

Asked

Viewed 3,351 times

1

How to make in an HTML form it changes from one field to another later when pressing the key Enter? (It naturally changes by pressing TAB).

There is already a topic related to this subject, however, where to put the code in Javascript? It is in <body> or in the <head>? He doesn’t have to reference the <form> containing the Textfields?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<body>
  <form id="documento" name="documento" method="post" action="inclusao.php" onsubmit="return validaCampo(); return false;">
    <table width="100%" border="0">
      <tr>
        <th colspan="2" align="center" valign="top">
          <h3>Cadastro de Documento </h3>
        </th>
      </tr>
      <tr>
        <td width="138">CPF/CNPJ:</td>
        <td width="835"><input name="CNPJ" type="text" id="CNPJ" size="20" maxlength="14" />
          <span class="style1">*</span> <span class="style3">somente n&uacute;meros</span></td>
      </tr>
      <tr>
        <td>Data Recebimento:</td>
        <td>
          <input type="text" name="DataRec" id="DataRec" size="10" maxlength="10" /> <span class="style1">*</span>
        </td>
      </tr>
      <tr>
        <td>Tipo de Documento:</td>
        <td>
          <select name="TipDoc" id="TipDoc">
            <option value="NF">NF</option>
            <option value="CTO">CTO</option>
            <option value="MTO">MTO</option>
            <option value="OUTROS">OUTROS</option>
          </select> <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>N&uacute;mero do Documento.:</td>
        <td><input type="tel" name="NumNFC" id="NumNFC" size="9" maxlength="9" /> <span class="style1">*</span></td>

      </tr>
      <tr>
        <td>Quantidade (Volume)</td>
        <td><input name="QTDVol" type="tel" id="QTDVol" size="4" maxlength="4" /> <span class="style1">*</span> <span class="style3">em litros</span></td>
      </tr>
      <tr>
        <td>Processo</td>
        <td><input name="proces" type="text" id="proces" size="14" maxlength="14" /> <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>Local de Entrega:</td>
        <td><input name="CDRDES" type="text" id="CDRDES" maxlength="15" size="15" />
          <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>Fornecedor:</td>
        <td> <input name="FORNEC" type="text" id="FORNEC" maxlength="20" size="20" /> <span class="style1">*</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p>
            <input name="cadastrar" type="submit" id="cadastrar" value="Confirmar" />
            <br />
            <input name="limpar" type="reset" id="limpar" value="Limpar Campos preenchidos!" />
            <br />
            <span class="style1">* Campos com * s&atilde;o obrigat&oacute;rios!          </span></p>
          <p>&nbsp; </p>
        </td>
      </tr>
    </table>
  </form>
</body>

javascript html
  • 1

    Depending on the application, I would discourage you from doing this, as it is altering the application’s natural behavior and this can be awkward for the user

  • Hello @dvd, the link to this other question does not use a '<table>'. Use the '<div>'. Putting the same code in the '<body>' of this code here, Enter does not work to change to the next '<input>'.

2 answers

3


You can do so by focusing on the next field of the next table row (explanations in the code):

$("input, select", "form") // busca input e select no form
.keypress(function(e){ // evento ao presionar uma tecla válida keypress
   
   var k = e.which || e.keyCode; // pega o código do evento
   
   if(k == 13){ // se for ENTER
      e.preventDefault(); // cancela o submit
      $(this)
      .closest('tr') // seleciona a linha atual
      .next() // seleciona a próxima linha
      .find('input, select') // busca input ou select
      .first() // seleciona o primeiro que encontrar
      .focus(); // foca no elemento
   }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="documento" name="documento" method="post" action="inclusao.php" onsubmit="return validaCampo(); return false;">
    <table width="100%" border="0">
      <tr>
        <th colspan="2" align="center" valign="top">
          <h3>Cadastro de Documento </h3>
        </th>
      </tr>
      <tr>
        <td width="138">CPF/CNPJ:</td>
        <td width="835"><input name="CNPJ" type="text" id="CNPJ" size="20" maxlength="14" />
          <span class="style1">*</span> <span class="style3">somente n&uacute;meros</span></td>
      </tr>
      <tr>
        <td>Data Recebimento:</td>
        <td>
          <input type="text" name="DataRec" id="DataRec" size="10" maxlength="10" /> <span class="style1">*</span>
        </td>
      </tr>
      <tr>
        <td>Tipo de Documento:</td>
        <td>
          <select name="TipDoc" id="TipDoc">
            <option value="NF">NF</option>
            <option value="CTO">CTO</option>
            <option value="MTO">MTO</option>
            <option value="OUTROS">OUTROS</option>
          </select> <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>N&uacute;mero do Documento.:</td>
        <td><input type="tel" name="NumNFC" id="NumNFC" size="9" maxlength="9" /> <span class="style1">*</span></td>

      </tr>
      <tr>
        <td>Quantidade (Volume)</td>
        <td><input name="QTDVol" type="tel" id="QTDVol" size="4" maxlength="4" /> <span class="style1">*</span> <span class="style3">em litros</span></td>
      </tr>
      <tr>
        <td>Processo</td>
        <td><input name="proces" type="text" id="proces" size="14" maxlength="14" /> <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>Local de Entrega:</td>
        <td><input name="CDRDES" type="text" id="CDRDES" maxlength="15" size="15" />
          <span class="style1">*</span></td>
      </tr>
      <tr>
        <td>Fornecedor:</td>
        <td> <input name="FORNEC" type="text" id="FORNEC" maxlength="20" size="20" /> <span class="style1">*</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <p>
            <input name="cadastrar" type="submit" id="cadastrar" value="Confirmar" />
            <br />
            <input name="limpar" type="reset" id="limpar" value="Limpar Campos preenchidos!" />
            <br />
            <span class="style1">* Campos com * s&atilde;o obrigat&oacute;rios!          </span></p>
          <p>&nbsp; </p>
        </td>
      </tr>
    </table>
  </form>

  • Hello. How did you make him not understand how Ubmit with Enter (because you still understand how Ubmit)? Where is the location you placed the first part of the code?

  • Dude, I usually put after the form, but can put before with $(Document). ready(Function(){})

  • @Sam how to adapt the code to jump to the next form field, change . Closest('tr') for the same behavior only with the field in focus? I made an adjustment but it did not result in anything.

  • @Eliseub. Make a Jsfiddle and send me there I see.

  • 1

    @Sam managed to solve, I used the Closest in the inputs elements as in his code and eliminated a node, thank you.

0

<html>
<body>

<script type="text/javascript">

    function EnterTab(InputId,Evento){

        if(Evento.keyCode == 13){       

            document.getElementById(InputId).focus();

        }

    }

</script>

<input type="editbox" id="input1" onkeydown="javascript:EnterTab('input2',event)">
<p>
<input type="editbox" id="input2" onkeydown="javascript:EnterTab('input3',event)">
<p>
<input type="editbox" id="input3" onkeydown="javascript:EnterTab('input4',event)">
<p>
<input type="checkbox" id="input4" onkeydown="javascript:EnterTab('input5',event)">
<p>

<input type="submit" id="input5">

</body>
</html>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.