...

View Full Version : Form instead text in JavaScript



young_coder
11-15-2010, 06:02 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:


<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.



<!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>

Philip M
11-15-2010, 06:37 PM
I do not really understand the question or see any connection between selecting a color from three options and showing a form.

Please say exactly what it is you wish to happen and what you want to cause it to happen.

In principle you will need to enclose your form within a <div> which you change from style.display = "none" to style.display = "block" to make it visible ... when what happens?

BTW, the time to say "thanks" is afterwards, not beforehand which gives the - doubtless unintended - impression that you take other people's voluntary unpaid assistance and expertise for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.


Ninety-nine percent of the adults in this country are decent, hard-working, honest Englishmen. It's the other lousy one percent that get all the publicity. But then - we elected them.

young_coder
11-15-2010, 07:08 PM
I'm sorry...


Please say exactly what it is you wish to happen and what you want to cause it to happen.

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.

young_coder
11-15-2010, 07:46 PM
Might be this code sample without colors be less confusing


<!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>

And, this is form to be shown for instance for option 1:


<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>

glenngv
11-16-2010, 01:41 AM
Just have multiple invisible forms with different names and then put the corresponding name in the option value. When user selects an option, show the corresponding form based on the selected option value.


<html>
<head>
<script type="text/javascript">
var prevForm;
function change(selectedOptionValue)
{
if (selectedOptionValue){
document.forms[selectedOptionValue].className = 'showForm';
}
//hide previously shown form if any
if (prevForm) prevForm.className = 'hiddenForm';
prevForm = document.forms[selectedOptionValue];
}
</script>
<style type="text/css">
form.hiddenForm {display:none;}
form.showForm {display:block;}
</style>
</head>
<body>
<form>
<select onchange="change(this.value)" id="select">
<option value="">------</option>
<option value="form1">option 1</option>
<option value="form2">option 2</option>
<option value="form3">option 3</option>
</select>
</form>

<form name="form1" action="auto.htm" method="get" class="hiddenForm">
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>

<form name="form2" action="whatever.htm" method="get" class="hiddenForm">
...content for form2
</form>

<form name="form3" action="whatever.htm" method="get" class="hiddenForm">
...content for form3
</form>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum