Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

TAKUMA

Ativar submit com valor

Por , em Javascript

Recommended Posts

TAKUMA    0

TAKUMA
Postado

Boa noite.

 

Preciso de ajuda para criar um código onde o botão submit seja ativado somente se colocar o valor que no caso seria um número, tenho um código base mas já quebrei a cabeça e não consegui fazer.

 

Como seria?

 

O botão submit do form fica desabilitado, mas quando inserir um número exemplo 1, ele seria ativado.

 

Já pensei em tentar modificar um captcha, mas acho que vai dar muito trabalho, abaixo estou colocando o código base que usa um campo de texto que é ativado só de digitar algo, eu gostaria que ele fosse ativado quando digitasse o número.

 

Se alguém tiver o código ou souber como modificar esse para o que eu quero, eu ficaria muito grato.

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function validate() {
    var inputvalue = $('input[type="text"]').filter(function (n) {
        return this.value.length > 0;
    })
  
    if (inputvalue.length == $('input[type="text"]').length) {
        $("input[type=submit]").prop("disabled", false);
    } else {

        $("input[type=submit]").prop("disabled", true);
    }
}

validate();
$('input[type="text"]').keyup(validate);


});//]]> 

</script>

<input type="text" id="test" />

<input type="submit" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

semavap.

 

Fiz um código de exemplo utilizando VanillaJS (JavaScript Puro).

 

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Ativar Submit</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="form.css">
</head>
<body>
  <form class="form">
    <label for="age" class="form-label">Idade</label>
    <input type="text" class="form-number" id="age">

    <input type="submit" value="Enviar" class="form-button" disabled>
  </form>

  <script src="form.js"></script>
</body>
</html>

CSS (reset.css)

* {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #FFF:
}

a {
  color: inherit;
  text-decoration: none;
}

CSS (form.css)

.form {
  background-color: #EEE;
  width: 40%;
  height: 40%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5em;
}
.form-label {
  display: block;
  font-size: 1.8em;
  text-align: center;
  margin-bottom: .5em;
  text-transform: uppercase;
}
.form-number {
  display: block;
  width: 40%;
  height: 15%;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2em;
  padding: .2em 2%;
  margin-bottom: .5em;
}
.form-button {
  background-color: #2969B0;
  color: #FFF;
  font-size: 1.2em;
  display: block;
  height: 20%;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}
.form-button:disabled {
  background-color: #CCC;
}

JavaScirpt

(function () {
  'use strict';

  var $formNumber = document.querySelector('.form-number');
  var $formButton = document.querySelector('.form-button');

  $formNumber.addEventListener('keyup', function(event) {
    var onlyNumber = /[0-9]/g; //Regex pra apenas números
    var onlyText = /[A-Za-z]/g; //Regex pra apenas letras
    var $this = this;

    $this.value = $this.value.replace(onlyText, '');

    if (onlyNumber.test($this.value)) {
      $formButton.removeAttribute('disabled');
    } else {
      $formButton.setAttribute('disabled', 'true');
    };
  });
})();

Qualquer dúvida só falar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

TAKUMA    0

TAKUMA
Postado

Agradeço mas consegui resolver isso já, o que eu estou tentando agora é como implementar um sistema de contagem individual exemplo:

 

Cadastrei o produto 1 então fica gravado 1... cadastrei o 2 então ele soma o e da 2, mas isso isso tem que ser feito 1 para cada conta, as outras contas não podem usar o mesmo sistema.

 

Estou quebrando a cabeça nisso faz tempo, estou pensando em montar algo no BD

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito