[RESOLVED] Easy Javascript question – Change text based on user input

@sarmstroMay 20.2008

Total Java newbie but i know there’s a way to do it.

I would like to create a web page where a user can select a name from a dropdown & the page’s text changes based on that selection.

To explain, if the page says:
~~[B]~~Steve likes corn & apples. Steve also likes motorcycles. “I”ve always like grapes”, said Steve. [/B]
If a user selects Joe from a drop down option list, it changes to
~~[B]~~ Joe likes corn & apples. Joe also likes motorcycles. “I”ve always like grapes”, said Joe. [/B]

Here’s the drop down list code

<select name=”select” id=”select”>
<option value=”Joe”>Joe</option>
<option value=”Steve”>Steve</option>
</select>

I’m thinking I need some sort of on-click change

Thanks in advance my technical bruthas!?

to post a comment

JavaScript

25 Comments(s) _↴

@ChazzlMay 20.2008 — #Match the select name with the aryContent index to produce it's text in the content div.

[code=html]<html>
 <head>
 <title>New Page 1</title>
 <script type="text/javascript">
 var aryContent = new Array();
 aryContent[0] = "Select a name from the select box above.";
 aryContent['Joe'] = "Joe likes corn & apples. Joe also likes motorcycles. "I've always like grapes", said Joe.";
 aryContent['Steve'] = "Steve likes corn & apples. Steve also likes motorcycles. "I've always like grapes", said Steve.";
 aryContent['Chazzl'] = "Chazzl likes pizza. Chazzl also likes gyrocopters. "I've always like oranges", said Chazzl.";
 function updateContent(obj){
 var objContent = document.getElementById('contentID');
 objContent.innerHTML = aryContent[ obj[obj.selectedIndex].value ];
 }
 </script>
 <style type="text/css">
 select{
 border:1px solid #B9CDED;
 margin-left: 10px;
 }
 .contentBox{
 border:1px solid #B9CDED;
 margin: 10px;
 padding: 4px;
 background-color: #EDEDED;
 font: normal 10pt sans-serif;
 }
 </style>
 </head>
 <body>
 <select name="people" id="peopleID" onchange="updateContent(this);">
 <option value="0">Choose a name</option>
 <option value="Joe">Joe</option>
 <option value="Steve">Steve</option>
 <option value="Chazzl">Chazzl</option>
 </select>
 <div class="contentBox" id="contentID">Select a name from the select box above.</div>
 </body>
 </html>
 [/code]

@sarmstroauthorMay 20.2008 — #Thank you for your response & that's just about exactly what I needed. I'm very impressed - I even liked the internal css formating - very nice! I am very thankful and I have just a couple follow up questions.

The text that the changed names will be is 3 paragraphs long & there's going to be 10 possible name choices. This would mean 3 paragraph X 10 which I would think is a lot of code. Is there any way to simplify that?

@JMRKERMay 20.2008 — #This expands it a bit, but also compresses what you want. ?

[code=php]
 <html> 

 <head> 

 <title>New Page 1</title>
 <script type="text/javascript">
 var aryContent = new Array(); 
 aryContent[0] = "Select a name and likes from the select boxes above."; 
 aryContent[1] = "::: likes corn & apples. ::: also likes motorcycles. "I've always like grapes", said :::."; 
 aryContent[2] = "::: likes pizza. ::: also likes gyrocopters. "I've always like oranges", said :::."; 
 var Content = aryContent[0];
 
 function updateContent(obj){
 var objLikes = document.getElementById('likesID');
 var objContent = document.getElementById('contentID'); 
 var Content = aryContent[objLikes[objLikes.selectedIndex].value];
 Content = Content.replace(/:::/g,obj);
 objContent.innerHTML = Content;
 } 
 function updateLikes(posn){
 Content = aryContent[posn];
 updateContent(document.getElementById('peopleID').value);
 } 
 </script> 

 <style type="text/css"> 

 select{
 border:1px solid #B9CDED; 
 margin-left: 10px; 
 } 
 .contentBox{
 border:1px solid #B9CDED; 
 margin: 10px; 
 padding: 4px; 
 background-color: #EDEDED; 
 font: normal 10pt sans-serif;
 } 
 </style> 

 </head> 

 <body> 

 <select name="people" id="peopleID" onchange="updateContent(this.value);"> 

 <option value="">Choose a name</option> 

 <option value="Joe">Joe</option> 

 <option value="Steve">Steve</option> 

 <option value="Chazzl">Chazzl</option> 

 <option value="John">John</option> 

 <option value="Jacob">Jacob</option> 

 <option value="Jinglehimer">Jinglehimer</option> 

 <option value="Smith">Smith</option> 

 </select> 

 <select name="people" id="likesID" onchange="updateLikes(this.value);"> 

 <option value="0" checked>Choose a like</option> 

 <option value="1">Motorcycles</option> 

 <option value="2">Pizza</option> 

 </select> 

 <div class="contentBox" id="contentID">Select a name and likes from the select boxes above.</div> 

 </body> 
 </html>
 [/code]

