Javascript onchange function

Question

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 ?

Omri Aharon · Accepted Answer · 2014-04-16 08:50:13Z

2

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.

answered Apr 16, 2014 at 8:50

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Satish Over a year ago

I tried doing the same ... I created a fiddle It runs once and than gives error there.. but on browser it dose not show alert msg and moreover when I select any of the option from the dropdown list it changes the url but again shows "select duration"

Omri Aharon Over a year ago

@Satish Are you sure? Your fiddle works perfectly :)

Omri Aharon Over a year ago

@Satish Only thing that happens is that your selection fires the value. What exactly do you want to present ?

Satish Over a year ago

no fiddle is not working properly, and atleast with fiddle it is showing alert msg but on browser it does not do that even

Omri Aharon Over a year ago

@Satish unfortunately php is outside my scope of expertise, but to get the value you should write $('#mySelect').val() where I wrote "do your thing".

|

bovino Marcelo Bezerra · Accepted Answer · 2014-04-16 08:55:58Z

1

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>

edited Apr 16, 2014 at 8:55

answered Apr 16, 2014 at 8:50

bovino Marcelo Bezerra

2,05217 silver badges31 bronze badges

1 Comment

bovino Marcelo Bezerra Over a year ago

what part is confusing? i tried to create the handler using the same form code given in the question (i guess it will make it easier for the user to understand where / how he can add the handler code), but i can edit it if you prefer

Callum Linington · Accepted Answer · 2014-04-16 08:51:05Z

0

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.

answered Apr 16, 2014 at 8:51

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

Comments

Jatin · Accepted Answer · 2014-04-16 09:24:14Z

0

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..

edited Apr 16, 2014 at 9:24

answered Apr 16, 2014 at 8:53

Jatin

11 bronze badge

Collectives™ on Stack Overflow

Javascript onchange function

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related