Solved

Javascript to grab Text-Label as a value from a Select Box Option

Posted on 2007-11-16
4
1,016 Views
Last Modified: 2013-11-19
I have a select box and a hidden field.

I want to use an onchange handler to update the hidden field

<script>
function updHidden {
document.forms[0].TxtLabel=?
}
</script>
<select onchange=updHidden>
<option value=1>John Doe
<option value=2>Jane Doe
</select>
<hidden name=TxtLabel value="">

I can do the value part but this time I need the label and not sure how to get it.

Help.

0
Comment
Question by:Bob-Villa
[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
  • 3
4 Comments
 
LVL 21

Expert Comment

by:nizsmo
ID: 20301171
something like this:
<script>
function updHidden() {
document.getElementById('txtlabel').value="Your_Value_HERE";
}
</script>
<select onchange="updHidden();">
<option value=1>John Doe</option>
<option value=2>Jane Doe</option>
</select>
<hidden name="TxtLabel" id="txtlabel" value="">

Open in new window

0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20301202
also (not sure if this is what you mean) if you want the hidden value to take after the value selected with the select option box, then something like this will do it.
<script>
function updHidden() {
document.getElementById('txtlabel').value=document.getElementById('select_box').options[document.getElementById('select_box').selectedIndex].value;
}
</script>
<select onchange="updHidden();" id="select_box">
<option value=1>John Doe</option>
<option value=2>Jane Doe</option>
</select>
<hidden name="TxtLabel" id="txtlabel" value="">

Open in new window

0
 
LVL 1

Author Comment

by:Bob-Villa
ID: 20301492
ok, this works but I have a conflict now. I have more than one of these select boxes on a page and after making multiple selects on multiple select boxes only one change is applies. It seems that since the value is "" that the javascript is only applying the last value when I select more than one box. i.e. I have 3 select boxes and 3 hidden inputs. I select all 3 select boxes but upon form submission only the last select box takes the change in value from "" to John Doe. The best way I can see to remedy this is to actually write the value to page somehow?

Is there a way to make this:
<hidden name="TxtLabel" id="txtlabel" value="">
look like this:
<hidden name="TxtLabel" id="txtlabel" value="John Doe">

after the select is changed using a document.write or text replace or innerhtml or something?
0
 
LVL 21

Accepted Solution

by:
nizsmo earned 500 total points
ID: 20301826
Sorry if i misunderstood you but if you are wanting the result like this:
<hidden name="TxtLabel" id="txtlabel" value="John Doe">

can you not just change your selection box to this:
<select onchange="updHidden();" id="select_box">
<option value="John Doe">John Doe</option>
<option value="Jane Doe">Jane Doe</option>
</select>

and everything should work? or are you restricted in some way?
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript image manipulationcrop-image 7 41
Json and ajax javascript 24 26
My tooltip is not displaying correct 11 20
radio button onclick function 2 16
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

752 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