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 12 of 12
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts

    Identifying a selected option by its position

    I have a simple form with an options drop down box:

    Code:
    <form method="POST" name="form">
    <select autocomplete="off" id="input" name="input" onchange="this.form.submit();goHere();"> 
    <option>Choose...</option>
    <option>Question1</option>
    <option>Question2</option>
    <option>Question3</option>
    </select>
    I wish to identify the option chosen in the function but not by its value, by its position:

    Code:
    <script>
    function goHere(){
    var s = document.getElementById("input");
     if (s.selectedIndex == -1) return;
     var u = s.form.elements[i];
    alert(u);
    </script>
    I was hoping that variable "u" would be either 0, 1, 2, or 3.

    How can I get a variable to alert me the position of the selected option in the form? I think it is elements[i].
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,002
    Thanks
    15
    Thanked 236 Times in 236 Posts
    You can just let the value of the option correspond to the position of the option and if need be get the data you want from an array using the value as an indice.
    Code:
    <option value='0'>Question1</option>
    Just remember that all values are treated as strings.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You just did it!

    Code:
    alert(s.selectedIndex)
    To make your function simpler, just pass this.
    Code:
    <select autocomplete="off" id="input" name="input" onchange="this.form.submit();goHere(this);">
    ...
    function goHere(s){
       alert(s.selectedIndex);
    }
    What do you exactly want to do? You are calling the function after form submission. It might not have enough time to execute the function as the page may have already submitted and unloaded.

  • #4
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts
    Right. The problem with this solution is that assigning a value to each option means I don't have access to the text as "value". And that is a requirement for me - to have the text as "value".

    Is there another solution?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    tpeck, did you see my reply above? Getting the selected index is as easy as s.selectedIndex which you already have.

  • #6
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts
    I see, this is almost working...

    I have:

    Code:
    function goHere(s){
    alert(s.selectedIndex);
    if (s.selectedIndex == -1) return;
    var v = s.selectedIndex.value;
    document.getElementById('say').src='http://...blah blah blah ... '+v+'.mp3';
    How do I make the variable v a value so I can use it elsewhere as above?

    glenngv, you are right of course, I will have to work on the submission after the goHere function. But at the moment it hangs and can't do both the function and the submission.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    If you want the selected option value, you can just do s.value. And your check for s.selectedIndex == -1 will never be satisfied since you have a single line dropdown where there is always a selected item (unlike in multi line dropdown, e.g. <select size="5">). I think you want to check for zero which is the first empty option.

    Code:
    function goHere(s){
       alert(s.selectedIndex);
       if (s.selectedIndex == 0) return;
       var v = s.value;
       document.getElementById('say').src='http://...blah blah blah ... '+v+'.mp3';
       ...
    }

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,035
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    You can access the selected index, value and text of a select list thus:-

    Code:
    var si = document.getElementById("list1").selectedIndex; // using form ID
    var val = document.getElementById("list1").options[si].value; 
    var txt = document.getElementById("list1").options[si].text;

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You are right Philip but the shorter version select.value is much easier than select.options[index].value. Though you can't do select.text and its longer version is the only way to get the text.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,035
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Quote Originally Posted by glenngv View Post
    You are right Philip but the shorter version select.value is much easier than select.options[index].value. Though you can't do select.text and its longer version is the only way to get the text.
    Yes, indeed. It was just to demonstrate how to capture the option text in the same way that could be used to obtain the option value.

  • #11
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    864
    Thanks
    51
    Thanked 6 Times in 5 Posts
    I have got this to partially work, but as you said glenngv there is an issue with calling the function after form submission, So I have tried this (and many other things):

    Code:
    function speakAudio(s){
       var v = s.selectedIndex;
       if (v == 0) return;
       alert(v);
       s.form.submit();
       document.getElementById('say').src='text'+v+'.php';
       alert("hi");
     } 
    </script>
    Instead of submitting the form onchange, it calls the function, alerts, and submits the form. Then it alerts again but seems to omit replacing the iframe contents.

    Is there anything I can do to submit the form AND replace the iframe contents?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Where is the iframe located? In the same page as the form you are submitting? If so, when you submit the form, the whole page will be unloaded, so all the content including the iframe will be gone.


  •  

    Posting Permissions

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