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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    selectedIndex and values

    Just when I thought I had run into an worked out every situation on gathering values from page elements I run into the nasty select box.

    I want to run a function that alerts a selected options value. Here is my original code that wont work in IE.
    Code:
    function alertState()
    {
    	var state = document.getElementById("state").value;
            alert(state);
    }
    So I have read online that because Firefox.. let me repeat that Firefox has it wrong (that's the first) we must use a selectedIndex to gather first our selected array option then alert its value... I just cant seem to get the last part of getting the selected array options value, here is what I have.

    Code:
    function alertState()
    {
    var state = document.getElementById("state").selectedIndex;
    alert(state.value);
    }
    Of course here is my html.

    Code:
    <select id="state" onchange="alertState()">
        <option></option>
        <option>State One</option>
        <option>State Two</option>
        <option>State Three</option>
        <option>State Four</option>
        <option>State Five</option>
        <option>State Siz</option>
        <option>State Seven</option>    
    </select>
    Do I have to promise to give up my first born or something just to get this to work lol?

    Any help would be appreciated, thanks.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    You have not assigned any value to the options.


    Code:
    <select id = "state" onchange = "alertState()">
        <option value = "0">Select Option</option>
        <option value = "1">State One</option>
        <option value = "2">State Two</option>
        <option value = "3">State Three</option>
        <option value = "4">State Four</option>
        <option value = "5">State Five</option>
        <option value = "6">State Six</option>
        <option value = "7">State Seven</option>    
    </select>
    
    
    <script type = "text/javascript">
    function alertState() {
    var val = document.getElementById("state").value;
    alert (val);
    }
    </script>

    “Expert: a man who makes three correct guesses consecutively.” - Dr. Laurence J. Peter (American "hierarchiologist", Educator and Writer, 1919-1990)

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    I don't want a value attribute, I want the contents of the selected option.

    Code:
    <option value = "1">State One</option>
    not

    Code:
    <option value = "1">State One</option>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by ubh View Post
    I want to run a function that alerts a selected options value.
    Quote Originally Posted by ubh View Post
    I don't want a value attribute, I want the contents of the selected option.

    Code:
    <option value = "1">State One</option>
    not

    Code:
    <option value = "1">State One</option>

    You cannot capture the contents (text) of the selected option, but you can easily:-

    Code:
    <select id="state" onchange="alertState()">
        <option value = "0">Select Option</option>
        <option value = "State One">State One</option>
        <option value = "State Two">State Two</option>
        <option value = "State Three">State Three</option>
        <option value = "State Four">State Four</option>
        <option value = "State Five">State Five</option>
        <option value = "State Six">State Six</option>
        <option value = "State Seven">State Seven</option>    
    </select>
    Last edited by Philip M; 03-13-2009 at 05:18 PM.

  • Users who have thanked Philip M for this post:

    ubh (03-13-2009)

  • #5
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Hum ok well my mistake, I always thought that when say gathering a varible from an input box you point to its value like so.

    Code:
    <input type="text" id="inputId" />
    
    function getInputValue()
    {
    var input = document.getElementById("inputId").value;
    alert(input);
    }
    I figured that select options were the same.

    Fortunately I populate these select boxes via php so adding a value to each option box is a cinch, however if I had not this would have really sucked beings that my state box lists every state in the US and Canada.

    And now it begs the questions what the heck is the selectedIndex property for then cause everything I have read talks about using it to gather contents of option box but requires some magic skill lol cause I could not replicate it.

  • #6
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Or....

    Code:
    <script type="text/javascript">
    function alertState()
    {
    	var temp = document.getElementById("state");
    	var state = document.getElementById("state").selectedIndex;
    	var cont = temp.options[state].value;
    	alert(cont);
    }
    </script>
    Will work without assigning a value to the option element. Certainly, it has more lines of code, but it is an alternative solution in case you're not generating stuff with PHP.

  • Users who have thanked Eldarrion for this post:

    ubh (03-13-2009)

  • #7
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    You cannot capture the contents (text) of the selected option...
    False.

    Use this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">		
    
    	function alertState(nSelect){
    
    		var nState = nSelect.options[nSelect.selectedIndex].text;
    		alert(nState);
    
    	}
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #fffacd; margin-top: 60px;}
    	 form {width: 620px; margin: auto; font-family: 'times new roman'; font-size: 12pt;}
    	 fieldset {width: 620px; padding-left: 10px; background-color: #eee8aa; border: 1px solid #e6b280;}
    	 legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-top: 3px;
    		 padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
    	 label	{font-family: tahoma; font-size: 11pt; display: block;}
    	.submitBtn {background-color: #fff8dc; border: 1px solid #000000; font-family: arial; font-size: 10pt;
    		    font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto; 
    		    margin-top: 5px; margin-bottom: 5px;}
    
    </style>
    </head>
    	<body>
    		<form action="" method="post">
    		   <fieldset>
    			<legend>Form</legend>					
    
    				<select id="state" onchange="alertState(this)">
        					<option>Select Option</option>
       					<option>State One</option>
        					<option>State Two</option>
       					<option>State Three</option>
        					<option>State Four</option>
        					<option>State Five</option>
        					<option>State Six</option>
        					<option>State Seven</option>    
    				</select>
    
    				<input type="submit" name="submit" value="Submit" class="submitBtn">
    		   </fieldset>
    		</form>
    	</body>
    </html>
    Last edited by Henley; 03-13-2009 at 06:40 PM.

  • Users who have thanked Henley for this post:

    ubh (03-13-2009)

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Cranford, er I mean Henley ...

    If no value is assigned to the options then regardless of whether Javascript is en- or disabled the form data will not submit correctly as the value of each option is "" (blank). It is the value which is passed, not the (descriptive) text. You have shown that it is indeed possible to capture the text of the selected option, but what is the point? The correct method is to define a value for each option.

  • #9
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Your assertion is false.

    The browser will submit the option text if an option value is not declared.
    Last edited by Henley; 03-13-2009 at 08:08 PM.

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Henley, I'm watching you. Very closely.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Cranford View Post
    Your assertion is false.

    The browser will submit the option text if an option value is not declared.

    Might I ask what is your authority for that statement? I was always under the impression that what was submitted is the index of the selected option.

  • #12
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Selected entry from thousands returned by Yahoo search:

    Tips & Tricks

    * Markup other than the OPTION or OPTGROUP elements should never appear in a selection list.
    * If no VALUE attribute is supplied for an OPTION element, the displayed content of the OPTION is submitted to the form processing script. Otherwise, the VALUE attribute is sent.

    http://www.blooberry.com/indexdot/ht...s/s/select.htm

    And another:

    http://www.opensymphony.com/webwork/...ect%20tag.html

    Name Required Description
    id no HTML id attribute
    name yes HTML name attribute
    value no Data to pass as field value
    Last edited by Henley; 03-13-2009 at 09:39 PM.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Noted. We live and learn.


    "I am not young enough to know everything." - Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)
    Last edited by Philip M; 03-13-2009 at 09:05 PM.

  • #14
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Many, but sadly, not most of us, do so with humility and without gratuitous confrontation.

    You know how to use a search engine. You could have done so before declaring matters of fact with certainty.

    No one here reports to, Philip, despite your apparent belief to the contrary.

    Others come along, read your assertion, then believe that the code I posted is useless, if the form is to be submitted.

    No one knows everything. Not me, not you. The difference between us is that I post code, nothing more - valid mark-up and cross-browser. I don't confront anyone. I'm always forced to respond to replies, benign, amicable and otherwise.

    I don't report to, Philip.

    Let it go. Allow people to post, in any thread, without passing judgment.

    Let it go.

    I believe that if we ever met, we'd become fast friends. We'd sit, tip a couple pints, and laugh about the world and JavaScript novices.

    Please, let it go.
    Last edited by Apostropartheid; 03-14-2009 at 09:50 PM.

  • #15
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Guys, both ways are valid for my situation, bot selectedIndex and value attributes. I am not sending it via form but rather Ajax so you two have valid position on both side from my point of view.

    Thanks, both of you!!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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