Dynamically changing text, depending on a select choice

Javascript question

[RussellC]

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?

Thanks,

[RussellC]

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

[txbakers]

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.

[RussellC]

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

[felix]

If you have for example:

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

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.

[RussellC]

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.

[felix]

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

<select onchange="update(this[selectedIndex].text)">  
 <option>microseconds</option> 
 <option>eons</option> 
 <option>epochs</option> 
</select> 
<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.

[RussellC]

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

<select>
<option value="1">Activity #1</option>
<option value="2">Activity #2</option>
etc...
</select>

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:

SELECT BOX INPUT BOX <p>units</p>
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.

[felix]

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.

[RussellC]

Thanks felix. It works perfectly! I appreciate it

[RussellC]

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?

Thanks

[felix]

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