How to give Enter and change the field in an HTML form?

Navigation
0

How do you go about an HTML form that changes from one field to another when you press the Enter key? (It naturally changes by pressing TAB.)

There is already a topic related to this subject, however, where to put the code in Javascript? Is it in <body> or <head> ? It does not have to reference the <form> that contains the TextFields? 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><body><formid="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>
    
asked by anonymous 28.06.2018 / 22:43

1 answer

1

You can do this by focusing on the next field in the next row of the table (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><formid="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>
    
05.07.2018 / 22:02
How to insert onCreateOptionsMenu into a Java class? How to encrypt StringConnection for a remote MySql database in C #