Form instead text in JavaScript

**young_coder** · 11-15-2010, 06:10 PM

Dear all,
Can anyone help me with this… I do not know if this is possible to be done…
Instead of text:

"Your favorite color is <b>Green</b> right?"

I need to show form like this:

Code:

<form action="auto.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State...</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form>

Thank you in advance

This is code I wish to modify.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
    padding:0;
    height:100%;
 }
#right {
    width:500px;
    height:100%;
    background-color:#999;
    text-align:center;
    float:right;
 }
#left {
    height:100%;
    margin-right:500px;
    background-color:#f00;
    text-align:center;
 }   
</style>
<script type="text/javascript">
function change()
{
   switch (document.getElementById("select").value)
   {
      case "1":
      document.getElementById("change").innerHTML = "Your favorite color is <b>Green</b> right?"
      break;
      case "2":
      document.getElementById("change").innerHTML = "Your favorite color is <b>Red</b> right?"
      break;
      case "3":
      document.getElementById("change").innerHTML = "Your favorite color is <b>Yellow</b> right?"
      break;
   }
}
</script>
</head>
<body>
What is your favorite color
<select onchange="change()" id="select">
   <option value="">------</option>
   <option value="1">Green</option>
   <option value="2">Red</option>
   <option value="3">Yellow</option>
</select>
<div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
   Original Text
</div>
</body>
</html>

**Beverleyh** · 11-15-2010, 07:08 PM

Can you please try to be clearer in your requirements please. What are you wanting us to help you with exactly? What do you want to achieve?

**young_coder** · 11-15-2010, 07:17 PM

I'm sorry...
I need, when somebody select option from dropdown menu, I wish to show adequate form, instead to show text "Your favorite color is <b>Green</b> right?". But, when I put <form>, script stops to work. With just text, script working fine.

**Beverleyh** · 11-15-2010, 07:27 PM

We need to see the script in full please and possibly also a current demo page to illustrate what you're describing - at the moment I don't understand where the "green" text aspect comes into play.

**young_coder** · 11-15-2010, 07:40 PM

This is form to be shown for instance for option 1:

Code:

<form action="auto.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State...</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function change()
{
   switch (document.getElementById("select").value)
   {
      case "1":
      document.getElementById("change").innerHTML = "This text has to be replaced with form adequate to option 1."
      break;
      case "2":
      document.getElementById("change").innerHTML = "This text has to be replaced with form adequate to option 2."
      break;
      case "3":
      document.getElementById("change").innerHTML = "This text has to be replaced with form adequate to option 3."
      break;
   }
}
</script>
</head>
<body>
What is your favorite color
<select onchange="change()" id="select">
   <option value="">------</option>
   <option value="1">option 1</option>
   <option value="2">option 2</option>
   <option value="3">option 3</option>
</select>
<div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
   This text is shown when option is not selected
</div>
</body>
</html>

Thread: Form instead text in JavaScript

Thread Tools

Search Thread

Form instead text in JavaScript

Bookmarks

Bookmarks

Posting Permissions