JavaScript - Hide Forms On Page Then Display Form Based On Option Selection

I have rough ideas on how to achieve this but I dont know how to start.

I want to use a drop-down menu selection option to submit a form.

But the form's contents change depending on the option.

This is the basic form:

Code:

<FORM ID="go1" METHOD="POST" TARGET="_self">
<INPUT TYPE=HIDDEN NAME=UserID VALUE="<%UserID%>">
<INPUT TYPE=HIDDEN NAME=Password VALUE="<%Password%>">
<INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266">
<INPUT TYPE=HIDDEN NAME=PageID VALUE="1">
<INPUT TYPE="IMAGE" class="hand" border="0" src="/images/my.gif" width="45" height="26" vspace="5">
</FORM>

At the moment, it's an image which gets clicked on but it needs to be the option chosen. I think I can do that with:

Code:

function gotoPage(s){
   var v = s.selectedIndex;
   var select = document.forms.form.elements.input; // selects question
   if (v == 1){...}
   if (v == 2){...} etc.

However, as I said, the form's contents must change depending on the option chosen:

The form's values which change a

Code:

<INPUT TYPE=HIDDEN NAME=SubUnitID VALUE="4266">
<INPUT TYPE=HIDDEN NAME=PageID VALUE="1">

Can someone point me in the right direction?

I apologize for all the text I'm about to type, but I just want to make sure I explain my problem in detail.

So I have created a simple Weather Forecast algorithm containing the JavaScript code that uses a prompt to allow a user to enter a temperature in degrees Celsius, and based on the degrees entered (temperature scale is below), the program will display one of the following messages based on the selection structure I have created: (Kindly find attached .txt file of my entire code, I wasn't able to upload an HTML file.)

-18 degrees Celsius: "Bundle up! It's freezing out there!"
-18 - 0 degrees Celsius: "Pretty cold with a chance of snow!"
15 degrees Celsius: "Don't forget your jacket. It's still chilly out!"
16 - 27 degrees Celsius: "Perfect, lovely weather... unless it rains."
28 - 35 degrees Celsius: "Nice and warn. Go for a swim."
35 degrees Celsius: "Really hot! Best to stay in air conditioning."

HELP
Now i want improve on the same program and let the user enter the degrees in either unit using a prompt to ask the user whether the entry is Celsius(C) or Fahrenheit (F) (F scale is below) and use the correct degree breakdown to display the same messages:

Less than 0 degrees Fahrenheit: "Bundle up! It's freezing out there!"
0 - 32 degrees Fahrenheit: "Pretty cold with a chance of snow!"
33 - 59 degrees Fahrenheit: "Don't forget your jacket. It's still chilly out!"
60 - 80 degrees Fahrenheit: "Perfect, lovely weather... unless it rains."
81 - 95 degrees Fahrenheit: " Nice and warn. Go for a swim."
Greater than 95 degrees Fahrenheit: " Really hot! Best to stay in air conditioning."


I'd appreciate if anyone can help me with this. Again, I've attached my original file where the user can only enter in degrees Celsius and gets the corresponding messages. I have tested it and it works perfectly.
Attached Files hourlyForecast1.txt (954 Bytes, 24 views)

Hi Guys,

I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need.

Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box.

For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines.

Below is the HTML to give you an idea of what I mean.

Code:

<table>
<tr>
<td>&nbsp;</td>
<td><label class="bold">Yes</label></td>
<td><label class="bold">No</label></td>
</tr>
<tr>
<td><label for="property_q1"> - Is this your house?</label></td>

<td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td>

<td><input name="property_q1" id="property_q1" type="radio" value="No" /></td>
</tr>
</table>

<br />

<div id="fine">It's fine, don't worry about filling it in.</div>
<div id="fill" style="display:none">Please fill in the form below.</div>
<table>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><textarea name="info" id="info" cols="60" rows="5"></textarea></td>
</tr>
</table>
<input type="submit" />

The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks!

<head>
<script type="text/javascript" language="javascript">

function showInfo()
{
var typeOne = document.getElementById('bmp');
var typeTwo = document.getElementById('junction');
var typeThree = document.getElementById('mile');
if(document.basicform01.Location_Type.value == "BMP to EMP")
{
typeOne.style.display="inline";
typeTwo.style.display="none";
typeThree.style.display="none";
}
else if(document.basicform01.Location_Type.value == "Junction to Junction")
{
typeOne.style.display="none";
typeTwo.style.display="inline";
typeThree.style.display="none";
}
else if(document.basicform01.Location_Type.value == "Milepost")
{
typeOne.style.display="none";
typeTwo.style.display="none";
typeThree.style.display="inline";
}
else
{
typeOne.style.display="none";
typeTwo.style.display="none";
typeThree.style.display="none";
}
}

</script>



<style>*[style] {outline:none}</style>


</head>

<body>
<fieldset>
<dl>
<dt><label for="Location_Type">Location Type *</label></dt>
<dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()">
<option value="" selected="selected">Select One...</option>
<option value="BMP to EMP">BMP to EMP</option>
<option value="Junction to Junction">Junction to Junction</option>
<option value="Milepost">Milepost</option>
</select></dd>
<div id="bmp" style="display:none;">
<dt><label for="bmpDetails">BMP</label></dt>
<dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd>
<dt><label for="empDetails">EMP</label></dt>
<dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd>
</div>
<div id="junction" style="display:none;">
<dt><label for="fromJunction">From Junction:</label></dt>
<dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd>
<dt><label for="toJunction">To Junction:</label></dt>
<dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd>
</div>
<div id="mile" style="display:none;">
<dt><label for="milepostNum">Milepost</label></dt>
<dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd>
</div>
<p>
</dl>
<p>
</fieldset>

</body>

Ok I am very very new to java to the point where I only know how to use pre-made javascripts in my php code so be gentle.

First, here is part of a form I have:

Code:

<select name = "pulmonologist" >
<option selected="" value="">---Select---
<option value="none">None</option>
<?php		
while ($row2 = mysql_fetch_assoc ($results2)) {   
        ?><option value = "<?php echo $row2['staff_name'];?>"><?php echo $row2['staff_name'];?></option>
<?php }
?>
</select>

Ok now I want to echo the value that the user selects on the SAME page (i.e. before the submit button is pressed) (so I can't do it with php, I need javascript) like this:

Code:

<input type="submit" value = "Contact <?php echo $pulmonologist;?>" />

Can you tell me how to do this? Thanks!

Hey all, I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it.

Rather than waste tons of space pasting it here, here's the pastebin:

http://pastebin.ca/1822165
alternatively here is the live version:

http://soniajacobwedding.com/site/rsvptest.html

I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all I'd be pretty happy.

Hi all,

I'm trying to hide a form button in javascipt.
Within a function I have the following ...

Quote:
document.getElementById(button).display='none';
However it just errors and says button is undefined. button is the id and name of the form button btw.

Do I need to define which form it is part of or something else?

Many thanks for any pointers or help.

Sir P

Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed?

I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you.

Broken down into parts I think I need to do the following:

a) Standard HTML form with drop downs etc and submit
b) Hidden divs
c) Submission process locally to javascript function to determine which product to show/hide
d) Javascript function that makes the decision
e) Javascript that hides/shows products

Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks!

