5 inputs e activar botão quando necessário

[Tiko165]

Estou a criar um formulário, e ele contem 5 inputs, todos eles só permitem numeros, e um botão de confirmação para enviar os dados para uma base de dados.


Algo deste genero: - http://jsfiddle.net/oood7co1/1/


O que eu pretendo, é o seguinte:
- Caso os 5 inputs estejam com valor 0, o botão esteja activo:
- Caso altere algum valor num dos inputs, o botão active, para fazer update na BD;
- Ao ler os valores no input da BD, só activar o botão, assim que tambem os valores forem alterados;


E pretendia tambem, saber como fazer,
Ao sair da página, caso tenha alterado um dos valores dos inputs, aparecer um aviso do genero "Quer sair sem gravar?".

Como posso fazer estes dois passos?

[Tiko165]

Pretendo fazer isto agora de outra forma.

Deram-me a ideia de colocar por exemplo uma variavel, com 0 e 1.
No inicio da página iniciaria sempre com valor 0, e caso alterasse algum valor no input, passaria a valor 1.

E sempre que o valor fosse 1, depois daria para activar o botão e tambem dar para aparecer o aviso de fecho de página.

Isto, desta forma, evito leitura na base de dados e torna-se muito mais simples.

Mas como faço isto num página sem refresh?

[Sandro2011]

com jquery:

<script>
$('.campos').change( function() {   // se tiver mudança nos campos:
   $('#botao').show();  // mostre o botao
});
$('#botao').click( function() {  // ao clicar no botao submit:
  $('#botao').hide();  //esconde o botao novamente

  //
  // para não recarregar a página, teria de fazer uma requisição ajax aqui. Use o ajax();
  // 

});
</script>

<form id='form1' action='index.php' method='post'>
    Input1: <input type='text' name='A' id='A' class="campos" value='0' maxlength='2'><br>
    Input2: <input type='text' name='B' id='B' class="campos" value='0' maxlength='2'><br>
    Input3: <input type='text' name='C' id='C' class="campos" value='0' maxlength='2'><br>
    Input4: <input type='text' name='D' id='D' class="campos" value='0' maxlength='2'><br>
    Input5: <input type='text' name='E' id='E' class="campos" value='0' maxlength='2'><br><br>
    <button type='submit' class='btn' id="botao" style="display: none;">Enviar dados</button>
</form>

[Tiko165]

Esse Jquery não me esta a funcionar. Porque?

[Tiko165]

Tenho este codigo, que sempre que altero algum valor em algum dos inputs, o botão "enviar" se activa.

Mas tambem gostava de saber como fazer, para activar o botão sempre que carrego no <a> "+" ou "-" (Que irá adicionar +1 valor no input, ou -1), pertencente a cada input.

http://jsfiddle.net/9frc9eo3/3/

[Sandro2011]

Tiko bom dia,

Para funcionar o Jquery você tem que carregar a biblioteca do Jquery antes.

<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>

[Tiko165]

Tiko bom dia,

Para funcionar o Jquery você tem que carregar a biblioteca do Jquery antes.

<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>

Olá, tudo bem?

Isso não me resolve. Resolveu com o 1.7.2.js

Mas no meu codigo, ao carregar nos links, só me funciona no primeiro <a> e nos seguintes não.

Como coloco a dar?

http://jsfiddle.net/9frc9eo3/5/

Editado Setembro 23, 2014 por Tiko165

[Sandro2011]

css:

p { margin: 0px; padding: 0px; }

Script, com jquery

$('.campos').change( function() {   // se tiver mudança nos campos:
   $('#botao').show();  // mostre o botao
});
$('#botao').click( function() {  // ao clicar no botao submit:
  $('#botao').hide();  //esconde o botao novamente

  //
  // para não recarregar a página, teria de fazer uma requisição ajax aqui. Use o ajax();
  // 

});
$('.mais').click( function() {
       a = parseInt($(this).parent().find('input').val());  // pega valor do input que está dentro do <p>
       a = a + 1;    // soma total do campo
       $(this).parent().find('input').val(a);   // atribui o valor no input
       $('.campos').trigger('change');  // ativa evento change
});
$('.menos').click( function() {
       a = parseInt($(this).parent().find('input').val());  // pega valor do input que está dentro do <p>
       a = a - 1;    // subtrai total do campo
       $(this).parent().find('input').val(a);  // atribui o valor no input
       $('.campos').trigger('change');   // ativa evento change
});

html

