Form instead text in JavaScript

youngcoder · Nov 15, 2010

Dear all,
Can anyone help me with this…
When somebody select option from dropdown menu, I wish to show adequate form for that option, instead to show text. But, when I put <form>, JavaScript stops to work. With plain text everything working fine.

This is form I wish 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>

This is code I wish to modify.

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<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 option?
<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>

cLFlaVA · Nov 15, 2010

It may be helpful for you to put a line of debugging code in there. Also, you shouldn't give a name or ID to any HTML element using a reserved keyword (e.g., "select").

Rename your select element to something like "selOption" and add an alert() within your change function to be sure the value you're selecting is coming through in the function.

----

vacunita · Nov 16, 2010

There's nothing really preventing the usage of forms inside a string to display, my bet would be in the misuse of quotes.

For instance this would work:

Code:

document.getElementById("change").innerHTML = "<form action='somepage.xxx' method='POST'><input type='text' name='mttext'>...</form> ";

while this would produce errors:

Code:

document.getElementById("change").innerHTML = "<form action="somepage.xxx" method="POST"><input type="text" name="mttext">...</form> ";

Of course this a guess, since I don't know what exactly you did.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Form instead text in JavaScript

youngcoder

Technical User

cLFlaVA

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor