Using code by calling a function

samuvk · 12-16-2012, 04:41 AM

Can I create a code in some way that I can use the same code by just calling it?

I'll explain myself better.

I have this code to show a selector.

Code:

<select id="mySelect" onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href=this.options[this.selectedIndex].value}">
<option>Select an option</option>
<option value="http://www.google.com">Orange</option>
<option value="http://www.google.com">Pineapple</option>
<option value="http://www.google.com">Banana</option>
</select>

I want to use the same code in all the pages of my site, but I don't want to copy and paste the code.

Could I do something like giving a name to the script let say: MySelect

and the just do something like: call MySelect

so it will write the selector whatever I write call Myselect or something like that?

It would work a solution in Javascripg, .css or JQuery

Thank you so much

AndrewGSW · 12-16-2012, 10:33 AM

Yes, it is called a function, just as you mention in your title(?).

Philip M · 12-16-2012, 10:52 AM

Does he mean he wants to remove the script from inline and place it in a separate function?

Code:

<select id="mySelect" onchange="changeURL(this)">
<option value = "">Select an option</option>
<option value="http://www.google.com">Orange</option>
<option value="http://www.google.com">Pineapple</option>
<option value="http://www.google.com">Banana</option>
</select>

<script type = "text/javascript">
function changeURL(which) {  // note that the name of the function must be unique!
var val = which.value;
if (val !="") {
window.location.href = val;
}
}

</script>

If you mean you want to include that same code in all your web pages, then indeed copy and paste is the answer.

felgall · 12-16-2012, 06:37 PM

Quote:

Originally Posted by Philip M

If you mean you want to include that same code in all your web pages, then indeed copy and paste is the answer.

Or any of the many varieties of server side include.

Old Pedant · 12-17-2012, 07:47 AM

I think he means that he does *NOT* want to have to write the [icode] ... onchange="..."...[/icpde] and that he wants the onchange event to automatically be added on all pages.

SAMUVK: If indeed that is what you mean, I'd suggest using a CSS class name to indicate which <select>s you want to attach the code to.

Code:

<select class="urlSelector">
...
</select>

And then have a "urlSelector.js" file that you include on each page.

If you include the file *JUST BEFORE* the </body> of the page you can make it completely unobtrusive.

In other words, your overall page might be something like:

Code:

<html>
<head>
    ...
</head>
<body>
    ...
    <select class="urlSelector">
        <option>Select an option</option>
        <option value="http://www.google.com?q=orange">Orange</option>
        <option value="http://www.google.com?q=pineapple">Pineapple</option>
        <option value="http://www.google.com?=banana">Banana</option>
    </select>
    ...

<script type="text/javascript" src="urlSelector.js"></script>
</body>
</html>

And then the contents of your urlSelector.js file (or whatever you choose to name it) could be something like this:

Code:

(
  function( ) /* anonymous master function
  {
      var sels = document.getElementsByTagName("select");
      for ( var s = 0; s < sels.length; ++s ) 
      {
          var sel = sels[s];
          if ( sel.className.indexOf("urlSelector") >= 0 ) 
          { 
              sel.onchange=changeURL; 
          }
      }
      function changeURL( )
      {
          var url = this.value;
          if ( url != "" ) location.href = url;
      }
  } // end of master function
)(); // self-invoke master function

Lots of other ways to skin this particular cat, but one advantage of this one is that you could have two or more such <select>s on any HTML page, if desired.