3

Como posso enviar a informação do meu <input /> automaticamente? Queria que este processo automático fosse controlado pelo tamanho do campo do input. Por exemplo, quando o valor chegasse a 8 caracteres, ele enviar automaticamente e seguir para outra página. Neste caso o meu action="sucesso.php". Sei que isto é possivel usando o javascript mas não conheço muito da linguagem.

O meu código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<?php include 'func.php' ?>
<link href="index.css" rel="stylesheet"></link>
<link href="../Login/css/hover.css"></link>

</head>
<body>

<div class="container">
<form method="Post" action="sucesso.php" name="form">

 <div class="txtbox-container hvr-glow">
   <input type="text" name="txtbox" placeholder="Número do Cartão" autofocus>
 </div>

</form>
</div>
<p><label id="result"></label></p>
<script type="text/javascript">
document.form.submit()

</script>

</body>
</html>

Eu já tenho o script no código que envia automaticamente mas não tem esse controle de tamanho do campo feito.

2 Respostas 2

2

Você pode usar onKeyUp para ir verificando quantos digitos o cliente já digitou e após 8 digitos, submitar o form.

Ficaria assim:

<input id="edValue" type="text" onKeyUp="ValueKeyPress()">
    <script>
    function ValueKeyPress(){
       var edValue = document.getElementById("edValue").value;
       if(edValue.length >= 8){
            //submita o form.
       }     
    }
    <script>

Exemplo: https://jsfiddle.net/5v4xjj1a/1/

1
  • Muito bom, acho que a função onkeyup é a mais indicada para o caso! +1
    – Igor Mello
    4/05/2016 às 13:34
0

Deve-se monitorar o tamanho do valor do input através do evento onchange dele. Veja:

<input type="text" id="campo1" onkeypress="campo1_change(this);" />

<script>
function campo1_change(obj)
{
    if(obj.value.length < 8) return;
    document.forms[0].submit();
}   
</script>
2
  • Thiago, o unico problema de se usar onchange é que a função será chamado apenas se o usuario sair do campo, enquando ele escreve, a função não é chamada. Acho que a melhor forma seria usando Jquery keypress.
    – Matheus
    4/05/2016 às 12:10
  • hum, verdade. vou trocar por onkeypress, deve resolver. 4/05/2016 às 12:50

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 .