cheers
frank

Hello,

I have a shopping cart that calculates shipping on products based on weight. What I'm wanting to do is use Javascript to scan the contents of the visitors shopping cart for a particular word, as well as scan the quantity of the product in the cart.

The condition:
If the product name = some string I want to compare AND if the quantity < some number I want to compare.

If these two conditions are met, I wan't to hide a shipping option called 'Free Shipping' once the user clicks the Estimate Shipping & Tax button.

Here is a link to the websites cart.php page: All Commercial Furniture.com - Shopping Cart

The platform we use is a little limited, so they don't give us access to their PHP files. Having to find a workaround for right now. Please let me know if you need any info. Any point in the right direction would be great. Thanks

Hi,

I want my page to jump to a different page based on data collected in the form input fields. I can jump to a new page alright, using the following javascript:

1. javascript code in form_a.html
document.forms["form_A"].action = "page_x.html"l;
document.forms["form_A"].submit();

2. document.forms[0].action = "page_x.html"l;

3. window.locaton = "page_x.html";

4. window.location.href = "page_x.html";

The problem is, I can see the new page was jumped to, but immediately it return back to the page that trigger the jump.

Any idea? I need to finish the project before Christmas. Any help is greatly appreciated!

Jeff

I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get:

Code:

Foo bar frog

