www.webdeveloper.com
Results 1 to 8 of 8

Thread: onChange delivering 2 Variables

  1. #1
    Join Date
    May 2009
    Posts
    8

    onChange delivering 2 Variables

    I've always found answers to basic questions, but this one has me stumped.

    All I need to do is have an <option> dropdown list do two things onChange:
    1. change a picture
    2. change some text (name,price..whatever)

    anyone have some snippets I can use?

    Thank you Much!

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    you can place as many statement on the same event, that include functions call. or you can write a function that perform both task. i guess you might want to pass some arguments, probably the value of selected option.
    Code:
    <select onchange="changePicture(this.value); changeText(this.value);">
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    May 2009
    Posts
    8
    ZeroKilled, thank you, I see where you are going..but forgive me..I've been working in php the past couple years but not needed to dive too deeply into javascript.

    I generally get your resolution, but how can I have more than 1 value within an <option>(dropdown list)? One for the picture value and one for the text value?

    Thank you for your time!

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    strictly said, isn't possible to have two or more separate values. however, you can have a single value in a certain format. say for example a string where each value is separate with a comma space. then split it and use accordingly.
    Code:
    <select onchange="var values = this.value.split(',\x20'); changePicture(values[0]); changeText(values[1]); ...;">
    <option value='value1, value2, value3, ...' />
    ...
    </select>
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  5. #5
    Join Date
    May 2009
    Posts
    8
    ZeroKilled,

    Thank you so much, I appreciate your time helping me with this.
    I understand using split() but am having issues executing it.

    I can call both changePicture() or changeText() seperately but when I use the split() it breaks down.

    Would you be kind enough to look at my script and tell me what you see?
    You'll note the first dropdown breaks because of the value (it's pulling the whole string) but the first dropdown recognizes I want the 2nd item in the array because it's stating undefined..so the split is not making it clear.

    I do not want to keep bugging you with this, but I am desperate to get it resolved for a project. VERY MUCH THANKS

    ######################
    <html>
    <body>

    <script type="text/javascript">
    function changePicture(){
    var image = document.getElementById("framePic");
    var dropd = document.getElementById("frameChoice");
    image.src = dropd.value;
    }
    function changeText(select_element){
    document.getElementById("frameDesc").innerHTML = select_element.value;
    }
    </script>


    <img id="framePic" src="http://www.file-extensions.org/imgs/company-logo/891/linux-online-inc.jpg" width="200"/>
    <p></p>

    <select id="frameChoice" onchange="var values = this.value.split(',');changePicture(values[0]);changeText(values[1])">
    <option value="http://blogs.digitalmediaonlineinc.com/TechUniverse/resource/apple-logo1.jpg,Apple">Apple</option>
    <option value="http://blog.protectwebform.com/images/microsoft_logo.jpg">Microsoft</option>
    <option value="http://www.file-extensions.org/imgs/company-logo/891/linux-online-inc.jpg">Linux</option>
    </select>
    <br />
    Value of option selected:
    <div id="frameDesc"></div>


    </body>
    </html>
    ######################

  6. #6
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    the event is defined such a way that the option value have to be formatted with a comma delimitation to separate values. in your html code only the first option is defined in such format, that's why you get undefined for others options.

    and finally your functions, try with this:
    Code:
    function changePicture(path){
    document.getElementById("framePic").src = path;
    }
    function changeText(text){
    document.getElementById("frameDesc").innerHTML = text;
    }
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  7. #7
    Join Date
    May 2009
    Posts
    8
    Bad news is that still did not work..good new is that while I was waiting I decided to place everything into one function to see what happened and it worked! (so far).

    Ended up doing the following and your split() suggestion saved me. Now I'll build a dynamic dropdown with all the variables seperated by commas and we'll see what happens :0/

    below is the code that took:

    #############

    <html>
    <body>

    <script type="text/javascript">

    function chooseValue(){
    var optionValue = document.getElementById("frameChoice").value.split(",");
    document.getElementById("frameDesc").innerHTML = optionValue[1];
    document.getElementById("framePic").src = optionValue[0];
    }

    </script>


    <img id="framePic" src="http://www.file-extensions.org/imgs/company-logo/891/linux-online-inc.jpg" width="200"/>
    <p></p>

    <select id="frameChoice" onchange="chooseValue(this);">
    <option value="http://blogs.digitalmediaonlineinc.com/TechUniverse/resource/apple-logo1.jpg,Apple">Apple</option>
    <option value="http://blog.protectwebform.com/images/microsoft_logo.jpg,Microsoft">Microsoft</option>
    <option value="http://www.file-extensions.org/imgs/company-logo/891/linux-online-inc.jpg,Linux">Linux</option>
    </select>
    <br />
    Value of option selected:
    <div id="frameDesc"></div>


    </body>
    </html>

  8. #8
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    in that case you can remove the this keyword from the function call in the onchange event.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles