Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

3 second timeout then post

Hi,

I have a form with a series of checkboxes and dropdown lists. Currently the form is submitted using a button that calls a function 'postData(this)'. However, I would like to change this so that the form no longer requires a button but will submit after 3 seconds of one of the elements being changed.

If checkbox a is checked, the 3 seconds countdown will start, if another checkbox is checked in that time the 3 seconds is reset and starts again.

How would I go about introducing this?

Thanks
Alex
0
Al4ddin2
Asked:
Al4ddin2
2 Solutions
 
Rainer JeschorCommented:
Hi Alex,
this should do the trick:
var timeoutHandle = null;
$(document).ready(function () {
    $('select').on("change", ResetTimeout );
    $('input[type=checkbox]').on("change", ResetTimeout );
});

function ResetTimeout() {
    if (timeoutHandle != null)
    {
        window.clearTimeout(timeoutHandle);
    }
    timeoutHandle = window.setTimeout(SubmitMyForm, 3000);
}
function SubmitMyForm() {
    // Normally you will have here the submit - now we use just an alert
    alert('Form would have been submitted now');
}

Open in new window


Sample:
http://jsfiddle.net/EE_RainerJ/N2xb9/

HTH
Rainer
0
 
Tom BeckCommented:
Simple Javascript.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
var restart = true;
function timedSubmit() {
	restart = true;	
	var t = setTimeout(function() {
		if (!restart) {		
			document.getElementById('form1').submit();
		}	
		restart = false;
	}, 3000);	
}
</script>
</head>
<body>
<form id="form1">
<input type="checkbox" onChange="timedSubmit()" />
<input type="checkbox" onChange="timedSubmit()" />
<input type="checkbox" onChange="timedSubmit()" />
<input type="checkbox" onChange="timedSubmit()" />
</form>
</body>
</html>

Open in new window

0
 
COBOLdinosaurCommented:
Well I think the coding being presented gives you an answer, I think you realllllllllllly need to think about what you are doing to usability.  Not everyone responds or does things at the same speed; and sometimes users need to go back and correct something.

You are just guaranteeing the the number of incorrect/invalid submissions you get will increase.

What possible reason could you have for wanting to do such a thing? if you explain, maybe we can give you a more user friendly way of doing what you need to do.

Cd&
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Al4ddin2Author Commented:
Well essentially this will be used for filtering so they can select a number of checkboxes that will effect the results displayed. It won't really generate 'incorrect submissions' but I understand it may have a load impact on the server.

Thanks, I'll wil give these answers a go.
0
 
Al4ddin2Author Commented:
Also, is it possible to do something like this?

timeoutHandle = window.setTimeout(SubmitMyForm(param), 3000);
or SubmitMyForm($(this))?

Thanks
0
 
Rainer JeschorCommented:
Hi,
sure. It is just that you have to create your inline function.

function ResetTimeout() {
    if (timeoutHandle != null)
    {
        window.clearTimeout(timeoutHandle);
    }
    timeoutHandle = window.setTimeout(function () {  // code comes here }, 3000);
}

Open in new window

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now