How to submit a form automatically and without refresh?

Asked

Viewed 2,496 times

1

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

The code I tried, but it didn’t 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>
	<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>

The only problem is it’s taking too long.

javascript html

  • You’ll have to own the property onchange in your input pointing to a function, which so each time the value is changed goes to a given function, and within that function you use Ajax to submit the form

  • Thanks. I took a look and the event "oninput" sends in real time, while "onchange" only sends after you release the mouse. But it helped.

3 answers

4

Just be careful with some details.

  1. Using while, you will be sending multiple requests per second, this can cause an overload on the server, and believe this is not legal.
  2. Since you do not want a page refresh, then you cannot perform the form’s Ubmit, after all this will provoke Refresh, in this case use an AJAX request.

Below is an example of automatic sending of 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>

  • I am using the "oninput" event because, in my case, it would be interesting if the data were sent in real time or almost. The problem is that there is a delay in the data sent, as it sends each value in the range of numbers I selected. I need to get him to run just the last call made by the event.

  • What is your ultimate goal? Do you really need all the values? I cannot see a scenario where it is vital to send so many simultaneous requests to a server.

  • I needed to send the data to the server to update in real time. I will use this in an automation system. I will use the values for dimerization of lamps, control of fans, among other things. The idea in this case would be that the brightness would vary as the cursor moves. In a way similar to the windows volume control. At first it will work on a local network.

  • Right, you could open the development tools(F12), go to the network tab and see how long each AJAX request is taking?

  • @Carlos, I made some changes to the algorithm, now I’m only sending an AJAX request at a time, I put some console.log(), so you could follow the algorithm.

  • This code is not working very well. Sends a string of letters instead of numbers.

Show 1 more comment

2

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

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

Another way to do it is by using the addEventListener, if you wanted to use pure Javascript.

Thus:

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

  • Thanks ! I tried that way and it didn’t work at first, but using in conjunction with the "oninput" event worked. Now the problem is that it updates when it sends.

  • Interesting is that I received -1. But in question had no information either should be done an ajax. The goal is to submit the form when you select, or submit an ajax when you select? We’re talking about two different things.

  • @Carlos, I tested on Firefox 39 and it worked perfectly.

  • I didn’t give -1. So in case what I need is to send an ajax. I guess I didn’t specify well.

  • OK @Carlos. It’s just a little reminder. Some people give -1 and don’t explain why. In my opinion, it is good to leave this in the comments, for person to know where it can improve the content. Negative is a sign that something is wrong (or at least should be)

1

Create a javascript function to run Submit and call the function from the 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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.