Modify to your needs.

@ChazzlMay 20.2008 — #Hehe. Nice nice. I like how it's evolving. ?

Have you explored using hidden divs, Sarmstro? I'm not sure how dynamic your looking for.

@sarmstroauthorMay 21.2008 — #I'm not sure how to use hidden divs but I'm definately open to learning. ;-). Just to clarify what I'm trying to do, I'm trying to change the name in a song from one to another based on a drop down list. An example would be if I changed the name Anna below to Sarah. I think the first code would work find, my only concern is I have 10 names so that's a lot of code to change 10 names. I'm wondering if there's a way to make the name Anna a variable to where the replaced based on the user's selection. Your first code suggestion may be the best but I was wondering if there was a way to just have the lyrics entered once but that may not be possible. Thanks again to both of you for your help.

Anna lyrics

[B]Anna[/B], you come and ask me girl

To set you free, girl

You say he loves you more than me

So I will set you free

Go with him, go with him

[B]Anna[/B], girl, before you go now

I want you to know now

That I still love you so

But if he loves you more, go with him

All of my life I've been searching for a girl

To love me like I love you oh, now

But every girl I've ever had breaks my heart

And leaves me sad, what am I

What am I suppose to do oh, oh, oh .....

Anna, just one more thing, girl

You give back your ring to me

And I will set you free, go with him

All of my life I've been searching for a girl

To love me like I love you

Cause let me tell you now

But every girl I've ever had breaks my heart

And leaves me sad, what am I

What am I suppose to do oh, oh, oh .....

[B]Anna[/B], just one more thing, girl

You give back your ring to me

And I will set you free,

Go with him, go with him

You can go with him, girl, go with him

@JMRKERMay 21.2008 — #Pretty easy fix. You can bold the regions before and after ':::' if desired.

