Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Javascript Jump Menu With Multiple Arguments/Parameters

Posted on 2011-02-21
11
836 Views
Last Modified: 2012-05-11
Let's say I have a function that uses to parameters, galleryText and galleryFolder, like so:

function changeGallery(galleryText,galleryFolder) {
      
      // my Function

}


I might run it like this:



changeGallery("The Name of My Gallery","images/foldername/");



But I wanted to run it through a jump menu, where each of the options has their own value for the parameters. So I've got this in my HTML:

<form name="form" id="form">
     <select name="jumpMenu" id="jumpMenu" onchange="changeGallery(?????)">

       <option selected="selected">Choose the Gallery of Your Choice</option>
       <option value="???">Option 1</option>
       <option value="???">Option 2</option>
     
     </select>
   </form>

But I'm not sure how to set up the "?????" in the onchange handler or in the value of the options.

Can anyone help?




0
Comment
Question by:caf210
  • 6
  • 5
11 Comments
 
LVL 6

Expert Comment

by:MuffyBunny
ID: 34953740
I wouldn't set the function up to accept the text and the folder.

Set the function up to accept the form and select objects:
function changeGallery(frm, sel) { //function code }

Then in your select definition pass them:
<select name="jumpMenu" id="jumpMenu" onchange="changeGallery(this.form, this)">

If it's the only form that will use the function, you could always pass nothing at all and just refer to the form wholly in your script:
document.form (please don't name your form "form" though... it's well, bad form - sorry about the pun, I couldn't control myself)

Then in your function determine the selected value and do what you need to do with it.
0
 

Author Comment

by:caf210
ID: 34953827
So what would my value be in this line?

 <option value="???">Option 1</option>



Ultimately the function needs to be provided a short string of text and the name of a folder, both of which are unique to Option 1 (in the example above).


When we do onchange="changeGallery(this.form, this)", what would the values of frm and sel be that are received in the changeGallery function?

0
 
LVL 6

Expert Comment

by:MuffyBunny
ID: 34953861
You could set it to anything that will be useful to you within the function code.

Is the purpose of this drop-down to dynamically change content on your page? Or do you need to actually pass this value to another page? Or both?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:caf210
ID: 34953911
It's to dynamically change content on the page. (No need to pass it to another page.)

Where I'm not clear, because of my cursory knowledge of javascript, is what "this.form" and "this" represent when the changeGallery function is run.
0
 
LVL 6

Expert Comment

by:MuffyBunny
ID: 34954059
this.form is shorthand for the current form

So if you have:

<form name="myForm">
<select name="mySelect" onchange="changeGallery(this.form, this);">
<option value="1">Gallery 1</option>
<option value="2">Gallery 2</option>
</select>
</form>

In this context, this.form refers to the containing form, myForm, and this refers to whatever object is using the term, in this case, mySelect.

It's just shorter than typing out document.myForm and document.myForm.mySelect
0
 

Author Comment

by:caf210
ID: 34954151
So I'm assuming, if someone selected Gallery One, changeGallery wouuld receive "1" passed in as the value of "this." True?

If that is the case, that's one parameter that I need. How would I get the other parameter associated with Gallery 1 into the function?
0
 
LVL 6

Expert Comment

by:MuffyBunny
ID: 34954270
Nope, it's not quite that simple. this.form passes the form object. this passes the select object.

Within your function code, you'll refer to the actual value like this:

function changeGallery(fm, sel){
   if(sel.options[sel.selectedIndex].value == '1'){
       //whatever you want to do with gallery 1
   }else{
      //whatever you want to do with gallery 2
   }
}
0
 
LVL 6

Expert Comment

by:MuffyBunny
ID: 34954285
keep in mind that this type of javascript activity will not reload your page. you'll have to have all versions of the gallery already built in the html and then use the javascript to hide and display the various galleries. That involves using CSS and <div> tags wrapped around your galleries.
0
 
LVL 6

Accepted Solution

by:
MuffyBunny earned 500 total points
ID: 34954429
Here's the whole deal:

<script>
function changeGallery(sel){
      if(sel.options[sel.selectedIndex].value == 'g1'){
            document.getElementById("gallery1").style.display='';
            document.getElementById("gallery2").style.display='none';
      }
      if(sel.options[sel.selectedIndex].value == 'g2'){
            document.getElementById("gallery2").style.display='';
            document.getElementById("gallery1").style.display='none';
      }
}
</script>

<form name="myForm">
<select name="mySelect" onchange="changeGallery(this);">
<option value="">Select a Gallery</option>
<option value="g1">Gallery 1</option>
<option value="g2">Gallery 2</option>
</select>
</form>

<div id="gallery1" style="display:none;">
HTML for gallery 1
</div>
<div id="gallery2" style="display:none;">
HTML for gallery 2
</div>


Copy and paste that code into a file and look at it in a browser. I think it's what you're looking for.
0
 

Author Comment

by:caf210
ID: 34955168
OK, I got it. I used this concept, but instead of doing the login inside, I just split the string. Here's my final concept:

<form name="myForm" id="myForm">
     <select name="jumpMenu" id="jumpMenu" onchange="changeGallery(this)">
       <option value="choose" selected="selected">Choose the Gallery of Your Choice</option>
       <option value="This is my text;folder1">Gallery 1</option>
       <option value="This is my other text;folder2">Gallery 2</option>
     
     </select>
   </form>



function changeGallery(selection) {
      
            
      var textFolder = selection.options[selection.selectedIndex].value;
      
      if (textFolder != "choose") { //if it's not the first option that says "please choose", do this...
                  var splitString = textFolder.split(";") //split the value at the semi-colon
                  var galleryText = splitString[0]; //first half
                  var galleryFolder = splitString[1]; //second half


                    // now I can have both values, and use them in the rest of my function.
      
      }
}


Thanks for all your help. I'll award out the points.
0
 

Author Closing Comment

by:caf210
ID: 34955184
Expert's discussion on the best way to approach the problem helped me figure out how to achieve this task.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question