Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multiple dropdown boxes to call function

    Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question.

    Here's what I'm trying to do.

    I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated.

    S

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    To get the most helpful assistance, you usually need to post code or a link to a working project.
    Are you a Help Vampire?

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oops, sorry!

    Here's the html:

    Code:
    <div id="transTermsButtons">
    
    <form id="transTerms" name="transTerms">
    
    <select name="lang">
    
    <option value="">Choose a language</option>
    
    <option value="arabic">Arabic</option>
    
    <option value="chinese">Chinese</option>
    
    <option value="german">German</option>
    
    <option value="gujarati">Gujarati</option>
    
    <option value="hindi">Hindi</option>
    
    <option value="italian">Italian</option>
    
    <option value="polish">Polish</option>
    
    <option value="portuguese">Portuguese</option>
    
    <option value="punjabi">Punjabi</option>
    
    <option value="russian">Russian</option>
    
    <option value="spanish">Spanish</option>
    
    <option value="tamil">Tamil</option>
    
    <option value="turkish">Turkish</option>
    
    <option value="urdu">Urdu</option>
    
    </select>
    
    <select name="term">
    
    <option selected="" value="">Find a term</option>
    
    <option value="word1">word1</option>
    
    <option value="word2">word2</option>
    
    <option value="word3">words3</option>
    
    <option value="word4">word4</option>
    
    <option value="word5">word5</option>
    
    </optgroup>
    
    </select>
    
    <input type="button" value="Translate" onclick="toggle()"/>
    
    <br>
    
    <br>
    
    	<div id="toggleText" class="arabic" style="display: none">
    
    							<i>Word1</i>
    
    					<embed src="success.mp3" autostart=false width=0 height=0 id="sound1" enablejavascript="true">
    
    						<form>
    								<input type="button" value="Play Sound" onClick="EvalSound('sound1')">
    						</form>
    
    	</div>

    and the JS:

    Code:
    /// Toggles div
    
    function toggle() {
    	var ele = document.getElementById("toggleText");
    	var text = document.getElementById("displayText");
    	if(ele.style.display == "block") {
        		ele.style.display = "none";
    		text.innerHTML = "show";
      	}
    	else {
    		ele.style.display = "block";
    		text.innerHTML = "hide";
    	}
    }
    
    /// Plays sound
    
    function EvalSound(soundobj) {
      var thissound=document.getElementById(soundobj);
      thissound.Play();
    }

    At the moment, this just shows and hides the same div. What I'd like is for the right word to appear, for example 'word 1' in Arabic, French etc.

    Thanks!

    S

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    If I understand correctly, you're starting off by storing the words statically on the page within the structure. Something like this:
    Code:
    <div class="arabic">Word1</div>
    <!-- and so on -->
    Is that right? If so, an easier way to handle this might be to build an array (or, technically, an object) and then display the result from that array based upon the inputs. Perhaps something like this:
    Code:
    var wordlist = {
      "arabic": ["ar-word1", "ar-word2", "ar-word3", "ar-word4", "ar-word5"],
      "english": ["en-word1", "en-word2", "en-word3", "en-word4", "en-word5"],
      "jive": ["ji-word1", "ji-word2", "ji-word3", "ji-word4", "ji-word5"]
    };
    Adjust the values of the "Find a term" select box to be numeric and then you could probably display what you want with something resembling
    Code:
    function toggle(sel_lang,sel_word)
    {
      document.getElementById('word_display_box').innerHTML = wordlist[sel_lang][sel_word];
    }
    I'm not sure how close that is to functional, but it might give an idea of one way to approach the problem that doesn't involve lots of words stuffed into the HTML.
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    dickson3748 (01-21-2010)

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That's massively helpful, thank you.

    S

  • #6
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi again. Here's where I'm up to with this. I'm not sure what I'm doing wrong (as I said, this is all new to me!).

    Thanks

    S



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    
    <HEAD>
    
    
    <SCRIPT TYPE="TEXT/JAVASCRIPT">
    
    var wordlist = {
      "arabic": ["ar-word1", "ar-word2", "ar-word3", "ar-word4", "ar-word5"]
    };
    
    
    function toggle(sel_lang,sel_word)
    {
      parent.document.getElementById('word_display_box').innerHTML = wordlist[sel_lang][sel_word];
    }
    
    
    </SCRIPT>
    </HEAD>
    
    <BODY>
    
    
    <div id="transTermsButtons">
    
    <form id="transTerms" name="transTerms">
    
    <select name="lang">
    
    <option value="">Choose a language</option>
    
    <option value="arabic">Arabic</option>
    
    </select>
    
    <select name="word">
    
    <option selected="" value="">Find a term</option>
    
    <option value="1">word1</option>
    
    <option value="2">word2</option>
    
    <option value="3">word3</option>
    
    <option value="4">word4</option>
    
    <option value="5">word5</option>
    
    </select>
    
    <input type="button" value="Translate" onclick="toggle();"/>
    
    </form>
    
    </div>
    
    <br>
    
    <br>
    
    <div id="word_display_box"> </div>
    
    
    <br>
    
    <br>
    
    </BODY>
    
    </HTML>

  • #7
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    It looks like you forgot to pass the values as parameters in the call to toggle(). One way to do that would be:
    Code:
    <input type="button" value="Translate" onclick="toggle(document.transTerms.lang.value,document.transTerms.word.value - 1);"/>
    Note the "- 1" at the end of the word value. Array indexes are zero-based while your values one the word selector are 1-based.

    When you get around to extending the base code, be sure to test for empty or incorrect values from the select boxes.
    Are you a Help Vampire?


  •  

    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
    •