Forum Moderators: open
If a user uses TAB and PgDn to quickly go through all the SELECTS, then it will hammer the server since it will be submitting the form several times.
How can I delay the onChange so that it will submit only after the user stops, or pauses for "X" seconds?
I thought about having onChange call a function to use setTimeOut() and clearTimeOut() to cancel the previously set timer, but there has to be a more "elegant" solution.
<table>
<form action="hi.php" target="main">
<tr>
<td>
<select onchange="this.form.submit()"><option>0</option><option>1</option></select><br />
<select onchange="this.form.submit()"><option>0</option><option>1</option></select><br />
<select onchange="this.form.submit()"><option>0</option><option>1</option></select><br />
</td>
<td>
<iframe src="hi.php" width="100px" height="50px" name="main"></iframe>
</td>
</tr>
</form>
</table>
I suppose if there's a good reason for this, yes, I'd do onChange="some_function(this.form);" where some_function checks the state of some global variable and if it's not been reset in x seconds does the submit. Would be a little confusing to the user though, very eBay-like. :-)
<head>
<script type="text/javascript">
var timeoutID = 0;
function delayChange() {
clearTimeout(timeoutID);
timeoutID = setTimeout("document.form1.submit();", 500);
}
</script>
</head>
<body>
<table>
<form name="form1" action="script.php" target="main">
<tr>
<td>
<select onchange="delayChange()"><option>1</option><option>2</option></select><br />
<select onchange="delayChange()"><option>3</option><option>4</option></select><br />
<select onchange="delayChange()"><option>5</option><option>6</option></select><br />
</td>
<td>
<iframe src="script.php" width="100px" height="50px"
name="main"></iframe>
</td>
</tr>
</form>
</table>
</body>
