Solved

I want to keep user input in a drop down box after submit is pressed

Posted on 2011-09-15
11
241 Views
Last Modified: 2012-05-12
I have included 3 files: html form, css file, javascript file

When a user selects 'Spirits' from 'Alcohol Type' drop down box the form changes. When the user selects 'Calculate Duty' it defaults back to its original form.  I would the form to stay as is when the user selects an 'Alcohol Type'.  I've tried using onsubmit function but I can't get it to work they way I want.  
config.js
test.php
templatemo-style.css
0
Comment
Question by:dmalovich
  • 6
  • 5
11 Comments
 
LVL 7

Expert Comment

by:cstsang
ID: 36547987
Replace the following statement:
<form id="theform"  name="duty" action="test.php"  enctype="multipart/form-data"  method="POST"> 

Open in new window

with
<form id="theform"  name="duty" action="test.php"  method="POST"> 

Open in new window

and try again
0
 

Author Comment

by:dmalovich
ID: 36548920
I did take out 'enctype="multipart/form-data"' but it still isn't working.  
0
 
LVL 7

Expert Comment

by:cstsang
ID: 36552665
yes,but you may notice that you can keep "Province/Territory" option.So, you can use the same implementation on keeping "Alcohol Type" option.
0
 

Author Comment

by:dmalovich
ID: 36557550
No, that doesn't work.  The selection stays after I submit, but the javascript code to change the form doesn't run.  That is my question.   Any ideas on how to do that?  
0
 
LVL 7

Expert Comment

by:cstsang
ID: 36558682
Which javascript code does not run?
the setOption function?
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 7

Expert Comment

by:cstsang
ID: 36558706
Do you mean the user select "Alcohol type", then click "calculate duty",
the selection can be keep, but the onchange function does not work?
0
 

Author Comment

by:dmalovich
ID: 36559905
Yes, thats right. onchange doesn't work when user submits form.
0
 
LVL 7

Expert Comment

by:cstsang
ID: 36561240
Which browser you are using? it works fine in IE and FF.
0
 

Author Comment

by:dmalovich
ID: 36561773
No, its not working in IE or FF.  When you select 'Spirits' for example, the form changes and you see 2 more fields.  When you submit the form those fields disappear.  I don't want them to disappear, I want them to stay as is.  
0
 
LVL 7

Accepted Solution

by:
cstsang earned 500 total points
ID: 36564415
In fact, that is php issue, not javascript, so I do 1 item for your reference.
It is concept problem, if you want to read the submitted value,
you need to do the job on server side.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test form</title>
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<script src="config.js"></script>

<!--[if IE]>
<style type="text/css">
#theform #pt4 {
	padding: 2em 1em 1em 1em;
	}
</style>
<![endif]-->

</head>
<body>

<form id="theform"  name="duty" action="test.php"  method="posT"> 

	<fieldset id="pt1" class="error">
		<legend><span>Step </span> <span>: Login details</span></legend>
		<h3>Step 1: Select Province or Territory,Alcohol Type, and input Total Cost.</h3>
		<div class="help"></div>
		<label for="loginname">Province/Territory</label>
        <select style="width:175px;" name="province"  onchange="">
		<?php
			IF (!isset($_POST['province'])) {
			   echo ("<option value=\"default\" SELECTED>-- Select --</option>");
			} 
			IF ($_POST['province']=="Alberta") {
			   echo ("<option value=\"Alberta\" SELECTED>Alberta</option>");
			} else {
				echo ("<option value=\"Alberta\" >Alberta</option>");
			}
			IF ($_POST['province']=="British Columbia") {
			   echo ("<option value=\"British Columbia\" SELECTED>British Columbia</option>");
			} else {
				echo ("<option value=\"British Columbia\" >British Columbia</option>");
			}
			IF ($_POST['province']=="Manitoba") {
			   echo ("<option value=\"Manitoba\" SELECTED>Manitoba</option>");
			} else {
				echo ("<option value=\"Manitoba\" >Manitoba</option>");
			}
			IF ($_POST['province']=="New Brunswick") {
			   echo ("<option value=\"New Brunswick\" SELECTED>New Brunswick</option>");
			} else {
				echo ("<option value=\"New Brunswick\" >New Brunswick</option>");
			}
			IF ($_POST['province']=="Newfoundland") {
			   echo ("<option value=\"Newfoundland\" SELECTED>Newfoundland</option>");
			} else {
				echo ("<option value=\"Newfoundland\" >Newfoundland</option>");
			}
			IF ($_POST['province']=="Nova Scotia") {
			   echo ("<option value=\"Nova Scotia\" SELECTED>Nova Scotia</option>");
			} else {
				echo ("<option value=\"Nova Scotia\" >Nova Scotia</option>");
			}
			IF ($_POST['province']=="Ontario") {
			   echo ("<option value=\"Ontario\" SELECTED>Ontario</option>");
			} else {
				echo ("<option value=\"Ontario\" >Ontario</option>");
			}
			IF ($_POST['province']=="P.E.I.") {
			   echo ("<option value=\"P.E.I.\" SELECTED>P.E.I.</option>");
			} else {
				echo ("<option value=\"P.E.I.\" >P.E.I.</option>");
			}
			IF ($_POST['province']=="Quebec") {
			   echo ("<option value=\"Quebec\" SELECTED>Quebec</option>");
			} else {
				echo ("<option value=\"Quebec\" >Quebec</option>");
			}
			IF ($_POST['province']=="Saskatchewan") {
			   echo ("<option value=\"Saskatchewan\" SELECTED>Saskatchewan</option>");
			} else {
				echo ("<option value=\"Saskatchewan\" >Saskatchewan</option>");
			}			
			IF ($_POST['province']=="Yukon") {
			   echo ("<option value=\"Yukon\" SELECTED>Yukon</option>");
			} else {
				echo ("<option value=\"Yukon\" >Yukon</option>");
			}		
			IF ($_POST['province']=="N.W.T.") {
			   echo ("<option value=\"N.W.T.\" SELECTED>N.W.T.</option>");
			} else {
				echo ("<option value=\"N.W.T.\" >N.W.T.</option>");
			}
			IF ($_POST['province']=="Nunavut") {
			   echo ("<option value=\"Nunavut\" SELECTED>Nunavut</option>");
			} else {
				echo ("<option value=\"Nunavut\" >Nunavut</option>");
			}
		?>      
		</select><br /><br />
		
        <label for="loginname">Alcohol Type</label>                                 
        <select style="width:175px;" name="alcohol_type" 
        onchange="setOptions(document.duty.alcohol_type.options[document.duty.alcohol_type.selectedIndex].value)";>
		<option value="">-- Select --</option>
			<option value="1">Spirits</option>
            <option value="2">Spirit Coolers</option>
            <option value="3">Wine</option>
            <option value="4">Wine Coolers</option>
            <option value="5">Sparkling Wine</option>
            <option value="6">Cider</option>
            <option value="7">Beer</option>    
        </select><br /><br />
		
		<label for="password1">Total Cost ($CDN)</label>
        <input style="width:170px;" type="text" name="cost" value="Enter Total Cost ($CDN)" onfocus="value=''" />
	</fieldset>
	
	<fieldset id="pt2" class="error">
		<legend><span>Step </span> <span>: Password</span></legend>
		<h3>Step 2: Select Quantity,enter Alcohol %, and any other fields that may appear.</h3>
		<div class="help"></div>
		
        <label for="password1">Quantity</label>        
        <select style="width:175px;" id="typeSpirits" name="quantity" size="1">
            <option value=" " selected="selected">-- Select --</option>
        </select><br /><br />
		
        <label for="password1">Alcohol %</label>
        <input style="width:170px;" type="text" name="percentage" value="Enter Alcohol Percentage" onfocus="value=''" /><br /><br />
		<div style="display:none" id="spiritType">
		<label for="password1">Spirits Type</label>	
		<select style="width:150px;" name="spirits_type">
            <option value="">-- Select --</option>
            <option value="Whisky">Whisky</option>
            <option value="Rum">Rum</option>
            <option value="Vodka">Vodka</option>
            <option value="Tequila">Tequila</option>
            <option value="Gin">Gin</option>
            <option value="Liqueurs">Liqueurs</option>
            <option value="Brandy/Cognac">Brandy/Cognac</option>
            <option value="Other">Other</option>
        </select><br /><br />
        </div> 
       
		<?php
		  $xx=$_POST['outside_country']; 
		  if (strlen($xx)==0)	
			echo ("<div style=\"display:none\" id=\"outsideText\">");	
		  else                        
		    echo ("<div id=\"outsideText\">");
		 ?> 
		<label for="outside_country">Made Outside N.A.,Mexico?</label>	 
        <select name="outside_country">
		    <option value="">-- Select --</option>
            <option value="No" <?php if ($xx=="No"){ echo ("selected");}?>>No</option>
            <option value="Yes"  <?php if ($xx=="Yes"){ echo ("selected");}?>>Yes</option>
        </select><br /><br />
		</div>
		
		<div style="display:none" id="bottledIn">
		<label for="bottled_in">Country Of Origin</label>	 
		<select style="width:175px;"  name="bottled_in">
			<option value="">Bottled In?</option>
			<option value="Canada">Canada</option>
			<option value="United States">United States</option>
			<option value="Mexico">Mexico</option>
			<option value="United Kingdom">United Kingdom</option>
			<option value="Australia">Australia</option>
			<option value="New Zealand">New Zealand</option>
			<option value="South Africa">South Africa</option>
			<option value="France">France</option>
			<option value="Other">Other</option>
        </select> 
		</div>
		
	</fieldset>
	
	<fieldset id="pt4">
		<legend></legend>
		<h3></h3>
		<div id="disclaimer">	
		<input type="submit" id="submitform" tabindex="6"  value="Calculate Duty" /></div>
	</fieldset>
	<div id="copyright">2011 - Duty calculations are complex. Every effort has been made towards their
						accuracy but, they cannot be 100% guaranteed. CSS by Design Shack</div>
</form>

</body>

</html>

Open in new window

0
 

Author Closing Comment

by:dmalovich
ID: 36567300
Thank you so much.  Doing it in php worked......
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now