becomes: Code:

Foo <b>bar</b> frog

I found some code that works for firefox, but I need it to work in explorer as well.

Do you have any ideas or examples how to do this?

Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. )

Usage: Code:

<a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>

insert function: Code:

<script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
	// Can a text range be created?
	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

		if (temp_length == 0)
		{
			caretPos.moveStart("character", -text2.length);
			caretPos.moveEnd("character", -text2.length);
			caretPos.select();
		}
		else
			textarea.focus(caretPos);
	}
	// Mozilla text range wrap.
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var begin = textarea.value.substr(0, textarea.selectionStart);
		var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
		var end = textarea.value.substr(textarea.selectionEnd);
		var newCursorPos = textarea.selectionStart;
		var scrollPos = textarea.scrollTop;

		textarea.value = begin + text1 + selection + text2 + end;

		if (textarea.setSelectionRange)
		{
			if (selection.length == 0)
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			else
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
			textarea.focus();
		}
		textarea.scrollTop = scrollPos;
	}
	// Just put them on the end, then.
	else
	{
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
	}
}
</script>

I'm creating a paypal webpage and am having some issues with input values updating based on which item the user has selected. The boxes I need to update are the amount, item number and item name. I have the following code but it only updates the first form. If I make a change to the second set of options it updates the first form instead of the second. Any help would be much appreciated.

Code:

function details(val)
{
	var info = val.split("|");
	
	document.getElementById('num').value = info[0];
	document.getElementById('price').value = info[1];
	document.getElementById('package_name').value = info[2];
}


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="dy" Onchange="details(this.value);">
<option value="1|3|Package 1">Package 1</option>
<option value="2|6|Package 2">Package 2</option>
<option value="3|9|Package 3">Package 3</option>
</select>
<input type="text" id="num" name="item_number" value="1">
<input type="text" id="price" name="amount" value="3">
<input type="text" id="package_name" name="item_name" value="Package 1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="pt" Onchange="details(this.value);">
<option value="4|6|Package 4">Package 4</option>
<option value="5|9|Package 5">Package 5</option>
<option value="6|12|Package 6">Package 6</option>
</select>
<input type="text" id="num" name="item_number" value="4">
<input type="text" id="price" name="amount" value="6">
<input type="text" id="package_name" name="item_name" value="Package 4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>

ive been racking my brain looking for a code solution for this....im a html and css pro....and a javascript NOOB lol



heres what im tryna do....i have a form...that has a Code:

<option>

in it for 6 dropdown options.... in one of those possible options.. when SELECTED...i want the div layer that i currently have under it...to appear

and i cant seem to figure it out....heres my code in its entirety

i want budget div...to appear when the option website design is selected

Code:

	<label for="subject">What are you interested in?<em>&bull;</em></label>
			<select type="text" value="Choose a Service" name="subject" id="subject" />
           <option selected> -- Select A Design Service --</option>
           <option id="website"> Website Design </option>
             <option> Twitter </option>
             <option> Ning or Tumblr </option>
             <option> Flyers </option>
             <option> Business Card or Brochure</option>
                <option>Other</option>
            </select><br />