[code=php]
 <html> 

 <head> 

 <title>New Lyrics</title>
 <script type="text/javascript">
 
 var lyrics =
 ":::, you come and ask me girl<br>"+
 "To set you free, girl<br>"+
 "You say he loves you more than me<br>"+
 '<br>'+
 "So I will set you free<br>"+
 "Go with him, go with him<br>"+
 '<br>'+
 ":::, girl, before you go now<br>"+
 "I want you to know now<br>"+
 "That I still love you so<br>"+
 "But if he loves you more, go with him<br>"+
 '<br>'+
 "All of my life I've been searching for a girl<br>"+
 "To love me like I love you oh, now<br>"+
 "But every girl I've ever had breaks my heart<br>"+
 '<br>'+
 "And leaves me sad, what am I<br>"+
 "What am I suppose to do oh, oh, oh .....<br>"+
 ":::, just one more thing, girl<br>"+
 "You give back your ring to me<br>"+
 "And I will set you free, go with him<br>"+
 '<br>'+
 "All of my life I've been searching for a girl<br>"+
 "To love me like I love you<br>"+
 "Cause let me tell you now<br>"+
 "But every girl I've ever had breaks my heart<br>"+
 '<br>'+
 "And leaves me sad, what am I<br>"+
 "What am I suppose to do oh, oh, oh .....<br>"+
 ":::, just one more thing, girl<br>"+
 "You give back your ring to me<br>"+
 "And I will set you free,<br>"+
 "Go with him, go with him<br>"+
 "You can go with him, girl, go with him";
 
 var Content = lyrics;
 
 function updateContent(obj){
 Content = lyrics;
 var objContent = document.getElementById('contentID');
 Content = Content.replace(/:::/g,obj);
 objContent.innerHTML = Content;
 }
 </script> 

 <style type="text/css"> 

 select{
 border:1px solid #B9CDED;
 margin-left: 10px;
 }
 .contentBox{
 border:1px solid #B9CDED;
 margin: 10px;
 padding: 4px;
 background-color: #EDEDED;
 font: normal 10pt sans-serif;
 width: 400px;
 }
 </style> 

 </head> 

 <body> 

 <select name="people" id="peopleID" onchange="updateContent(this.value);"> 

 <option value="">Choose a name</option> 

 <option value="Anna">Anna</option> 

 <option value="Betty">Betty</option> 

 <option value="Chazzl">Chazzl</option> 

 <option value="Diana">Diana</option> 

 <option value="Elizabeth">Elizabeth</option> 

 <option value="Francis">Francis</option> 

 <option value="Heather">Heather</option> 

 </select>
 <div class="contentBox" id="contentID">Select a name and likes from the select boxes above.</div> 

 </body>
 </html> 
 [/code]

Good Luck!

@ChazzlMay 21.2008 — #I’m in a girl song, ewwww ? j/k hehe

The method of searching for a specific pattern and replacing that pattern with a corresponding value is a very good way to program. It will allow you to keep your logic script separate from your HTML. The ::: pattern in these examples are called the [i]Namespace[/i]... or at least that's what I call it >.> It can be anything you want, but be careful to make sure it is unique or you might have other parts of your content changing too.

@sarmstroauthorMay 21.2008 — #Thanks guys - I think that'll work!

@JMRKERMay 21.2008 — #I’m in a girl song, ewwww ? j/k hehe[/quote]
Just making sure you were really reading the posts. ?

(I'll edit it out if you give me a different name ? No disrespect intended. )

@ChazzlMay 21.2008 — #Nah, it's cool ^{^.^{^}} A+

@sarmstroauthorMay 31.2008 — #The last code worked perfectly! Thank you both for your help. I've got 2 more issues I wonder if you could help with.

1) Based on the code I already have, how do change two names? e.g.

[B]Sandy [/B]was a sweethheart

[B]Billy [/B]was a country boy

It wasn't long before [B]Sandy[/B]

Noticed [B]Billy [/B] had problems with math

Using a <input type="text" name="name" id="name" /> instead of a dropdown select box, how do I change the names based on what the user enters?

Also, how do I change an internal HTML link based on a user selection using a dropdown? e.g. User selects name from a dropdown selection & a name is displayed & a link is displayed next to that, that is relative to the name.

Bob is selected, html page displays "Bob" & Click here with an html link to - www.blah.com/bob.mp3

Billy is selected, html page displays "Billy" & Click here with an html link to - www.blah.com/billy.mp3

Thanks in advance for your help.

@JMRKERMay 31.2008 — #Making the change to the display would be relatively easy:

Change ':::' to '::1::' and '::2::" in the appropriate places

and do two passes through the replacement logic

with the two separately entered text box names, something like this:

[code=php]
 <input type="text" id="Name1" value="">
 <input type="text" id="Name2" value="">
 [/code]

Then the replacement logic would be:

[code=php]
 function updateContent(obj1,obj2){
 Content = lyrics;
 var objContent = document.getElementById('contentID');
 Content = Content.replace(/::1::/g,obj1);
 Content = Content.replace(/::2::/g,obj2);
 objContent.innerHTML = Content;
 } 
 [/code]

And use a button to perform the change instead of the select list:

[code=php]
 <button onclick="updateContent(document.getElementById('Name1').value,document.getElementById('Name2').value)">
 Change</button>
 [/code]

Post back with your changes if it doesn't work.

Good Luck! ?

@sarmstroauthorMay 31.2008 — #It's working. Last question....

How do I change an internal HTML link based on a user selection using a dropdown? e.g. User selects name from a dropdown selection & a name is displayed & a link is displayed next to that, that is relative to the name.

Bob is selected, html page displays "Bob" & Click here with an html link to - www.blah.com/bob.mp3

Billy is selected, html page displays "Billy" & Click here with an html link to - www.blah.com/billy.mp3

Let me know if that doesn't make sense.

@JMRKERMay 31.2008 — #While this is not exactly what you asked for, it should give you a leg up.

[code=php]
 <html>
 <head>
 <title> </title>
 <script type="text/javascript">
 function LinkToChoice(where) {
 if (where == 'Selection') { alert('Need a '+where); return; }
 
 // following to replace alert when 'where' is defined
 //  document.location.href=where;
 alert('Go to: '+where);
 }
 </script>
 </head>
 <body>
 <select id="choices" onchange="LinkToChoice(this.value)">
 <option value="Selection">Selection</option>
 <option value="www.blah.com/billy.mp3">Billy</option>
 <option value="www.blah.com/bob.mp3">Bob</option>
 </select>
 </body>
 </html>
 [/code]

Could use selection choice to display a number of <DIV>s that are hidden until selected with the proper link to click on.

@sarmstroauthorMay 31.2008 — #That's close to what I want except I'm just trying to change text on a page & the link relative to what's selected on a dropdown selection list. It's similar to what you scripted before on the lyrics, in fact I kind of took that as a template & scripted it the way I thought it should work but no cigar. Check it out.

<html>

<head>

<title>New Lyrics</title>

<script type="text/javascript">

var lyrics =

Name: ::: - <img src="Pics/Listen.png" width="21" height="25"> <a href="www.whatever.com/:::.mp3">Click here to listen</a> <br>

- <img src="Pics/Download.png" width="21" height="25"> <a href="www.whatever.com/:::.mp3">Click here to download</a> ;

var Content = lyrics;

function updateContent(obj){

Content = lyrics;

var objContent = document.getElementById('contentID');

Content = Content.replace(/:::/g,obj);

objContent.innerHTML = Content;

}

</script><style type="text/css">

select{

border:1px solid #B9CDED;

margin-left: 10px;

}

.contentBox{

border:1px solid #B9CDED;

margin: 10px;

padding: 4px;

/* background-color: #EDEDED; */

font: normal 10pt Verdana;

/* width: 400px; */

} </style>

<select id="peopleID" onchange="updateContent(this.value);" name="people">

<option value="" selected="selected">Choose a name</option>

<option value="Billy">Billy</option>

<option value="Heather">Heather</option>

<option value="Jennifer">Jennifer</option>

<option value="Jessica">Jessica</option>

<option value="Karen">Karen</option>

<option value="Linda">Linda</option>

<option value="Lisa">Lisa</option>

<option value="Melissa">Melissa</option>

<option value="Michelle">Michelle</option>

<option value="Susan">Susan</option>

</select>

</p>

<div class="contentBox" id="contentID">Select a name from the select boxes above.</div>

</body>

</html>

@JMRKERMay 31.2008 — #I guess I'm unclear on the concept.

Your request was to substitute two names in the lyrics

but your code only allows for one name to change.

Do you want two selection boxes with the same or different names?

OR

Do you want one select box with a pair of names to choose from?

Makes a difference on how the final script looks.

@sarmstroauthorJun 01.2008 — #My new post had 2 parts so I probably made it confusing by putting two on the same page. Basically what I'm trying to do now is change a display & change a link relative to a user selection. So if it was

Name: Bobby - Listen to Bobby.mp3 - Download Bobby.mp3

Based on a user selection it could change to

Name: Sam Listen to Sam.mp3 Download Sam.mp3

Here's my crude attempt at creating that....

