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.
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>
Related
Here is a dropdown menu of a website
<select name="ctl00$ddlWersjeJezykowe" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0)" id="ddlWersjeJezykowe" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
I want to change the language to English through browser console. I tried this on my console
document.getElementById("ddlWersjeJezykowe").value="2";
It only selects English but doesn't change the language. How can i change the language to English through my browser console?
Changing the value programmatically doesn't fire the onchange event, so you have to call setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0) too.
Alternatively, you can call document.getElementById("ddlWersjeJezykowe").onchange()
This is will get the selected value from select dropdown
<select id="language" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
function GetValue() {
var e = document.getElementById("language");
var result = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = result;
}
<button type="button" onclick="GetValue()">Get Selected Value</button>
<div id="result"></div>
I have a successful piece of javascript that when selecting from a drop down menu makes a text box or text area required. It however does not work with another drop down box. Any help would be appreciated.
Example: When selecting "Collection" from the first drop down, the drop down "Number_of_parcels" (which is always visible), becomes required. Nothing changes when selecting "Delivery" etc. I am stumped and any help would be appreciated.
JAVASCRIPT
function selection()
{
var cat = document.getElementById('Collection_Delivery').value;
if (cat == "Collection") {
if (document.getElementById("Number_of_parcels").value == "") {
alert('This must be completed');
return false;
}
}
return true;
}
HTML first drop down:
<select name="Collection_Delivery" id="Collection_Delivery" onChange="selection()">
<option disabled="disabled" selected="selected">-</option>
<option value="Delivery">Delivery</option>
<option value="Collection">Collection</option>
<option value="Collection and Delivery">Collection & Delivery</option>
</select>
HTML second drop down:
<select name="Number_of_parcels" id="Number_of_parcels">
<option value="" selected="selected">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="submit" value="Send" onClick="return checkForm(this.form);selection()" name="myButton">
i am not too good with java Script but trying to learn few things in different ways and this community always help me to learn such stuff.
i need some help from you guys again. below is my code and what i want is.
i have different dropdowns on a single page, with different buttons to run different queries in php. but i want to make sure that drop should have some selected value before proceeding to php query on button click. i am not able to perform this task, below is the sample which is definitely wrong. i want on button click "fun" Myfunction should run which should check that proper value is selected from drop down s1 and here s2 value is not required. and same is with 2nd button vice verse. kindly help and any idea would be appreciated.
function myFunction() {
document.getElementById("s1").value = "required"
}
function myFunction1() {
document.getElementById("s2").value = "required"
}
dd1:
<select id="s1">
<option>Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<br>dd2:
<select id="s2">
<option>Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br>
<br>
<button onclick="myFunction()">fun</button>
<button onclick="myFunction1()">fun1</button>
You have to check value of document.getElementById("s1").selectedIndex and ...(s2) as following:
function myFunction() {
var s1 = document.getElementById("s1").selectedIndex;
var s2 = document.getElementById("s2").selectedIndex;
if (s1<1 && s2<1) {
alert("Please select atleast one item from dropdowns!");
return false;
};
}
<html>
<body>
dd1:<select id="s1">
<option >Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br> <br>
dd2:<select id="s2">
<option >Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br><br>
<button onclick="myFunction()">fun</button>
<button onclick="myFunction()">fun1</button>
</body>
</html>
Using jQuery will do the trick. You just need to check the value of your select component. To achieve this, you should first add a value for when nothing is selected:
dd1:<select id="s1">
<option value="0">Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br> <br>
dd2:<select id="s2">
<option value="0">Select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="b">b</option>
</select>
<br><br>
Now, when nothing is selected, the value of your component will be 0. To check this values, you have to do something like this:
function myFunction() {
var selectedValue1 = $('#s1').val();
var selectedValue2 = $('#s2').val();
// check both values and do whatever
}
function myFunction1() {
var selectedValue1 = $('#s1').val();
var selectedValue2 = $('#s2').val();
// check both values and do whatever
}
Using vanilla
If you don't want to use jQuery for whatever the reason, you just have to change var selectedValue1 = $('#s1').val(); for var selectedValue1 = document.getElementById('s1').value;.
I hope this helps :)
I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/
I know this going to be a very basic question, but please be patient with me as I have just started using js and jquery.
Here is my part of code -
<html>
<head>
</head>
<body>
<form method="post" action="module.php">
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
<option value > Select Duration </option>
<option value="/module.php/?dateRange=1d">Last 24 Hours</option>
<option value="/module.php/?dateRange=2d">Last 2 Days</option>
<option value="/module.php/?dateRange=1w">Last Week</option>
<option value="/module.php/?dateRange=2w">Last 2 Weeks</option>
<option value="/module.php/?dateRange=1m">Last Month</option>
<option value="/module.php/?dateRange=3m">Last 3 Months</option>
<option value="/module.php/?dateRange=6m">Last 6 Months</option>
<option value="/module.php/?dateRange=1y">Last Year</option>
<option value="/module.php/?dateRange=all">All</option>
</select>
</form>
</body>
</html>
now I am not understanding how to write a onchange function where I can do all my query and dispplay my result when user selects any value from the dropdown list. And after that I would like to store the selected value in a variable and use that value in the same page ?
Lets say you give an id called mySelect to your select input.
Then you can define:
<script type="text/javascript">
$('#mySelect').on('change', function () {
// do your thing
});
</script>
The above attaches an onchange event (jQuery) to your element and will be triggered every time a user changes the selection.
you will use a handler
<html>
<head>
</head>
<body>
<form method="post" action="module.php">
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
<option value > Select Duration </option>
<option value="/module.php/?dateRange=1d">Last 24 Hours</option>
<option value="/module.php/?dateRange=2d">Last 2 Days</option>
<option value="/module.php/?dateRange=1w">Last Week</option>
<option value="/module.php/?dateRange=2w">Last 2 Weeks</option>
<option value="/module.php/?dateRange=1m">Last Month</option>
<option value="/module.php/?dateRange=3m">Last 3 Months</option>
<option value="/module.php/?dateRange=6m">Last 6 Months</option>
<option value="/module.php/?dateRange=1y">Last Year</option>
<option value="/module.php/?dateRange=all">All</option>
</select>
</form>
<script>
$( document ).ready(function() {
$( "select" )
.change(function () {
alert('OnChange happened');
//you can add your stuff here
});
})
});
</script>
</body>
</html>
I have created you a fiddle :)
it uses
$('#duration').on('change', function () {
var selectedEl = $('#duration').val();
console.log(selectedEl);
});
To detect a change in select and val() to get the selected option.
Instead of this :
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
Try This :
<select name="dateRange" size="1" onchange="submit();">
And in 'MODULE.php' get the selected value using :
$var = $_POST['dateRange'];
echo $var;
And then write your query..