<div id="budget" style="display:none;"><label> Do you know your budget for this Project?  </label> <input style="width:auto" type="radio" name="message" value="Not Sure"> Not sure
<input style="width:auto;margin-left:10px;"  type="radio" name="budget" value="$400-$800"> $400-$800
<input style="width:auto;margin-left:10px;"  type="radio" name="budget" value="$800-$1200"> $800-$1200
<input style="width:auto;margin-left:10px;"  type="radio" name="budget" value="over $1200"> over $1200 

</div>

Hi, i am building a website form which I would like the user to select a product of interest. Some products are three tiered and some are two tiered.

1. Example of three tier (3 dropdowns required only):
Scooters (dropdown 1)
Three Wheel Scooters (dropdown 2)
Delux 503S Bird Scooter (dropdown 3)

2. Example of two tier (2 dropdowns required only):
Standing Bikes (dropdown 1)
Children 300 Series (dropdown 2)

If the user wants to submit their interest for one of the products, I need to have at most 3 dropdown menus. So in Example 1, I would have 3 dropdowns in my form. Dropdown 1: Scooters Dropdown 2: Three Wheel Scooters Dropdown 3: Delux 503S Bird Scooter

In Example 2, I would only need to use the first 2 dropdown menus. (Obviously the first dropdown would contain 'Scooters' and 'Standing Bikes' in the menu list)

The below code is perfect except, I would like to alter the code so that the second and third dropdowns are hidden until a selection from the first drop down is made. Once for example, 'Standing Bikes' is selected from the first dropdown menu, the second dropdown menu appears and the third remains hidden due to the fact that it is not required. If I selected Scooters from the first dropdown menu, the second dropdown would appear listing all items associated with this and at this point the third dropdown menu is hidden. If i select 'Three Wheel Scooter' from the second dropdown the third dropdown menu now appears listing all Three wheel Scooters such as 'Delux 503S Bird Scooter'.

I hope this makes sense. Let me know if you require clarrification.

Here is the code:

Code:

<script language="JavaScript" type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box

	data_1 = new Option("1", "$");
	data_2 = new Option("2", "$$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	data_2_1 = new Option("21", "--");
	data_2_2 = new Option("22", "--");
	data_2_3 = new Option("23", "--");
	data_2_4 = new Option("24", "--");
	data_2_5 = new Option("25", "--");

// third combo box

	data_1_1_1 = new Option("111", "*");
	data_1_1_2 = new Option("112", "*");
	data_1_1_3 = new Option("113", "*");
	data_1_2_1 = new Option("121", "*");
	data_1_2_2 = new Option("122", "*");
	data_1_2_3 = new Option("123", "*");
	data_1_2_4 = new Option("124", "*");
	data_2_1_1 = new Option("211", "**");
	data_2_1_2 = new Option("212", "**");
	data_2_2_1 = new Option("221", "**");
	data_2_2_2 = new Option("222", "**");
	data_2_3_1 = new Option("231", "***");
	data_2_3_2 = new Option("232", "***");

// fourth combo box

	data_2_2_1_1 = new Option("2211","%")
	data_2_2_1_2 = new Option("2212","%%")

// other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function change(currentbox) {
	numb = currentbox.id.split("_");
	currentbox = numb[1];

    i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         son = document.getElementById("combo_"+i);
	     // I empty all options except the first one (it isn't allowed)
	     for (m=son.options.length-1;m>0;m--) son.options[m]=null;
	     // I reset the first option
	     son.options[0]=new Option(displaywhenempty,valuewhenempty)
	     i=i+1
    }


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }


// filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

       // if there are no options, I empty the first option of the "son" combo
	   // otherwise I put "-select-" in it

	   	  if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
	   	      if (eval("typeof("+stringa+"1)=='undefined'"))
	   	         eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
	   	      else
	             eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
	      else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
	      i=i+1
	   }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}

//-->
</script>

<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="value1">-select-</option>
	<option value="value2">1</option>
	<option value="value3">2</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>

</select>

</form>

<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist.

Order Form:
Code:

<td colspan="1" height="120" align="left"> 
<select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359"  onchange="calculateValue(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> R359</td></tr>

New page I called a unction to print:
Code:

function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");	
}

This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page.