1

Em minha página tem um formulário onde o usuário escolhe um valor numérico. Quero que sempre que o usuário mude o valor, o formulário seja enviado, sem a necessidade de pressionar o botão "enviar".

O código que eu tentei, mas não funcionou:

var valor = document.txtForm.valor.value;
var valorant = document.txtForm.valor.value;

while(1){
	valor = document.txtForm.valor.value;
	if(valor != valorant){
		document.valor_analog.submit(); 
	}
	valorant = document.txtForm.valor.value;
}
<html>

<body>
	<script src="env_aut.js"></script>
	<form name ="valor_analog" action="http://192.168.0.3/" method="POST">
		<input name="valor" type="range" min="100" max="500" step="10" />
		<input type="submit" value="Submit">
	</form>
</body>
</html>

Estou utilizando o seguinte código agora.

	function envia(){
		$.post("http://192.168.0.3/",{valor: $("#valor").val()},function(){});
	}
<html>

<body>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<form id="valor_analog" action="http://192.168.0.3/" method="POST">
		<input name="valor" id="valor" type="range" min="100" max="500" step="10" oninput="envia()"/>
		<input type="submit" value="Submit">
	</form>
</body>
</html>

O único problema é que está dando muito atraso.

2
  • Terás de ter a propriedade onchange na tua input a apontar para uma função, que assim cada vez que o valor é alterado vai para uma dada função, e dentro dessa função usas Ajax para submeter o formulário Commented 17/09/2015 às 14:54
  • Obrigado. Dei uma olhada e o evento "oninput" envia em tempo real, enquanto "onchange" só envia depois que solta-se o mouse. Mas ajudou.
    – Carlos
    Commented 17/09/2015 às 15:39

3 Respostas 3

4

Apenas tome cuidado com alguns detalhes.

  1. Utilizando o while, você estará enviado varias requisições por segundo, isto pode causar uma sobrecarga no servidor, e acredite isto não é legal.
  2. Como você não quer um Refresh da pagina, então não pode realizar o submit do form, afinal isto irá provocar o Refresh, neste caso use uma requisição AJAX.

Abaixo segue um exemplo de envio automático do Form por AJAX.

var valor = document.getElementById("valor");
var valorAnalog = document.getElementById("valor_analog");

var enviando = false;
var formData = null;
var xmlHttp = new XMLHttpRequest();


xmlHttp.timeout = 500; //meio segundo;
xmlHttp.addEventListener("readystatechange", function (event) {
  var finalizado = event.target.readyState == 4;  
  if (finalizado) {
    var sucesso = event.target.status == 200;
    console.log("termino envio");
    enviando = false;
    enviarForm();
  }  
});

var enviarForm = function () {
  if (formData) {
    console.log("input: " + formData + " " + (enviando ? "não enviado" : "enviado"));
    if (!enviando) {
      console.log("inicio envio");
      enviando = true;   
      xmlHttp.open(valorAnalog.method, valorAnalog.action);
      xmlHttp.send(formData);
      formData = null;
    }
  }
}

valor.addEventListener("input", function (event) {
  formData = new FormData(valorAnalog);
  enviarForm();
});
<form id="valor_analog" method="POST"  action="http://192.168.0.3/" >
  <input id="valor" name="valor" type="range" min="100" max="500" step="10" />
</form>

6
  • Estou usando o evento "oninput" porque, no meu caso, seria interessante que os dados fossem enviados em tempo real ou quase. O problema é que está ocorrendo um atraso nos dados enviados, pois ele envia cada valor no intervalo de números que eu selecionei. Eu preciso fazer com que ele execute apenas a ultima chamada feita pelo evento.
    – Carlos
    Commented 17/09/2015 às 17:30
  • Qual o seu objetivo final? você realmente precisa de todos os valores? não consigo ver um cenário onde seja vital enviar tantas requisições simultâneas a um servidor. Commented 17/09/2015 às 19:18
  • Eu precisava enviar os dados para o servidor atualizar em tempo real. Vou usar isso em um sistema de automação. Usarei os valores para dimerização de lâmpadas, controle de ventiladores, entre outras coisas. A idéia nesse caso seria que a luminosidade variasse conforme se move o cursor. De um jeito parecido com o controle de volume do windows. A princípio vai funcionar em uma rede local.
    – Carlos
    Commented 17/09/2015 às 19:38
  • Certo, você poderia abrir as ferramentas de desenvolvimento(F12), ir na aba de rede e ver quanto tempo cada requisição AJAX está demorando? Commented 17/09/2015 às 20:08
  • @Carlos, realizei algumas alterações no algoritmo, agora estou enviando apenas uma requisição AJAX por vez, coloquei alguns console.log(), para que você pudesse acompanhar o algoritmo. Commented 18/09/2015 às 15:12
2

A maneira mais simples para isso seria com change do jQuery.

$('[name=valor]').change(function ()
{
    $('[name=valor_analog]').submit();
});

Outra maneira de fazer é utilizando o addEventListener, caso queria utilizar o Javascript puro.

Assim:

document.querySelector('#number').addEventListener('change', function ()
{
    document.querySelector('#form').submit();
})
5
  • Obrigado ! Eu tentei dessa forma e não funcionou a princípio, mas usando em conjunto com o evento "oninput" funcinou. Agora o problema é que atualiza quando envia.
    – Carlos
    Commented 17/09/2015 às 15:44
  • Interessante é que eu recebi -1. Mas na pergunta não tinha nenhuma informação quer deveria ser feito um ajax. O objetivo é enviar o formulário quando seleciona, ou enviar um ajax quando seleciona? Estamos falando de duas coisas diferentes. Commented 18/09/2015 às 11:36
  • @Carlos, eu testei no Firefox 39 e funcionou perfeitamente. Commented 18/09/2015 às 11:39
  • Eu não dei -1. Então no caso o que eu preciso é enviar uma ajax. Acho que eu não especifiquei bem.
    – Carlos
    Commented 18/09/2015 às 15:41
  • Ok @Carlos. É só um pequeno lembrete. Algumas pessoas dão -1 e não explicam o por quê. Na minha opnião, é bom deixar isso nos comentários, pra pessoa saber onde ela pode melhorar o conteúdo. Negativos é sinal que tem algo errado (ou pelo menos deveria ser) Commented 18/09/2015 às 15:43
1

Crie uma funcao javascript para executar o submit e chame a função pelo evento onchange

function enviaSubmit(){
    var valor = document.txtForm.valor.value;
    var valorant = document.txtForm.valor.value;
    valor = document.txtForm.valor.value;
    if(valor != valorant){
        document.valor_analog.submit(); 
    }
    valorant = document.txtForm.valor.value;
} 
<html>

<body>
	<script src="env_aut.js"></script>
	<form name ="valor_analog" action="http://192.168.0.3/" method="POST">
		<input name="valor" type="range" min="100" max="500" step="10" onchange="enviaSubmit()" />
		<input type="submit" value="Submit">
	</form>
</body>
</html>

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 .