We Keep Coding

Thymeleaf hide certain feature using if statement if the user choose certain option?

My selection has Document Type, Year and Month and My document type consists of Monthly Report and Annual Report
But if my document type is selected as "Annual Report", I want to hide the "Month" selection since Annual Report is based on Yearly basis. How do I put such if statement into my html?
thymeleaf html
<table class="table table-borderless" cellspacing="0"
style="border-inline: 0;">
<tbody>
<div th:if="${user!=null}">
<tr>
<!-- Document Type -->
<td th:text="#{DocType}" />
<td colspan="1">
<div class="dropdown col-sm-6">
<select id="documentType" class="browser-default custom-select"
th:field="*{type}">
<option
th:each="doc:${T(enums.DocumentType).values()}"
th:value="${doc}" th:text="${doc.label}"></option>
</select>
</div>
</td>
</tr></div>
<tr>
<!-- YEAR -->
<td th:text="#{Year}" />
<td colspan="1">
<div class="dropdown col-sm-6">
<select class="browser-default custom-select" th:field="*{year}">
<option value="">Please Select</option>
<option th:each="year : ${years}" th:value="${year}"
th:text="${year}"></option>
</select>
</div>
</td>
</tr>
<tr>
<!-- MONTH -->
<td th:text="#{Month}" />
<td colspan="1">
<div class="dropdown col-sm-6">
<select class="browser-default custom-select" th:field="*{month}">
<option value="">Please Select</option>
<option th:each="month : ${months}" th:value="${month}"
th:text="${month}"></option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
DocumentType.java
public enum DocumentType {
MONTHLY("MONTHLY", "Monthly Report"),
ANNUAL("ANNUAL", "Annual Report"),
private String code;
private String label;
DocumentType(final String code, final String label) {
this.code = code;
this.label = label;
}
public String getCode() {
return code;
}
public String getLabel() {
return label;
}
}

To hide Month selection if the document selected is Yearly you can use the following condition on Monthly.
th:if="${DocumentType.getCode() != 'ANNUAL'}"
So the code should be something like this
<tr th:if="${DocumentType.getCode() != 'ANNUAL'}">
<!-- MONTH -->
<td th:text="#{Month}" />
<td colspan="1">
<div class="dropdown col-sm-6">
<select class="browser-default custom-select" th:field="*{month}">
<option value="">Please Select</option>
<option th:each="month : ${months}"
th:value="${month}"
th:text="${month}"></option>
</select>
</div>
</td>
</tr>
To understand how to access Enums in Thymeleaf use this link Comparing the enum constants in thymeleaf

Problem with PostMapping - GetMapping method - loop in link. SpringBoot

I have problems with sending data to one of my tables.
Below you can see my methods: one that shows the template with form, and the second that shoud add this action.
#GetMapping("/addaction/{id}")
public String addAction(Model model, #PathVariable("id") int id ) {
Optional<PlantEntity> plantEntity = plantService.getPlantById(id);
if (plantEntity.isPresent()) {
model.addAttribute("plant", plantEntity.get());
}
return "addaction";
}
#PostMapping("/addaction/{id}")
public String addAction(#ModelAttribute ActionForm actionForm,
#PathVariable("id") int plantId) {
if(!userService.isLogin()) {
return "redirect:/";
}
actionService.addAction(actionForm, plantId);
return "redirect:/plant/"+plantId;
}
Here is my method in Service:
public void addAction (ActionForm actionForm, int plantId) {
PlantEntity plantEntity = new PlantEntity();
plantEntity.setId(plantId);
ActionEntity act = new ActionEntity();
act.setName(actionForm.getName());
act.setDescription(actionForm.getDescription());
act.setPlant(plantEntity);
act.setUser(userService.getUserData());
act.setMonth(actionForm.getMonth());
actionRepository.save(act);
}
and my template: addaction.html
<form method="post" action="'/addaction/'+${plant.getId()}"
th:object="${actionForm}">
<div class="form-group">
<label for="exampleInputEmail1">Name of activity</label> <input
type="text" th:field="*{name}" class="form-control"
id="exampleFormControlInput1" aria-describedby="emailHelp"
placeholder="Name your work">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">What you gonna
do?</label>
<textarea class="form-control" th:field="*{description}"
id="exampleFormControlTextarea1" rows="4"></textarea>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Month of activity</label>
</div>
<select class="custom-select" th:field="*{month}"
id="inputGroupSelect01">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<button type="submit" class="btn btn-dark">Action!</button>
</form>
The main problem is: when I try to addAction the result is:
http://localhost:8080/addaction/'/addaction/'+$%7Bplant.getId()%7D
There is some kind of loop. What am I doing wrong? Thank you for your time!

