how can select from drop down menu and call javascript function

Question

I have a drop down which has many options. I want that when I select any option then it calls a function through JavaScript.

the code which I used is here

<select name="aa" onchange="report(this.value)"> <--- this is function in .js
<option value="daily">daily</option>
<option value="monthly">monthly</option>
</select>

I want when I select daily then function(daily) is invoked and vice versa.

function report(daily)<-- js function {  
  loadXMLDoc('script/d_report.php','responseTag');
  document.getElementById('responseTag').style.visibility='visible';
  document.getElementById('list_report').style.visibility='hidden';
  document.getElementById('formTag').style.visibility='hidden'; 
} 
function report(monthly) {
  document.getElementById('responseTag').style.visibility='visible';
  loadXMLDoc('script/m_report.php','responseTag');
  document.getElementById('list_report').style.visibility='hidden';
  document.getElementById('formTag').style.visibility='hidden';
}

<select name="aa" onchange="report(this.value)"> <option value="daily">daily</option> <option value="monthly">monthly</option> </select> — sadi
– sadi, Commented Mar 16, 2011 at 9:47
function report(daily)<-- js function { loadXMLDoc('script/d_report.php','responseTag'); document.getElementById('responseTag').style.visibility='visible'; document.getElementById('list_report').style.visibility='hidden'; document.getElementById('formTag').style.visibility='hidden'; } function report(monthly) { document.getElementById('responseTag').style.visibility='visible'; loadXMLDoc('script/m_report.php','responseTag'); document.getElementById('list_report').style.visibility='hidden'; document.getElementById('formTag').style.visibility='hidden'; } — sadi
– sadi, Commented Mar 16, 2011 at 9:49

mplungjan · Accepted Answer · 2020-07-22 07:38:49Z

<select name="aa" onchange="report(this.value)"> 
  <option value="">Please select</option>
  <option value="daily">daily</option>
  <option value="monthly">monthly</option>
</select>

using

function report(period) {
  if (period=="") return; // please select - possibly you want something else here

  const report = "script/"+((period == "daily")?"d":"m")+"_report.php";
  loadXMLDoc(report,'responseTag');
  document.getElementById('responseTag').style.visibility='visible';
  document.getElementById('list_report').style.visibility='hidden';
  document.getElementById('formTag').style.visibility='hidden'; 
}

Unobtrusive version:

<select id="aa" name="aa"> 
  <option value="">Please select</option>
  <option value="daily">daily</option>
  <option value="monthly">monthly</option>
</select>

using

window.addEventListener("load",function() {
  document.getElementById("aa").addEventListener("change",function() {
    const period = this.value;
    if (period=="") return; // please select - possibly you want something else here

    const report = "script/"+((period == "daily")?"d":"m")+"_report.php";
    loadXMLDoc(report,'responseTag');
    document.getElementById('responseTag').style.visibility='visible';
    document.getElementById('list_report').style.visibility='hidden';
    document.getElementById('formTag').style.visibility='hidden'; 
  }); 
});

jQuery version - same select with ID

$(function() {
  $("#aa").on("change",function() {
    const period = this.value;
    if (period=="") return; // please select - possibly you want something else here

    var report = "script/"+((period == "daily")?"d":"m")+"_report.php";
    loadXMLDoc(report,'responseTag');
    $('#responseTag').show();
    $('#list_report').hide();
    $('#formTag').hide(); 
  }); 
});

mplungjan · Accepted Answer · 2011-03-16 10:04:41Z

2

Greetings if i get you right you need a JavaScript function that doing it

function report(v) {
//To Do
  switch(v) {
    case "daily":
      //Do something
      break;
    case "monthly":
      //Do somthing
      break;
    }
  }

Regards

edited Mar 16, 2011 at 10:04

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Mar 16, 2011 at 9:49

Marwan

2,4021 gold badge21 silver badges35 bronze badges

1 Comment

Marwan Over a year ago

i dont get u do u mean u need to enter it daily as enumeration not in "daily" ??

x2. · Accepted Answer · 2011-03-16 09:46:52Z

-1

<script type="text/javascript">
function report(func)
{
    func();
}

function daily()
{
    alert('daily');
}

function monthly()
{
    alert('monthly');
}
</script>

answered Mar 16, 2011 at 9:46

x2.

9,6586 gold badges43 silver badges63 bronze badges

1 Comment

mplungjan Over a year ago

The difference is which report to show. Why have multiple functions when all you need is a simple choice

Collectives™ on Stack Overflow

how can select from drop down menu and call javascript function

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related