The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How extract text from form element using <option>, Javascript extracts the assigned value, how do I get the text?
Ann-Marie Foster
post Aug 5 2018, 12:48 AM
Post #1





Group: Members
Posts: 7
Joined: 5-August 18
Member No.: 26,686



Here is the COUNTRY input of a checkout form.

CODE
  HTML:-

Country <select  NAME="Bill Country" ID="BillCountry" ONCHANGE="UpdateCheckout()">
<option value="US">USA</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AD">Andorra</option>
. . . . . .
</select>        


The above displays a form element where the customer can select their country.
java script: document.getElementById("BillCountry").value;
Gets the 2 character "Country Code" needed by PayPal.
But I would like to also access the TEXT of the particular country selected for printing a summary.
After they select a country the full text shows on the form element but HOW DO I EXTRACT THE TEXT?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 5 2018, 01:45 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You need to use the 'text' property instead of 'value'. But it's a little more complicated. You also need the index of the selected option. I think this should do it.

CODE
document.getElementById('BillCountry')[document.getElementById('BillCountry').selectedIndex].text


I don't know why value works without getting the index of the selected option but text doesn't. Now you've made me brood over that again. ninja.gif happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 5 2018, 01:53 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Now I remember what I concluded last time I brooded. It's of course because the value of the selected OPTION becomes the value of the SELECT whereas the text content of each OPTION belongs to that option alone and isn't transferred to the SELECT upon selection. Duh. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 5 2018, 06:26 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(pandy @ Aug 5 2018, 01:45 AM) *

You need to use the 'text' property instead of 'value'. But it's a little more complicated. You also need the index of the selected option. I think this should do it.

CODE
document.getElementById('BillCountry')[document.getElementById('BillCountry').selectedIndex].text


I don't know why value works without getting the index of the selected option but text doesn't. Now you've made me brood over that again. ninja.gif happy.gif

Shouldn't that be:
CODE
document.getElementById('BillCountry').options[document.getElementById('BillCountry').selectedIndex].text
Or, is '.options' really needed?

This post has been edited by CharlesEF: Aug 5 2018, 06:29 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 5 2018, 10:04 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You mean we could just do 'document.getElementById("BillCountry").text;'? No, that won't work. Because the text we want doesn't belong to the the select (Bill County). We need to get down to the selected option.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 5 2018, 10:15 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(pandy @ Aug 5 2018, 10:04 PM) *

You mean we could just do 'document.getElementById("BillCountry").text;'? No, that won't work. Because the text we want doesn't belong to the the select (Bill County). We need to get down to the selected option.

Um, that's not what I was asking. Your javascript is missing the '.options' part. My javascript has the '.options' part. I quess my question is will your code work without the '.options' part?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 5 2018, 11:06 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oh, sorry, I misread, thought you quoted my code. Yeah, it works. So does yours. I didn't expect it to. I thought selectedIndex was a property of the select object. wacko.gif

https://developer.mozilla.org/en-US/docs/We...t/selectedIndex
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 6 2018, 01:50 PM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I didn't expect your code to work. And it has nothing to do with selectedIndex. Your code treats 'document.getElementById("BillCountry")' as an array not an object. That's what I didn't understand.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 6 2018, 09:26 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



But the options are a collection and a collection is sort of an array. I've never really understood the difference. If there is any.

I don't think 'document.getElementById("BillCountry")' itself is treated as an array. Rather .selectedIndex referrs to the array/collection it contains, or how it should be expressed.

Sorry, not very good at terminology here. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 7 2018, 12:08 PM
Post #10


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I'll just keep using my syntax. No need to confuse myself more.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 8 2018, 12:33 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Same for me. That's the way I learnt it. The less to remember the better. biggrin.gif

What surprises me is that I can't find an example of your method - still it obviously works. If I google selectedIndex I only find examples of it used directly with select.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 8 2018, 01:39 AM
Post #12


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



This code is taken from a stackoverflow post.
CODE
function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

'options' is a collection of all the options in a select. I've always used it in my javascipt. And I have seen the same code used in many other posts/articles.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 8 2018, 06:08 AM
Post #13


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Aug 8 2018, 07:33 AM) *

What surprises me is that I can't find an example of your method - still it obviously works.

This one: http://www.javascriptkit.com/jsref/select.shtml ?
CODE
document.getElementById("myselect").options[0] //accesses first option via options[]

Also, wasn't options[] always used back in time when FORM and SELECT elements were accessed by their NAME values (before getElementById got into use)?

Anyway I suspect both of your methods are correct, but I haven't checked the ECMA spec.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 8 2018, 07:08 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Of course options can be used. tongue.gif

It was options[] paired with selectedIndex as in CharlesEF's working example I couldn't find an example of. I thought selectedIndex was a property of SELECT. Seems odd that it would also be a property of a specific OPTION since an option doesn't contain any indexed array or collection. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 8 2018, 01:18 PM
Post #15


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Aug 8 2018, 02:08 PM) *

It was options[] paired with selectedIndex as in CharlesEF's working example I couldn't find an example of.

It's just a special case, no exact example is needed.

QUOTE
I thought selectedIndex was a property of SELECT.

True.

QUOTE
Seems odd that it would also be a property of a specific OPTION

It isn't, it's used as the index in the options[] property (instead of an integer like in the javascriptkit example).


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 8 2018, 01:41 PM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Aug 8 2018, 08:18 PM) *

QUOTE(pandy @ Aug 8 2018, 02:08 PM) *

It was options[] paired with selectedIndex as in CharlesEF's working example I couldn't find an example of.

It's just a special case, no exact example is needed.


Huh? wacko.gif

QUOTE

QUOTE
Seems odd that it would also be a property of a specific OPTION

It isn't, it's used as the index in the options[] property (instead of an integer like in the javascriptkit example).


Yeah, you are right. I see it now. But that doesn't that make the construct seem unnecessary verbose since selectedIndex can be used directly with the select?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 8 2018, 04:38 PM
Post #17


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Aug 8 2018, 08:41 PM) *

doesn't that make the construct seem unnecessary verbose since selectedIndex can be used directly with the select?

You mean CharlesEF's construct? Yes, maybe that's why it's hard to find an example. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Aug 8 2018, 05:35 PM
Post #18


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Funny, when I do a bing search (I don't use google for anything) for 'javascript get selected option text' all the main results shows examples like my code sample. In fact, pandy's code sample is the only place I have ever seen that syntax used.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 9 2018, 12:49 AM
Post #19


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You would have seen it twice had you follow my link to the MDN reference. biggrin.gif

I have found examples of your way of doing it now, but only at forums and such.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:56 PM