<form id='form1' action='index.php' method='post'>
    <p>Input1: <input type='text' name='A' id='A' class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <p>Input2: <input type='text' name='B' id='B' class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <p>Input3: <input type='text' name='C' id='C' class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <p>Input4: <input type='text' name='D' id='D' class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <p>Input5: <input type='text' name='E' id='E' class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <button type='submit' class='btn' id="botao" style="display: none;">Enviar dados</button>
</form>

funcionando com o + e -, ( embora você não queira com o + e - ... mas eu já tinha feito...)

Para mudar o campo quando clica, teria de usar o evento onKeyPress...

[Sandro2011]

<form id='form1' action='index.php' method='post'>
    <p>Input1: <input type='text' name='A' id='A' onkeyPress="$('.campos').trigger('change');" class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <p>Input2: <input type='text' name='B' id='B' onkeyPress="$('.campos').trigger('change');" class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <p>Input3: <input type='text' name='C' id='C' onkeyPress="$('.campos').trigger('change');" class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <p>Input4: <input type='text' name='D' id='D' onkeyPress="$('.campos').trigger('change');" class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <p>Input5: <input type='text' name='E' id='E' onkeyPress="$('.campos').trigger('change');" class="campos" value='0' maxlength='2'> <a class="mais" href='#'>+</a> / <a class="menos" href='#'>-</a></p>
    <button type='submit' class='btn' id="botao" style="display: none;">Enviar dados</button>
</form>

Pequena alteração para colocar o onkeypress

[Tiko165]

Eu não necessito de fazer as contas +1 ou -1 aos inputs.

Só preciso que active o botão ao carregar no +1 e -1 (Nada de contas nem somas)

Dê uma olhada aqui http://jsfiddle.net/9frc9eo3/5/ Que está mais explicito.

[Sandro2011]

devo entender que ao dizer 'carregar' você deva estar se referindo a 'salvar no BD' ?

[Tiko165]

devo entender que ao dizer 'carregar' você deva estar se referindo a 'salvar no BD' ?

Não amigo. Acho que não me estou fazer entender.

Carregar igual a Clicar :P

Vamos la tentar explicar de novo:

- Eu tenho 5 inputs;

- E tenho 5 links (<a>blabla</a>);

Neste momento sempre que clico e altero algum valor, o botão fica activo.

E tambem quero que ao clicar em algum link, o botão se active da mesma forma.

Editado Setembro 23, 2014 por Tiko165

[Sandro2011]

Tiko, mas já não está feito??? O código que eu fiz está bem completo.

Ao mudar o valor dos campos dos inputs, o botão submit fica ativo. E melhor: fica ativo assim que o usuário 'tecla' uma tecla qualquer dentro do input (com evento onkeypress)

[Tiko165]

Peço desculpa amigo, ele no inicio não me estava a dar, por isso é que insisti em perguntar aqui o porque.

Faltou-me colocar o Jquery 1.7.2 :p

[Tiko165]

Eu estou a utilizar Inputs Spinner e à um problem.

Input spinner é isto: http://jsfiddle.net/dancam/MCx2j/

Sandro2011, o seu código funciona correctamente, mas como utilizo no input o UP e um DOWN (os tais +1 e -1), no ficheiro Javascript que vem, no clique do <a>, a class já tem isto tudo, "ui-spinner-button ui-spinner-up ui-corner-tr", como posso adequar à sua class (mais/menos) que você mostrou?

Editado Setembro 23, 2014 por Tiko165

[Sandro2011]

Ok!

Adicione na class: class="mais ui-spinner-button ui-spinner-up ui-corner-tr"

[Tiko165]

$('.campos').change( function() {   // se tiver mudança nos campos:
	document.getElementById('botao').disabled = false;
	
	window.onbeforeunload = function(e) {
		return 'Deseja mesmo sair?';
	};
});

Sempre que activar o Botão, vou depois querer colocar uma mensagem de aviso caso a pessoa queira sair da página.

Mas como faço isso, para não executar quando carrego no botão do form?

Editado Setembro 23, 2014 por Tiko165

[Sandro2011]

Tiko, se for ativar um 'confirm' após o clique do submit, tem de criar um novo evento com Jquery:

$('#botao').click(function(){
   if confirm('Deseja sair?') { // codigo para sair
      }
    else { // codigo se for ficar , ou omita, se não quiser fazer nada 
      }
});

[Tiko165]

Tiko, se for ativar um 'confirm' após o clique do submit, tem de criar um novo evento com Jquery:

$('#botao').click(function(){
   if confirm('Deseja sair?') { // codigo para sair
      }
    else { // codigo se for ficar , ou omita, se não quiser fazer nada 
      }
});

Isso dessa forma não me funciona, pois deixa todo o script de funcionar :/