JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<label>First Name:*</label>
<input class="rounded1 validate[required]" id="FirstName" name="FirstName" type="text" /><br>
<label>Last Name:*</label>
<input class="rounded1 validate[required]" id="LastName" name="LastName" type="text" /><br>
<input type="checkbox" name="chkCheckbox1" id="idCheckbox1" class="checkers"><label for="Checkbox1"><b> Checkbox1</b></label><br/>
<input type="checkbox" name="chkCheckbox2" id="idCheckbox2" class="checkers"><label for="Checkbox2"><b> Checkbox2</b></label><br><br>
<select name="dropdown1" id="dropdown1" multiple="multiple" class="multiselect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<select name="dropdown2" id="dropdown2" multiple="multiple" class="multiselect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select><br>
<input type="radio" name="oppcat" value="1h">1
<input type="radio" name="oppcat" value="2">2
<input type="radio" name="oppcat" value="3">3
<br/>
<button type="submit" value="Save" id="Save" onclick="save()">Submit Survey</button>
JavaScript
//Local Storage
Storage.prototype.setObj = function (key, obj) {
return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function (key) {
return JSON.parse(this.getItem(key))
}
var Survey = {},
Surveys = {},
save = function () {
$('input, select, textarea').each(function () {
var value = $(this).val();
var name = $(this).attr('name');
if($(this).hasClass('checkers')){
value = $(this).is(":checked")
if(value){
value='on';
}else{
value='off';
}
}
if(this.name.match(/^multiselect_/)){//removes buggy append
return false;
}
console.log('Saving');
console.log(name + ':' + value);
Survey[name] = value;
});
if (localStorage.getObj('Surveys') != null) {
Surveys = localStorage.getObj('Surveys');
}
Surveys[$('#FirstName').val() + '.' + $('#LastName').val()] = Survey; //store in big list
localStorage.setObj('Surveys', Surveys);
}
//Multiselect
$(document).ready(function() {
$(".multiselect").multiselect({
header: "Choose up to 5 areas total",
click: function (event, ui) {
if (ui.checked && $(".multiselect").children(":checked").length >= 5) {
return false;
}
},
selectedList:5
});
});