Name: ::: - <img src="Pics/Listen.png" width="21" height="25"> <a href="www.whatever.com/:::.mp3">Click here to listen</a> <br>

- <img src="Pics/Download.png" width="21" height="25"> <a href="www.whatever.com/:::.mp3">Click here to download</a> ;

@JMRKERJun 01.2008 — #I think I can do what you want, but I don't understand this:

[code=php]
 Name: ::: - <img src="Pics/Listen.png" width="21" height="25"> 
 <a href="www.whatever.com/:::.mp3">Click here to listen</a> 
 <br>
 - <img src="Pics/Download.png" width="21" height="25"> 
 <a href="www.whatever.com/:::.mp3">Click here to download</a> ;
 [/code]

How do you expect to substitute 2 names with only 1 ':::' placeholder?

How do you determine which name goes with which link?

It goes back to the explaination of post #13.

@sarmstroauthorJun 01.2008 — #Sorry I don't know what I was thinking.... (could've been the margarita my wife gave me shortly before I starting typing ? There would be 2 variables to choose since one mp3 is for demo & the other for download. I was hoping someone could choose a name from a drop down selection & that would give them 2 icons w/ text. One pic w/link to listen to a demo of an mp3 with that name & one pic w/link to download it. Something like

<option value="" selected="selected">Choose a name</option>

<option value="Billy">Billy</option>

<option value="Heather">Heather</option>

</select>

If Billy is selected then the line would display

Name: [B]Billy [/B]

Pic of headphones - Click here to listen to BillyDemo.mp3

Pic of Download icon - Click here to Download Billy.mp3

Thank you so much for your help!

@JMRKERJun 01.2008 — #

[code=php]
 <html>
 <head>
 <title>Song Downloads</title>
 <script type="text/javascript">
 
 var lyrics = '';
 lyrics += 'Name: ::: <br>- <img src="Pics/Listen.png" width="21" height="25" alt="Listen to Demo">';
 lyrics += ' <a href="www.whatever.com/:::.mp3">Click here to listen</a>';
 lyrics += '<br>- <img src="Pics/Download.png" width="21" height="25" alt="Download music">';
 lyrics += ' <a href="www.whatever.com/:::.mp3">Click here to download</a>';
 var Content = lyrics;
 
 function updateContent(obj){
 Content = lyrics;
 var objContent = document.getElementById('contentID');
 Content = Content.replace(/:::/g,obj);
 objContent.innerHTML = Content;
 }
 </script><style type="text/css">
 select{
 border:1px solid #B9CDED;
 margin-left: 10px;
 }
 .contentBox{
 border:1px solid #B9CDED;
 margin: 10px;
 padding: 4px;
 width: 300px;
 font: normal 10pt Verdana;
 } </style>
 
 <select id="peopleID" onchange="updateContent(this.value);" name="people">
 <option value="" selected="selected">Choose a name</option>
 <option value="Billy">Billy</option>
 <option value="Chazzl">Chazzl</option> 

 <option value="Heather">Heather</option>
 <option value="Jennifer">Jennifer</option>
 <option value="Jessica">Jessica</option>
 <option value="Karen">Karen</option>
 <option value="Linda">Linda</option>
 <option value="Lisa">Lisa</option>
 <option value="Melissa">Melissa</option>
 <option value="Michelle">Michelle</option>
 <option value="Susan">Susan</option>
 </select>
 </p>
 <div class="contentBox" id="contentID">
 Select a name from the select boxes above.
 </div>
 
 </body>
 </html>
 [/code]

@sarmstroauthorJun 02.2008 — #That's working great. I've got both scripts, the name replacement & the link changer on the same page. I've made changes to some of it to get it to work together but am still having issues. I thought all I'd need to do is change the peopleids & the script names so it didn't conflict but no cigar.

@sarmstroauthorAug 11.2008 — #One selector works but the first one does not - both of these scripts work seperately but not together....

<html>

<head>

<title>Song Downloads</title>

<script type="text/javascript">

var namelinks = '';

namelinks += 'Name: ::1 <br>- <img src="Pics/Listen.png" width="21" height="25" alt="Listen to Demo">';

