CODEWITHSUNDEEP
javascripthtml
Tony
Tony

Reputation: 298

Getting an option value to call a javascript function

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>

Upvotes: 1

Views: 929

Answers (3)

Rahul Desai
Rahul Desai

Reputation: 15481

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,'','');
}

Upvotes: 0

DanDooley
DanDooley

Reputation: 35

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

Upvotes: 0

Jason
Jason

Reputation: 2743

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>

Upvotes: 2

Related Questions