?
Solved

get text from <select> using javascript

Posted on 2006-11-29
9
Medium Priority
?
1,963 Views
Last Modified: 2008-03-10
<option value="value">description</option>

How I can get the description (not the value) using javascript.

Also, whats difference between id="something" and name="something". php $_POST variables get values on from "Name" or from "id" too ?
0
Comment
Question by:brightwood
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +3
9 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18043189
brightwood,

You can get using innerText on that element.  If the element (i.e. the option tag) has an id attribute then you can easily access it and the text using ...

document.getElementById("option1").innerText

If you need more details or help using it in the page then please provide some html from that page.

PHP $_POST uses the name attribute.  There is a difference between the 2 (name vs id).  They have different uses and just because one is set it doesn't mean the other is assumed.  They don't need to match.  Some doctypes require name and id for the page to be valid and for the server to handle the html.  Let me know if you have additional questions about this.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 

Author Comment

by:brightwood
ID: 18043225
Doesn't seem to work, I get "undefined" instead of the time I'm supposed to get.
0
 

Author Comment

by:brightwood
ID: 18043237
instead of the text* sorry for mistype.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18043242
Does the option have an id?  Is it unique (i.e. the value isn't used in another tag/element)?

Depending on your form set up there are other ways to get the option element you want even if it doesn't have a unique id.  Using getElementsByTagName("option") will get a collection of the option tags.  You can loop through these.  If the option's select tag has an id then you can use that to get to the select tag and the use childNode or some other properties to get the option.  Without your html I can't recommend a specific way to do it though.

I hope this helps otherwise please provide the html for at least this select list.

bol
0
 
LVL 9

Expert Comment

by:blue_hunter
ID: 18043465
from your javascript



<script language="javascript">
function jsGrabText(hdl){

alert(hdl.text);

}
</script>


<select onchange="jsGrabText(this)">
<option value="1">First</option>
<option value="2">second</option>
</select>



cheers
0
 
LVL 2

Accepted Solution

by:
Jon_D earned 2000 total points
ID: 18043625
Use the following to get the selected option's text, in this case we are using an alert box to show the text :

Assuming we have the following setup :

<form name="InputForm">
<select name="selectmenu" onChange="alert(this.options[this.selectedIndex].text);">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
</select>
</form>

The most important part is : this.options[this.selectedIndex].text

If you wanted to get the value from the click of a button you would use this :
onClick="alert(document.InputForm.selectmenu.options[document.InputForm.selectmenu.selectedIndex].text);"

As for your question regarding name & id with PHP, PHP uses the name attribute for POST values. If you have an id but no name attribute, the value will not be posted.

According to www.w3.org, the ID tag serves the following roles in an HTML document :

1. As a style sheet selector.
2. As a target anchor for hypertext links.
3. As a means to reference a particular element from a script.
4. As the name of a declared OBJECT element.
5. For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).
0
 
LVL 1

Expert Comment

by:bobbyo
ID: 18044446
I tend to use this method more:

<select id="selectmenu" name="selectmenu">
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
</select>

<input type="Button" value="Get Value" onclick="get_value();">

function get_value() {
     var obj = document.getElementById('selectmenu');
     alert(obj.options[obj.selectedIndex].text);
}
0
 
LVL 1

Expert Comment

by:bobbyo
ID: 18044452
Sorry, put the function get_value into javascript tags.
0
 
LVL 3

Expert Comment

by:rixlabs
ID: 18046488
0

Featured Post

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question