Getting an option value to call a javascript function

Question

I'm trying to get an dropdown menu to call javascript functions. The option value seems to default to calling a web page, but I need it run the javascript instead. The javascript I'm using works great when using an onclick fucntion. How can I modify it so it works for my dropdown menu?

<html>
<head>
 <link rel="stylesheet" type="text/css" href="mystylesheet.css">

</head>
<body>



<form>
<p><b>Select a Staff Position </b>
<select onchange="window.open(this.value,'','');">
<option value="">Select one</option>
    <option value="myFunction1()">Illustrators</option>
    <option value="myFunction2()">Tech Writers</option>
     </p>
</select>

</form>

<script>

var iframeExists = false;

 function myFunction1() {
 var x
 if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
 } else {
  x = document.getElementsByTagName("IFRAME")[0];
 }
 x.setAttribute ("src", "http://www.oldgamer60.com/Project/Illustrators.php");
 document.body.appendChild(x);
 }

function myFunction2() {
var x;
if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
} else {
  x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
document.body.appendChild(x);
}



</script>







<br>

</body>
</html>

Jason · Accepted Answer · 2015-11-13 01:28:30Z

2

DRY code makes your life much simpler.

<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" type="text/css" href="mystylesheet.css">
</head>
<body>

<form>
<p><b>Select a Staff Position </b>
  <select id="mySelect" onchange="select_change()">
    <option value="">Select one</option>
    <option value="Illustrators">Illustrators</option>
    <option value="TechWriters">Tech Writers</option>
  </select>
</p>
</form>

<script>

var iframeExists = false;

function select_change() {
  var my_select = document.getElementById("mySelect");
  var my_select_value = my_select.options[my_select.selectedIndex].value;

  var x;
  if (!iframeExists) {
    x = document.createElement("IFRAME");
    iframeExists = true;
  } else {
    x = document.getElementsByTagName("IFRAME")[0];
  }
  if(my_select_value) {
    x.setAttribute("src", "http://www.oldgamer60.com/Project/" +
                          my_select_value + ".php");
    document.body.appendChild(x);    
  }
}

</script>

</body>
</html>

edited Nov 13, 2015 at 1:28

answered Nov 13, 2015 at 1:23

Jason

2,7333 gold badges16 silver badges22 bronze badges

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

1 Comment

Tony Over a year ago

So you changed the select id in the html tomySelect and the getElementById in the javascript to the same? I never considered that.

DanDooley · Accepted Answer · 2015-11-13 01:28:33Z

0

Not sure this is the best way to do it but it should provide a solution.

It's possible to store your functions in an object and then call them from a string using the following syntax:

object['nameOfFunction']();

So if we setup the script like so:

    function callFunction(){
        console.log('change');
        var e = document.getElementById('select');
        var value = e.options[e.selectedIndex].value;
        if (value !== "") {
            functions[value]();
        }
    }
    var functions = {
        myFunction1: function(){
            /*function1 code*/
        },
        myFunction2: function(){
            /*function2 code*/
        }
    };

So we've got an object 'functions' which has two members called 'myFunction1' and 'myFunction2'. We then have another function which pulls the value from the select and runs the selected function.

And your html like this:

<form>
    <p><b>Select a Staff Position </b>
        <select id="select" onchange="callFunction()">
            <option value="">Select one</option>
            <option value="myFunction1">Illustrators</option>
            <option value="myFunction2">Tech Writers</option>

    </select></p>

</form>

In the html we change the onchange to call our function selector and remove the brackets from the 'myFunction' values.

NOTE: You need to lay out your code so that the script is above the form, maybe in the header, otherwise the 'onchange=' can't access the 'callFunction' due to it not being defined.

EDIT: Take a look at the code here to see it in action: http://plnkr.co/edit/?p=preview

answered Nov 13, 2015 at 1:28

DanDooley

357 bronze badges

2 Comments

DanDooley Over a year ago

Jason's option is probably a better solution for what you want to do. Keep this in mind if you ever have multiple distinct functions to call.

Tony Over a year ago

I appreciate the help tonight. I did check @Jason option and it workd perfectly. I'll need to style the page a bit but it works exactly as I need it to.

Rahul Desai · Accepted Answer · 2015-11-13 01:40:29Z

0

Your HTML mark-up is incorrect. Your </p> is misplaced.

Use this:

<form>
  <p><b>Select a Staff Position </b>
    <select onchange="window.open(this.value,'','');">
      <option value="">Select one</option>
      <option value="myFunction1()">Illustrators</option>
      <option value="myFunction2()">Tech Writers</option>
    </select>
  </p>
</form>

Working demo (let it allow popups): https://jsbin.com/xesiyavilu/edit?html,js,output

Update 1:

The issue is that when you do <option value="myFunction1()">Illustrators</option> then myFunction1() is passed as a string.

Change your markup to:

<select onchange="popup(this.value)">
  <option value="">Select one</option>
  <option value="1">Illustrators</option>
  <option value="2">Tech Writers</option>
</select>

in your Javascript, change myFunction1() and myFunction2() to have it return some value, then add this function:

function popup(val){
  console.log('val: ' + val);
  if(val === '1'){
    //  call myFunction1() and get something in return;
  } else {
    //  call myFunction2() and get something in return;    
  }
  window.open(returnedValue,'','');
}

edited Nov 13, 2015 at 1:40

answered Nov 13, 2015 at 1:14

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

2 Comments

Tony Over a year ago

Thanks for finding that. It's still not he entire problem though. How can I get option value="myFunction1() to call myfunction1() in the javascript?

Rahul Desai Over a year ago

@Tony I see what you mean, but both are your functions arent returning anything. What do you want them to return?

Collectives™ on Stack Overflow

Getting an option value to call a javascript function

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related