namelinks += ' <a href="www.whatever.com/::1.mp3">Click here to listen</a>';

namelinks += '<br>- <img src="Pics/Download.png" width="21" height="25" alt="Download music">';

namelinks += ' <a href="www.whatever.com/::1.mp3">Click here to download</a>';

var Content = namelinks;

function updateContent(obj){

Content = namelinks;

var objContent = document.getElementById('LinkBox');

Content = Content.replace(/::1/g,obj);

objContent.innerHTML = Content;

}

</script>

<select id="peopleID" onchange="updateContent(this.value);" name="people">

<option value="" selected="selected">Choose a name</option>

<option value="Billy">Billy</option>

<option value="Chazzl">Chazzl</option>

<option value="Heather">Heather</option>

<option value="Jennifer">Jennifer</option>

<option value="Jessica">Jessica</option>

<option value="Karen">Karen</option>

<option value="Linda">Linda</option>

<option value="Lisa">Lisa</option>

<option value="Melissa">Melissa</option>

<option value="Michelle">Michelle</option>

<option value="Susan">Susan</option>

</select>

</p>

<div class="contentBox" id="LinkBox">

Select a name from the select boxes above.

</div>

<script type="text/javascript">

var lyrics =

"Sweet little girl, she comes right to me<br />"+

"My little <b>:::</b>.";

var Content = lyrics;

function updateContent(obj){

Content = lyrics;

var objContent = document.getElementById('ContentID');

Content = Content.replace(/:::/g,obj);

objContent.innerHTML = Content;

}

</script>

<p>

<select id="nameID" onChange="updateContent(this.value);" name="names">

<option value="">Select Name</option>

<option value="Angela">Angela</option>

<option value="Ashley">Ashley</option>

<option value="Brittney">Brittney</option>

<option value="Christie">Christie</option>

<option value="Christine">Christine</option>

<option value="Debra/Deborah">Debra/Deborah</option>

<option value="Donna">Donna</option>

<option value="Emily">Emily</option>

<option value="Heather">Heather</option>

<option value="Jennifer">Jennifer</option>

<option value="Jessica">Jessica</option>

<option value="Karen">Karen</option>

<option value="Laura">Laura</option>

<option value="Linda">Linda</option>

<option value="Lisa">Lisa</option>

<option value="Lori">Lori</option>

<option value="Melissa">Melissa</option>

<option value="Michelle">Michelle</option>

<option value="Rachel">Rachel</option>

<option value="Stephanie">Stephanie</option>

<option value="Susan">Susan</option>

<option value="Suzy">Suzy</option>

</select>

</p>

<div class="contentBox" id="contentID">

Select a name from the select boxes above.

</div>

</body>

</html> [/QUOTE]

@JMRKERAug 11.2008 — #Several problems:

1. Some typo errors (watch case of your variables and functions) like 'contentID' and 'ContentID'.

2. You cannot have two functions with the same name (updateContent)

and not expect the script to get confused. I know I was.?

3. You had no </head> or <body> tags

You should check the error console for some of these errors. :rolleyes:

Also, check the functions you paste into a script for duplication,

especially in the areas of global variable references. This can lead to more devious problems.

[code=php]
 <html>
 <head>
 <title>Song Downloads</title>
 <script type="text/javascript">
 var namelinks = '';
 namelinks += 'Name: ::1 <br>- <img src="Pics/Listen.png" width="21" height="25" alt="Listen to Demo">';
 namelinks += ' <a href="www.whatever.com/::1.mp3">Click here to listen</a>';
 namelinks += '<br>- <img src="Pics/Download.png" width="21" height="25" alt="Download music">';
 namelinks += ' <a href="www.whatever.com/::1.mp3">Click here to download</a>';
 
 var Content1 = '';
 
 function updateContent1(obj){
 Content1 = namelinks;
 var objContent = document.getElementById('LinkBox');
 Content1 = Content1.replace(/::1/g,obj);
 objContent.innerHTML = Content1;
 }
 
 var lyrics =
 "Sweet little girl, she comes right to me<br />"+
 "My little <b>:::</b>.";
 
 var Content2 = '';
 function updateContent2(obj){
 Content2 = lyrics;
 var objContent = document.getElementById('ContentID');
 Content2 = Content2.replace(/:::/g,obj);
 objContent.innerHTML = Content2;
 }
 
 </script>
 </HEAD>
 <BODY>
 
 <select id="peopleID" onchange="updateContent1(this.value);" name="people">
 <option value="" selected="selected">Choose a name</option>
 <option value="Billy">Billy</option>
 <option value="Chazzl">Chazzl</option>
 <option value="Heather">Heather</option>
 <option value="Jennifer">Jennifer</option>
 <option value="Jessica">Jessica</option>
 <option value="Karen">Karen</option>
 <option value="Linda">Linda</option>
 <option value="Lisa">Lisa</option>
 <option value="Melissa">Melissa</option>
 <option value="Michelle">Michelle</option>
 <option value="Susan">Susan</option>
 </select>
 </p>
 
 <div class="contentBox" id="LinkBox">Select a name from the select boxes above.</div>
 
 <p>
 <select id="nameID" onChange="updateContent2(this.value)" name="names">
 <option value="">Select Name</option>
 <option value="Angela">Angela</option>
 <option value="Ashley">Ashley</option>
 <option value="Brittney">Brittney</option>
 <option value="Christie">Christie</option>
 <option value="Christine">Christine</option>
 <option value="Debra/Deborah">Debra/Deborah</option>
 <option value="Donna">Donna</option>
 <option value="Emily">Emily</option>
 <option value="Heather">Heather</option>
 <option value="Jennifer">Jennifer</option>
 <option value="Jessica">Jessica</option>
 <option value="Karen">Karen</option>
 <option value="Laura">Laura</option>
 <option value="Linda">Linda</option>
 <option value="Lisa">Lisa</option>
 <option value="Lori">Lori</option>
 <option value="Melissa">Melissa</option>
 <option value="Michelle">Michelle</option>
 <option value="Rachel">Rachel</option>
 <option value="Stephanie">Stephanie</option>
 <option value="Susan">Susan</option>
 <option value="Suzy">Suzy</option>
 </select>
 </p>
 
 <div class="contentBox" id="ContentID">Select a name from the select boxes above.</div>
 
 </body>
 </html>
 [/code]

@maktownJun 19.2009 — #I have a much simpler task related to this....

I want to have a blank box... with a text form field below it (1 line, limited to 140 characters in length), with a pretyped text (value) already inserted which changes a certain string based on what the visitor types in the blank box above.... it'd look like this.....

[ENTER TEXT HERE]

SUBMIT BUTTON

Sally has a *** that likes to eat

Then whatever the user types in the box ENTER TEXT HERE and then hits the submit button and it will replace *** with whatever they typed......

For example

[Cat]

(presses submit button)

Sally has a Cat that like to eat

Any suggestions?

@JMRKERJun 20.2009 — #I have a much simpler task related to this....

I want to have a blank box... with a text form field below it (1 line, limited to 140 characters in length), with a pretyped text (value) already inserted which changes a certain string based on what the visitor types in the blank box above.... it'd look like this.....

[ENTER TEXT HERE]

SUBMIT BUTTON

Sally has a *** that likes to eat

Then whatever the user types in the box ENTER TEXT HERE and then hits the submit button and it will replace *** with whatever they typed......

For example

[Cat]

(presses submit button)

Sally has a Cat that like to eat

Any suggestions?[/QUOTE]

Why don't you start your own thread (reference this one if necessary)

instead of hijacking it before the OP gets the answer they want

or the thread becomes RESOLVED as this one has?

You'll probably get a better response.

Also in #JavaScript _↴

global/local variable [RESOLVED] positioning hidden/visible divs Moving data across multiple select box problem.

Success!

Help @sarmstro spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Easy Javascript question – Change text based on user input

25 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Easy Javascript question – Change text based on user input

25 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

25 Comments(s) _↴

Also in #JavaScript _↴