Results 1 to 6 of 6

Thread: Add two functions to 'onchange'?

  1. #1
    Join Date
    Dec 2009
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Add two functions to 'onchange'?

    Hello,

    I am wondering if it's possible to add two functions to the onchange command. Right now, I'm building a dynamic drop down form, which has a total of 5 drop down lists. The options are dependable on each other, meaning that whenever an option from the first list is selected, the options in the second list depend on the opton chosen previously.

    Right now, the onchange action is saying:

    Code:
    onChange="ChangeProduct(this.value)
    But, I want that whenever an option has been chosen, not only the options for the second list appear, but I also want to display some information about the chosen option. So it must also let some text appear. I tried that with the help of:

    Code:
     onchange="SelectionInformation(this,ProductOne)
    But can I combine this? Can I, and if I can...how can I tell the onchange function to do two things: display the next set of options and display the information?

    Any help is appreciated!
    Thx!

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Any event that uses javascript as its argument can take full javascript, as long as you want.

    onchange="[insert full script here]"

    To keep things simple, it is better to not put too much there, just so that the html stays readable, so you can put it in functions in the main script.

    But, yes, two functions are easy, using the same syntax as in regular Javascript:
    onchange="func1(); func2();"

    Just remember to use the semicolons. Technically even with one thing inside you should be using a semicolon to end it, but few people do because this is not strictly required-- but to separate multiple elements you need them.

    Alternatively, if you want to make it even simpler, you can make a function above:
    function func3(a,b,c) {
    func1(a);
    func2(b,c);
    }
    and for the onchange:
    onchange="func3(a,b,c);"
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    Code:
    onchange="function() { ChangeProduct(this.value); SelectionInformation(this, ProductOne); };"
    Trinithis

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Trinithis View Post
    Code:
    onchange="function() { ChangeProduct(this.value); SelectionInformation(this, ProductOne); };"
    Trinithis, I think that will give an error, or at the very least, since your anonymous function isn't self executing, nothing will happen. If you were assigning the event in javascript, it would be correct if you removed the quotes:

    Code:
    someElement.onchange=function() { ChangeProduct(this.value); SelectionInformation(this, ProductOne); };
    But for assignment as an inline event attribute, it should be like:

    Code:
    <select onchange="ChangeProduct(this.value); SelectionInformation(this, ProductOne);">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2009
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Okay great! Thank you for your help! I do have another question, if I may.

    Is it also possible to specify when to do what with the onchange function?
    I have that dynamic drop down menu, so it creates the options like this:

    Code:
    Option1: <select id="Options1" onChange="Populate('Options2',Options2,this.value)"></select>
    And I'd like to specify what kind of information I'd like to display. So if option one has been selected, not only the second box is filled with options, but also I'd like to state that it will display information. Now, that you explained, but how can I say that when option one has been chosen, it has to display information one / when option 2 has been chosen, it must display information 2 / when option three has been chosen, it must display information 3 and so on. Then, I can explain what kind of information I'd like it to display using the vars. Since right now, I'm only saying it to display information, not specified when to display which line of information.

    You following me? Since right now, even though I have the script for the information and the lines of information.... after I added in your line, it doesn't work. I guess since it doesn't know when to display which line. Am I right?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    When a select changes, its value property becomes that of the selected option:

    Code:
    <select onchange="doWhat(this);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <div id="result">&nbsp;</div>
    <script type="text/javascript">
    function doWhat(v){
    	var r = document.getElementById('result').firstChild;
    	v = v.value;
    	if(v === '1'){
    		r.nodeValue = "You Picked One.";
    	}
    	else if(v === '2'){
    		r.nodeValue = "You Picked Two.";
    	}
    	else if(v === '3'){
    		r.nodeValue = "You Picked Three.";
    	}
    }
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •