Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Dynamically changing text, depending on a select choice

Javascript question



2:49 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

Is it possible to change text with a select field? I can't find any examples anywhere. I am making a form that has only 2 fields, a select field and a text field. The text field will always be a "unit" but the definition of a unit changes depending on what you choose in the select field. So, would it be possible to have it change the text next to the text field when a certain select option is chosen? (i.e. - per hour, per day, per week, etc...) If so, does anyone know how this is done?



5:17 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

I dont want to change the text field (input field) just the regular text next to it.


5:50 pm on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member txbakers is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Yes, you can do this with a combination of CSS/scripting etc.

If it is just browser text on the screen, not a value of a form element, it will be tricky.

I would do it with CSS by creating an ID in the <td> that holds the raw text. Create an alternate one as well and make that hidden. Then, on the Change of the form element, run a javascript which chooses which ID to make visible on the screen.


6:45 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

Thanks for the info txbakers, but too bad I only know php and simple javascript. Any info anywhere that could help me get this to work? ANy help is appreciated. Thanks


7:38 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

If you have for example:

<select id="selector">
<option>first choice</option>
<option>second choice</option>
<option>third choice</option>

And you want to change "first choice" to "Numero Uno", this should work.

document.getElementById('selector')[0].text="Numero Uno"

It requires that the browser implements the DOM. Older and/or non-compliant browsers need slightly different code.


9:07 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

Yes, that worked to change the item in the <select> but I need a script that changes some text when a <select> option is selected.


9:10 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

Sorry. Now that I understand your original post, I think this is more what you're looking for.

<select onchange="update(this[selectedIndex].text)">  
<input id="textbox" value="microseconds">

then your javascript might be...

function update(str1) { 
document.getElementById('textbox').value = str1

Again, this may not work on older browsers and browsers that don't support the DOM.


9:30 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

Thanks for the help, I think we are getting there but I am not sure how to implement this. Here is the situation. This is for a php app that I wrote. It dynamically creates a select menu with vlaues 1-16

<option value="1">Activity #1</option>
<option value="2">Activity #2</option>

There is an input field next to it where the user has to enter an amount, the unit of the amount changes depending on what you select ( i.e. - X amount of cars, X amount of bikes) This is for activity tracking and can be done by hours or by different items depending on the activity.

So, to avoid confusion, right next to the amount input box, I thought to have in plain text in a <p></p> next to it the "units"

So it would look like this:

The units is what changes.

I think that kind of makes sense. I am not sure if it can be done though.

Thanks again for the help.


10:39 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

You can disguise <input id="textbox"> as a regular paragraph and do something like what I suggested earlier. Do this using CSS.

<input id="textbox" style="border-style:none;background-color:transparent" value="units">

The input doesn't have to be part of the form.


10:48 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

Thanks felix. It works perfectly! I appreciate it


11:09 pm on Mar 27, 2003 (gmt 0)

10+ Year Member

One more quick question. That script changes the text to the same thing that is in the select menu. What if i want it to change to something else depending on which option you choose? Can that be done?



4:30 am on Mar 28, 2003 (gmt 0)

10+ Year Member

Sure. The text will be whatever you assign to str1.

Featured Threads

Hot Threads This Week

Hot Threads This Month