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

Parameter request not returning actual value

I have a table that does not live in a form, but I want the button in each row to correlate and to delete the contact from that table row when it's clicked. I could do an ajax call but I was hoping to just handle it through a spring boot controller method. This is how I set it up.
#RequestMapping(value="/removeContact")
public String removeContact(final CarrierAppointment carrierAppointment, final HttpServletRequest req, Model model){
final Integer rowId = Integer.valueOf(req.getParameter("trashContact"));
carrierAppointment.getContactList().remove(rowId.intValue());
model.addAttribute("carrierAppointment", carrierAppointment);
return "redirect:/carrierAppointment/details/"+carrierAppointment.getId();
}
<table class="table table-striped" data-classes="table-no-bordered" data-striped="true" data-show-columns="true" >
<thead>
<tr>
<th>Contact Type</th>
<th>Contact Name</th>
<th>Contact's Email</th>
<th>Contact's Phone</th>
<th></th>
<th th:if="${role.isCarrierAdmin}" class="text-right"><a class="trigger-add-contact btn btn-default" id="addCommercialContact" name="addCommercialContact"><span class="fa fa-plus"></span></a></th>
</tr>
</thead>
<tbody>
<tr th:each="contact,stat : *{carrier.contactList}" th:if="*{carrier.contactList[__${stat.index}__].contactTable}=='Commercial Lines'">
<td>
<select class="form-control" th:field="*{carrier.contactList[__${stat.index}__].contactType}">
<option value="Account Manager">Account Manager</option>
<option value="Marketing Manager">Marketing Manager</option>
<option value="Underwriter">Underwriter</option>
</select>
</td>
<td> <input type="text" class="form-control" th:field="*{carrier.contactList[__${stat.index}__].contactName}"/></td>
<td> <input type="text" class="form-control" th:field="*{carrier.contactList[__${stat.index}__].contactEmail}"/></td>
<td><input type="text" class="form-control" th:field="*{carrier.contactList[__${stat.index}__].contactPhone}"/></td>
<td> <input type="hidden" value='Commercial Lines' th:field="*{carrier.contactList[__${stat.index}__].contactTable}"/></td>
<td class="text-right" th:if="${role.isCarrierAdmin}"> <button type="button" name="trashContact" th:value="${stat.index}" th:onclick="'window.location.href=\'/removeContact\''" class="btn btn-danger "><span class="fa fa-trash"></span></button></td>
</tr>
</tbody>
</table>
The line of code that is requesting the parameter and getting the value is where my code is getting hung up. It is returning null instead of a value. Any idea how to adjust this line of code so it actually gets the value that exists?
Maybe the way I have the onclick set up, it's not actually sending the row value through to the controller method?
This is exactly where in the code it is getting hung up:
public String getParameter(String name) {
this.handleQueryParameters();
ArrayList<String> values = (ArrayList)this.paramHashValues.get(name);
if (values != null) {
return values.size() == 0 ? "" : (String)values.get(0);
} else {
return null;
}
}

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();
}
}

Spring 3.1 Controller not accepting ajax post

I am creating an AJAX form using spring 3.1 MVC. I am confused and have searched the internet and stackoverflow for a solution to my problem but have been unsuccessful so far. I am Also using Tiles 2.2.2
I am getting a WARNING: Request method 'POST' not supported
The Controller methods
#RequestMapping(value="/createProject", method=RequestMethod.POST,headers ="Accept:*/*")
public #ResponseBody Project createProject(#RequestBody Project project){
try {
projectBusiness.createProject(project);
} catch (Exception e) {
e.printStackTrace();
}
return project;
}
#RequestMapping(value="/createProject", method=RequestMethod.GET)
public ModelAndView displayCreateProjectForm(){
ModelAndView mav = new ModelAndView("createProject");
mav.addObject("project", new Project());
return mav;
}
My JSP
$(function() {
var url = $('#myForm').attr('action'); //http://localhost:7001/ProjectPortfolioTracker/app/projects/createProject
$('#submitForm').click(function(e){
console.log("hello");
e.preventDefault();
var formData = $('#myForm').serialize();
alert(formData);
console.log('in form click');
$.ajax({
type: 'POST',
url: url,
data:formData,
success: function(){
alert('success');
},error: function(){
alert('failure');
},
}).done(function() {
alert("ajax post completed");
});
});
});
<body>
<h1>Create a Project</h1>
<table>
<form method="post" action="${pageContext.request.contextPath}/app/projects/createProject" id="myForm">
<tr>
<td>Description: </td><td><textarea id="description" name="description" ></textarea></td>
</tr>
<tr>
<td>Category:</td>
<td>
<select name="category">
<option value="marketing">Marketing</option>
<option value="sales">Sales</option>
<option value="accounting">Accounting</option>
</select>
</td>
</tr>
<tr>
<td>Estimated Duration:(in days)</td><td><input id="durationSlider" type="range" min="1" max="90" step="1" value="1"/></td><td><input type="text" id="durationValue" name="estimatedduration" readonly/></td>
</tr>
<tr>
<td>Estimated Cost:(in 100's of dollars)</td><td><input id="costSlider" type="range" min="1" max="500" step="1" value="1" /></td><td><input type="text" id="costValue" name="estimatedcost"readonly/></td>
</tr>
<tr>
<td>Objective:</td><td><textarea id="objective" name="objective"></textarea></td>
</tr>
<tr>
<td>Resources:</td><td><input id="resources" type="number" value="0" name="resources"/> </td>
</tr>
<tr>
<td>Status:</td>
<td>
<select name="status">
<option value="design">Design Stage</option>
<option value="working">Work in Progress</option>
<option value="finished">Finished</option>
<option value="publishing">Publishing</option>
</select>
</td>
</tr>
<tr>
<td>Supports:</td><td><textarea id="supports" name="supports"></textarea></td>
</tr>
<tr>
<td>ManagerID</td><td><input type="number" value="0" id="managerid" name="managerid"/></td>
</tr>
<tr>
<td><button type="submit" id="submitForm">Submit</button></td>
</tr>
</form>
</table>
I Should also mention I got the actual information to post through the ajax but I was not handling the controller code in an ajax way meaning i was still returing a view at the end of the method, since the change to using #ResponseBody and #RequestBody is when the problem started to happen
Forgive my horrible formatting I am still learning.

So The issue was the Headers paramenter of the #RequestMapping it didn't like the Accept:/ which I assumed to be to accepting anything when i changed it to Accept:"application/json" it started to work properly Thanks to all who commented trying to help

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>