Solved

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

Posted on 2011-09-15
11
245 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Open dialog with server side controls in it 3 48
Triple line in an alert message 4 24
arrays and radio buttons 10 40
How do I add counter to html listbox using jquery 2 27
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

730 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