You don't have to pass '. spring expression language will take without ' also.
Try removing like below.
action="/addaction/${plant.getId()}"
Refer thymeleaf-construct-url-with-variable

Two submit buttons to do two different things

Using Thymeleaf, Spring-boot and Java. When I click either of these buttons (listed on same form/page), it submits to the /send path instead of its directed path. Ideas? One button needs to go to send, one needs to go to /addPolicy and append some input items to the page.
<form class="ui form" th:object="${directBind}" method="post" th:action="#{/send}" style="padding:0 10px;">
<h4>Customer Setup</h4>
<div class="row">
<label >Contact Name (First/Last):</label>
<input type="text" th:field="*{contactName}" required="true" />
</div>
<div class="row">
<label for="formAddress">Address:</label>
<input type="text" id="formAddress" th:field="*{formAddress}" required="true"/>
</div>
<div class="row">
<label for="phoneNumber">Phone Number:</label>
<input type="text" id="phoneNumber" th:field="*{phoneNumber}" required="true"/>
</div>
<div class="row">
<label for="email">Email:</label>
<input type="email" id="email" th:field="*{email}" required="true"/>
</div>
<div class="row">
<label for="website" style="margin-top: 1em;"> Website:</label>
<input type="text" id="website" th:field="*{website}" required="true"/>
</div>
<div class="row">
<label for="nameInsured">Name Insured:</label>
<input type="text" id="nameInsured" th:field="*{insuredName}" required="true"/>
</div>
<div class="row">
<label>Business with Agency:</label>
<div th:each="businessAgency : ${businessAgencies}">
<input type="checkbox" th:field="*{businessAgencyList}" th:value="${businessAgency}"/>
<label th:text="${businessAgency}">Business with Agency</label>
</div>
</div>
<div class="row">
<label for="executive">Executive:</label>
<input type="text" id="executive" th:field="*{executive}" required="true"/>
</div>
<div class="row" style="display: inline-block;">
<p>Service Level:</p>
<ul>
<li>
<label class="forCheckbox">
<input type="checkbox" th:field="*{serviceLevel}" required="true"/>
Affiliate Serviced</label>
</li>
</ul>
</div>
<div class="row">
<label for="affiliateRep">Affiliate Designated Representative:</label>
<input type="text" id="affiliateRep" th:field="*{affiliateRep}" required="true" />
</div>
<div>
<h4 style="display: inline;">AMS360 Policy Setup</h4>
<button id="addPolicy" type="submit" name="addPolicy" class="btn btn-default" style="margin-left: 1rem; margin-bottom: 1rem;"><span class="fa fa-plus"></span></button>
</div>
<div class="col-sm-12">
<hr/>
<table class="table table-striped" data-classes="table-no-bordered" data-striped="true" data-show-columns="true" data-pagination="true">
<thead>
<tr>
<th>Policy Number</th>
<th>Policy Term Start Date</th>
<th>Policy Term End Date</th>
<th>Line of Coverage</th>
<th>Parent Company</th>
<th>Writing Company</th>
<th>Bill Type</th>
<th>Quote Premium</th>
<th>Commission</th>
</tr>
</thead>
<tbody>
<tr th:each="ams360Policy,stat : *{ams360Policies}">
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].policyNumber}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].policyTermStartDate}"/></td>
<td> <input type="text" class="form-control" th:field="*{ams360Policies[__${stat.index}__].policyTermEndDate}"/></td>
<td><input type="text" id="lineOfCoverage" th:field="*{ams360Policies[__${stat.index}__].lineOfCoverage}" /></td>
<td><input type="text" id="parentCompany" th:field="*{ams360Policies[__${stat.index}__].parentCompany}" /></td>
<td><input type="text" id="writingCompany" th:field="*{ams360Policies[__${stat.index}__].writingCompany}" /></td>
<td> <div th:each="billType : ${billTypeList}">
<input type="checkbox" th:field="*{billTypeOptions}" th:value="${billType}"/>
<label th:text="${billType}">Bill Types</label>
</div></td>
<td><input type="text" id="quotePremium" th:field="*{ams360Policies[__${stat.index}__].quotePremium}" /></td>
<td><input type="text" id="commission" th:field="*{ams360Policies[__${stat.index}__].commission}" /></td>
</tr>
</tbody>
</table>
</div>
<h4>PMA Setup</h4>
<div class="row" sec:authorize="hasAnyRole('ADMIN','USER')">
<label>Sub Brand:</label>
<th:block th:switch="${loggedUser==null or loggedUser.client==null }">
<span th:case="false" th:text="${loggedUser.client.getLegalName()}" ></span>
<span th:case="true">Not Applicable</span>
</th:block>
<th:block th:switch="${loggedUser==null or loggedUser.client==null}">
<input th:case="false" type="hidden" name="subBrand" id="subBrand" th:value="${loggedUser.client.getLegalName()}" />
<input th:case="true" type="hidden" name="subBrand" id="subBrand" value="Not Applicable" />
</th:block>
</div>
<!-- Business Class Drop Down Field Below: -->
<div class="row">
<label for="businessClass" >Business Class: </label>
<select class="select-2 form-control" th:field="*{businessClass}" id="businessClass" >
<option value="Animal Services">Animal Services</option>
<option value="Arts Entertainment">Arts & Entertainment</option>
<option value="Auto Services">Auto Services</option>
<option value="Bonds">Bonds</option>
<option value="Carpet Furniture or Upholstery Cleaning">Carpet, furniture or upholstery cleaning</option>
<option value="Clock Making/Repair">Clock Making/Repair</option>
<option value="Contractor - Appliance Install/Repair">Contractor - Appliance Install/Repair</option>
<option value="Contractor - Carpentry (Exterior)">Contractor - Carpentry (Exterior)</option>
<option value="Contractor - Carpentry (Interior)">Contractor - Carpentry (Interior)</option>
<option value="Contractor - Concrete (No Foundations)">Contractor - Concrete (No Foundations)</option>
<option value="Contractor - Debris Removal">Contractor - Debris Removal</option>
<option value="Contractor - Doors and Windows">Contractor - Doors & Windows</option>
<option value="Contractor - Drywall/Plastering /Stucco">Contractor - Drywall/Plastering /Stucco</option>
<option value="Contractor - Electrical">Contractor - Electrical</option>
<option value="Contractor - Excavating">Contractor - Excavating</option>
<option value="Contractor - Fence Installation/Repair">Contractor - Fence Installation/Repair</option>
<option value="Contractor - Floor Covering (Not tile or stone)">Contractor - Floor Covering (Not tile or stone)</option>
<option value="Contractor - General/Builder/New Construction">Contractor - General/Builder/New Construction</option>
<option value="Contractor - Glass Install/Repair (Non-Auto)">Contractor - Glass Install/Repair (Non-Auto)</option>
<option value="Contractor - Grading/Snow Removal ">Contractor - Grading/Snow Removal </option>
<option value="Contractor - Handyman/Remodeling">Contractor - Handyman/Remodeling</option>
<option value="Contractor - Heating and Air">Contractor - Heating & Air</option>
<option value="Contractor - Interior Finish Work">Contractor - Interior Finish Work</option>
<option value="Contractor - Masonry">Contractor - Masonry</option>
<option value="Contractor - Other">Contractor - Other</option>
<option value="Contractor - Painting (Exterior)">Contractor - Painting (Exterior)</option>
<option value="Contractor - Painting (Interior)">Contractor - Painting (Interior)</option>
<option value="Contractor - Painting (Interior/Exterior)">Contractor - Painting (Interior/Exterior)</option>
<option value="Contractor - Paving">Contractor - Paving</option>
<option value="Contractor - Plumbing (Commercial)">Contractor - Plumbing (Commercial)</option>
<option value="Contractor - Plumbing (residential)">Contractor - Plumbing (residential)</option>
<option value="Contractor - Plumbing (Residential/Commercial)">Contractor - Plumbing (Residential/Commercial)</option>
<option value="Contractor - Siding and Gutter Install">Contractor - Siding & Gutter Install</option>
<option value="Contractor - Tile/Stone/Marble/Mosaic/Terrazzo">Contractor - Tile/Stone/Marble/Mosaic/Terrazzo</option>
<option value="Daycares">Daycares</option>
<option value="Domestic Workers">Domestic Workers</option>
<option value="Educational Services">Educational Services</option>
<option value="Farm">Farm</option>
<option value="Food and Beverage">Food & Beverage</option>
<option value="Generic BOP/Package (GL/Property)">Generic BOP/Package (GL/Property)</option>
<option value="Homecare">Homecare</option>
<option value="Homeowners Association">Homeowners Association</option>
<option value="Hotel/Motel">Hotel/Motel</option>
<option value="Janitorial">Janitorial</option>
<option value="Landscaping">Landscaping</option>
<option value="Lessors Risk">Lessors Risk</option>
<option value="Life Science">Life Science</option>
<option value="Locksmith">Locksmith</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Medical Services">Medical Services</option>
<option value="Miscellaneous Services">Miscellaneous Services (Not Construction Related)</option>
<option value="Non-Profit">Non-Profit</option>
<option value="Other">Other</option>
<option value="Personal Lines (Non-Commercial)">Personal Lines (Non-Commercial)</option>
<option value="Personal Services (Beauty, Wellness, Etc.)">Personal Services (Beauty, Wellness, Etc.)</option>
<option value="Personal Trainers/Fitness Instructors/Yoga Instructors">Personal Trainers/Fitness Instructors/Yoga Instructors</option>
<option value="Photography/Videography">Photography/Videography</option>
<option value="Professional Services">Professional Services</option>
<option value="Religious Organizations">Religious Organizations</option>
<option value="Retail/Wholesale">Retail/Wholesale</option>
<option value="Security Firms (Including Private Investigators)">Security Firms (Including Private Investigators)</option>
<option value="Sign painting/lettering (Exterior)">Sign painting/lettering (Exterior)</option>
<option value="Sign painting/lettering (Interior)">Sign painting/lettering (Interior)</option>
<option value="Solar Energy">Solar energy</option>
<option value="Sports/Recreation/Leisure (Other than Fitness and Trainers)">Sports/Recreation/Leisure (Other than Fitness & Trainers)</option>
<option value="Storage Facilities">Storage Facilities</option>
<option value="Technology">Technology</option>
<option value="Trucking/Transportation">Trucking/Transportation</option>
<option value="Upholstery Work">Upholstery Work</option>
<option value="Window Cleaning">Window Cleaning</option>
<option value="Workers Compensation">Workers Compensation</option>
</select>
</div>
<div class="row">
<label for="descriptionOfOps">Description of Operations:</label>
<input type="text" id="descriptionOfOps" th:field="*{descriptionOfOps}" required="true" />
</div>
<div class="formFooter">
<input id="send" type="submit" value="send" name="send" class="btn btn-success finish" data-loading-text="Sent!"/>
</div>
</form>
This is the controller, the addPolicy button is supposed to go to /addPolicy link, the send button is supposed to go to the /send link.
#GetMapping("/directBind")
public String getDirectBind(Model model){
List<String> businessAgencies = new ArrayList<String>();
businessAgencies.add("Personal");
businessAgencies.add("Commercial");
businessAgencies.add("Life");
businessAgencies.add("Benefits");
businessAgencies.add("Health");
businessAgencies.add("Non P and C");
model.addAttribute("businessAgencies", businessAgencies);
Ams360Policy ams360Policy = new Ams360Policy();
List<String> billTypeList = new ArrayList<String>();
billTypeList.add("Direct Bill");
billTypeList.add("Agency Bill");
model.addAttribute("billTypeList", billTypeList);
ams360Policy.setBillTypeOptions(billTypeList);
DirectBind directBind = new DirectBind();
List<String> businessAgencyList = new ArrayList<String>();
directBind.setBusinessAgencyList(businessAgencyList);
model.addAttribute("directBind", directBind);
return "directBind";
}
#RequestMapping(value="/addPolicy", params="addPolicy")
public String addPolicy(final DirectBind directBind, Model model){
directBind.getAms360Policies().add(new Ams360Policy());
model.addAttribute("directBind", directBind);
return "addPolicy";
}
#RequestMapping(value="/send", params="send")
public String send(Model model, #ModelAttribute(value="directBind") DirectBind directBind){
List<String> businessAgencyList = directBind.getBusinessAgencyList();
Mail mail = new Mail();
mail.setFrom("no-reply#hgitservices.com");
mail.setTo(new String[]{"stacief#hgitservices.com"});
mail.setSubject("Oli Affiliate - AMS360 & PMA Data Checklist");
Map<String, Object> mailModel = new HashMap<String, Object>();
mail.setModel(mailModel);
try {
emailService.sendSimpleMessage(mail, directBind);
} catch (Exception e) {
e.printStackTrace();
return ("redirect:/?sentMessageFail");
}
return ("redirect:/?sentMessage");
}
#RequestMapping(value="/email")
public String email(){
return "emailMessage";
}
}

If you are using javascript or js framework like jQuery you could bind the button to a function which will submit the form to specified action.
See Process a Form Submit with Multiple Submit Buttons in Javascript for details.

I infer, you intent is to use one spring controller to process submit actions from two submit buttons.
You can use same name and different value attribute for the two html input button`s. The buttons name and value attribute are sent to controller as request parameter. This will allow the controller to identify which button was clicked and take appropriate action.
<input id="send_id" type="submit" name="action" value="send"/>
<input id="addPolicy_id" type="submit" name="action" value="addPolicy"/>
#RequestMapping(value="/directBind")
public String doExecute(#RequestParam("action") String action, Model model, #ModelAttribute(value="directBind") DirectBind directBind){
if (action=="send"){
//do something
send();
}
if (action=="addPolicy"){
//do something
addPolicy();
}
}

displaying tables in html depending on selection

How do i create a jsp page wherein, i have 3 option in my html dropdown (using 'option' option), and when i choose each option, a different table has to be displayed depending on the option.
my html code is:
<html>
<title>
customer info
</title>
<body>
<center>CUSTOMER INFORMATION</center>
Customer Name: <input type="text" name="name"/>
<br>Customer Segment/Type:
<select>
<option value="prepaid">prepaid</option>
<option value="postpaid">postpaid</option>
</select>
<br>Circle:
<select>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Gujarat">gujarat</option>
<option value="Maharashtra">Maharashtra</option>
</select>
<CENTER>SERVICE INFORMATION</CENTER>
select package:
<select>
<option value="silver">silver</option>
<option value="gold">gold</option>
<option value="platinum">platinum</option>
</select>
<form action="my_package">
<input type="submit" value="show package" name="Submit" />
</form>
</html>
for each type of package, a different table has to be displayed describing the package.

You need to bind the hide/show to the change function of the select tag,
<select id="myselection">
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
<script>
$('#myselection').bind('change', function(){
if($('#myselection option:selected').attr('id') == "si"){
$('#si_table').show();
$('#iu_table').hide();
}
else if($('#myselection option:selected').attr('id') == "iu"){
$('#si_table').hide();
$('#iu_table').show();
}
});
</script>
$('#myselection').on('change', function() {
if ($('#myselection option:selected').attr('id') == "si") {
$('#si_table').show();
$('#iu_table').hide();
} else if ($('#myselection option:selected').attr('id') == "iu") {
$('#si_table').hide();
$('#iu_table').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Your drop down</label>
<select id="myselection">
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
<div id="si_table">
<p>First Table</p>
<table border=1>
<thead>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
<th>Sit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sit</td>
<td>Dolor</td>
<td>Ipsum</td>
<td>Lorem</td>
</tr>
<tr>
<td>Sit</td>
<td>Dolor</td>
<td>Ipsum</td>
<td>Lorem</td>
</tr>
</tbody>
</table>
</div>
<div id="iu_table">
<p>Second Table</p>
<table>
<thead>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
<th>Sit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sit</td>
<td>Dolor</td>
<td>Ipsum</td>
<td>Lorem</td>
</tr>
<tr>
<td>Sit</td>
<td>Dolor</td>
<td>Ipsum</td>
<td>Lorem</td>
</tr>
</tbody>
</table>
</div>

How to set default dropdown value and selection based by localStorage data

I have this form:
<form id="suspendedProperties">
<p><h4>Select Station:
<select name="stationDropdown" id="stationDropdown" onChange="storeLocalContent('stationDropdown',this.value)" >
<option value="50028000">Tanama River</option>
<option value="50010500">Rio Guajataca, Lares</option>
<option value="60008002">Example River2</option>
<option value="60008003">Example River3</option>
<option value="60008004">Example River4</option>
</select>
</h4></p>
<p>Select Sample Medium:
<select name="sampleMediumDropdown" id="sampleMediumDropdown" onChange="storeLocalContent('sampleMediumDropdown',this.value)">
<option value="WS">WS(Surface Water)</option>
<option value="WSQ">WSQ(Surface Water QC)</option>
</select>
</p>
<p>Begin Date
<input type="date" />
</p>
<p>Hydrologic Event: <select name="hydroEvent" id="hydroEvent" onChange="storeLocalContent('hydroEvent',this.value)" >
<option value="4">4- stable, low stage</option>
<option value="5">5- falling stage</option>
<option value="6">6- stable, high stage</option>
<option value="7">7- peakstage</option>
<option value="8">8- rising state</option>
<option value="9" selected>9- stable, normal stage</option>
<option value="A">A- Not Determined</option>
<option value="X">X- Not applicable</option>
</select>
</p>
<p>Add:<input type="number" size="" id="containerCuantity" onChange="storeLocalContent('containerCuantity',this.value)"/> <select id="singleMultiContainer" name="singleMultiContainer" onChange="storeLocalContent('singleMultiContainer',this.value)">
<option value="single">Single container sample</option>
<option value="multi">Multiple sets container</option>
</select>
</p>
<p>Analyses Requested:(Applies to all samples)<br/></p>
<div id="analyses" >
<table align="center" cellpadding="10px">
<tr>
<td align="left"><input type="checkbox" name="analysis" value="C"> Concentration</input></td>
<td align="left"><input type="checkbox" name="analysis" value="SF"> Sand-fine break**</input></td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="analysis" value="SA"> Sand analysis**</input></td>
<td align="left"><input type="checkbox" name="analysis" value="T"> Turbidity</input> </td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="analysis" value="LOI"> Loss-on-ignition**</input></td>
<td align="left"><input type="checkbox" name="analysis" value="DS"> Dissolve solids</input></td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="analysis" value="SC"> Specific conductance</input></td>
<td align="left"><input type="checkbox" name="analysis" value="Z"> Full-size fractions**</input></td>
</tr>
</table>
</div>
<input type="button" value="Main Menu" onClick="window.location='SED_WE.html'"/>
<input id="nextButton" type="button" value="Add Sample info." onDblClick="getLocalContent(C)"/>
</form>
and I want to set up default selected options in the drop down value and in the other fields thier respective values. This is my JS:
function initialize() {
// Test to see if we support the Storage API
var SupportsLocal = (('localStorage' in window) && window['localStorage'] !== null);
var SupportsSession = (('sessionStorage' in window) && window['sessionStorage'] !== null);
// if either one is not supported, then bail on the demo
if (!SupportsLocal || !SupportsSession) {
document.getElementById('infoform').innerHTML = "<p>Sorry, this browser does not support the W3C Storage API.</p>";
return;
}
// if the localStorage object has some content, restore it
if (window.localStorage.length != 0) {
for(i=0;i<window.localStorage.length;i++){
getLocalContent(window.localStorage.key(i));
}
}
}
function storeLocalContent(elementId,value){
window.localStorage.setItem(elementId,value);
}
function getLocalContent(elementId){
document.getElementById(elementId).value = window.localStorage.getItem(elementId);
}
window.onload = function(){
initialize();
}
Is there any possible way to set the default values of the dropdowns to be the last value that the user chose?

Note that the only changes i made it was to add onChange="storeLocalContent(this.id,this.value);
and the function initialize(); made the rest of the work
<form id="suspendedProperties">
<label for="station">Select Station:</label>
<select name="stationDropdown" id="stationDropdown" onChange="storeLocalContent(this.id,this.value)" >
<option value="50028000">Tanama River</option>
<option value="50010500">Rio Guajataca, Lares</option>
<option value="60008002">Example River2</option>
<option value="60008003">Example River3</option>
<option value="60008004">Example River4</option>
</select>
<label for="sampleMediumDropdown">Select Sample Medium:</label>
<select name="sampleMediumDropdown" id="sampleMediumDropdown" onChange="storeLocalContent(this.id,this.value)">
<option value="WS">WS(Surface Water)</option>
<option value="WSQ">WSQ(Surface Water QC)</option>
</select>
<label for="date">Begin Date:</label>
<input naem="date" id="beginDate" type="date" onChange="storeLocalContent(this.id,this.value)" />
<label for="hydroEvent">Hydrologic Event:</label> <select name="hydroEvent" id="hydroEvent" onChange="storeLocalContent(this.id,this.value)" >
<option value="4">4- stable, low stage</option>
<option value="5">5- falling stage</option>
<option value="6">6- stable, high stage</option>
<option value="7">7- peakstage</option>
<option value="8">8- rising state</option>
<option value="9" selected>9- stable, normal stage</option>
<option value="A">A- Not Determined</option>
<option value="X">X- Not applicable</option>
</select>
<label for="containerCuantity">Add: </label><input type="number" size="" id="containerCuantity"onChange="storeLocalContent(this.id,this.value)"/>
<select id="singleMultiContainer"name="singleMultiContainer" onChange="storeLocalContent(this.id,this.value)">
<option value="single">Single container sample</option>
<option value="multi">Multiple sets container</option>
</select>
<label for="analyses">Analyses Requested:(Applies to all samples)<br/></label>
<div id="analyses" >
<table align="center" cellpadding="10px">
<tr>
<td align="left"><input type="checkbox" name="analysis" id="analysesC" value="C" onChange="isChecked(this.id,this.value)"> Concentration</input></td>
<td align="left"><input type="checkbox" name="analysis" id="analysesSF" value="SF" onChange="isChecked(this.id,this.value)"> Sand-fine break**</input></td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="analysis" id="analysesSA"value="SA" onChange="isChecked(this.id,this.value)"> Sand analysis**</input></td>
<td align="left"><input type="checkbox" name="analysis" id="analysesT" value="T" onChange="isChecked(this.id,this.value)"> Turbidity</input> </td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="analysis" id="analysesLOI" value="LOI" onChange="isChecked(this.id,this.value)"> Loss-on-ignition**</input></td>
<td align="left"><input type="checkbox" name="analysis" id="analysesDS"value="DS" onChange="isChecked(this.id,this.value)"> Dissolve solids</input></td>
</tr>
<tr>
<td align="left"><input type="checkbox" name="analysis" id="analysesSC" value="SC" onChange="isChecked(this.id,this.value)"> Specific conductance</input></td>
<td align="left"><input type="checkbox" name="analysis" id="analysesZ"value="Z" on onChange="isChecked(this.id,this.value)"> Full-size fractions**</input></td>
</tr>
</table>
</div>
<input type="button" value="Main Menu" onClick="window.location='SED_WE.html'"/>
<input id="nextButton" type="button" value="Add Sample info." onClick="setContainers()" />
</form>