how can I make a page continuously refresh (auto-refresh) based on the value selected from a drop down menu? From Googling, this is what i have so far. Please refer to the code below.

<form> 
Update interval (in seconds): 
<select name="interval" id="interval"> 
<option value="5">10</option> 
<option value="10">10</option> 
<option value="15">15</option> 
<option value="20">20</option> 
</select> 
</form> 

<script type="text/JavaScript">
window.setTimeout('window.location="";', document.getElementById('interval').value*1000);
</script>

The problem I am facing right now, is that the page only refreshes in 5 seconds interval (first selection in drop down), no matter what value is selected. I am relative new to html and javascript, hopefully someone can help with this.

how can I make a page continuously refresh (auto-refresh) based on the value selected from a drop down menu? From Googling, this is what i have so far. Please refer to the code below.

<form> 
Update interval (in seconds): 
<select name="interval" id="interval"> 
<option value="5">10</option> 
<option value="10">10</option> 
<option value="15">15</option> 
<option value="20">20</option> 
</select> 
</form> 

<script type="text/JavaScript">
window.setTimeout('window.location="";', document.getElementById('interval').value*1000);
</script>

The problem I am facing right now, is that the page only refreshes in 5 seconds interval (first selection in drop down), no matter what value is selected. I am relative new to html and javascript, hopefully someone can help with this.

• javascript
• html

2 Answers 2

You need to do it on change of the select dropdown, otherwise it will just be based on the selected value on page load(5 in your sample code)

<form> 
  Update interval (in seconds): 
  <select name="interval" id="interval" onchange="window.setTimeout(function(){ document.location.reload(true); }, this.options[this.selectedIndex].value*1000);">
    <option value="" disabled selected>Make a Selection</option>
    <option value="5">5</option> 
    <option value="10">10</option> 
    <option value="15">15</option> 
    <option value="20">20</option> 
  </select> 
</form>

JS:

function updateInterval(e) {
  var options = e.options
  var seconds = options[options.selectedIndex].value

  if (this.currentInterval)
    clearInterval(this.currentInterval)

  if (!isNaN(seconds))
    this.currentInterval = setInterval(
      function() { location.reload() },
      seconds * 1000
    )
}

HTML:

<form>
  Update interval (in seconds):
  <select onChange="updateInterval(this)">
    <option>Select</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
  </select>
</form>