homepage Welcome to WebmasterWorld Guest from 54.204.231.253
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Dynamically changing text, depending on a select choice
Javascript question
RussellC




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

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




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

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

txbakers




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

Thanks felix. It works perfectly! I appreciate it

RussellC




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved