How to submit a form automatically and without refresh?

Question

How to submit a form automatically and without refresh?

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (1 votes)

1

On my page there is a form where the user chooses a numeric value. I want whenever the user changes the value, the form is sent, without the need to press the "send" button.

The code I tried, but it did not work:

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>

I'm using the following code now.

	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><formid="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>

The only problem is that it's giving way too late.

javascript html

asked by anonymous 17.09.2015 / 16:49

3 answers

How to edit a Partial Class? How do I put a button inside an iframe

score 4 · Answer 1

Just be careful with a few details.

Using the while, you will be sent multiple requests per second, this can cause an overload on the server, and believe this is not legal.

As you do not want a Refresh of the page, then you can not submit the form submit, this will eventually cause Refresh, in this case use an AJAX request.

Below is an example of automatic submission of the Form via 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>

score 2 · Answer 2

The simplest way to do this would be with change of jQuery .

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

Another way to do this is to use addEventListener , if you wanted to use pure Javascript.

So:

document.querySelector('#number').addEventListener('change', function ()
{
    document.querySelector('#form').submit();
})

score 1 · Answer 3

Create a javascript function to execute submit and call the function by event 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>