The first part of my code is a datepicker for a "From" and "To", showing the date in MMDDYYYY format in a textbox and having the value in the From field 7 days prior to the current date.
Second portion are a lot of form functionality such as show and hide sections and making certain fields required or not and how the page submits to the next page.
Then the third section is how we show values selected from a select and show them in a textbox when certain buttons are chosen.
I am looking to see if its at all possible to get away from the repetition in my code - embracing "DRY" (Do not repeat yourself).
For example, I use datepicker a lot ... basically I am new to coding and looking for expert advice of how I should/can shorten my code or simplify my code to be more efficient and run smoother.
function resetDatePickers(){
var today = new Date();
var weekAgo = new Date();
var $from = $("#StartDate");
var $to = $("#EndDate");
weekAgo.setDate(today.getDate() - 7);
$from.datepicker({
changeMonth: true,
maxDate: today,
onSelect: function(dateText) {
$to.datepicker("option", "minDate", dateText);
}
}).datepicker('setDate', weekAgo);
$to.datepicker({
changeMonth: true,
maxDate: today,
minDate: weekAgo,
onSelect: function(dateText) {
$from.datepicker("option", "maxDate", dateText);
}
}).datepicker('setDate', today);
}
$(document).on('change', '#reporttype', function() {
var value = $(this).val();
var location = $("#location");
var loc = $("#loc");
var employeelist = $("#employeelist");
var chosendates = $("#chosendates");
var formattype = $("#formattype");
var submitbtn = $("#submitbtn");
var locationbtns = $("#locationbtns");
var locationtextarea = $("#locationtextarea");
var EmployeeName = $("#EmployeeName");
var employeelistbtns = $("#employeelistbtns");
var employeelisttextarea = $("#employeelisttextarea");
var generatereportform = $("form[name=generatereport]");
if (value === "checklistreports") {
generatereportform[0].reset();
location.show();
locationbtns.show();
locationtextarea.show();
loc.prop('required',true);
employeelistbtns.show();
employeelisttextarea.show();
employeelist.show();
chosendates.show();
formattype.show();
submitbtn.show();
generatereportform.attr("action", "index.cfm?content=reportsassociate");
EmployeeName.prop('required',true);
} else if (value === "locationreports") {
generatereportform[0].reset();
location.show();
locationbtns.show();
locationtextarea.show();
loc.prop('required',true);
employeelistbtns.hide();
employeelisttextarea.hide();
employeelist.hide();
chosendates.show();
formattype.show();
submitbtn.show();
generatereportform.attr("action", "index.cfm?content=reportslocation");
EmployeeName.prop('required',false);
} else {
generatereportform[0].reset();
location.hide();
locationbtns.hide();
locationtextarea.hide();
loc.prop('required',false);
employeelistbtns.hide();
employeelisttextarea.hide();
employeelist.hide();
chosendates.hide();
formattype.hide();
submitbtn.hide();
generatereportform.attr("action", "#");
EmployeeName.prop('required',false);
}
resetDatePickers()
});
// JS for Showing Chosen Locations in textarea
// Listens to the changes in #loc. Prepares the selected elements, and sets the result in
// #selected.
$("#loc").change(function() {
var selected = [];
$(this).find("option:selected").each(function() {
selected.push($(this).text());
});
$("#selected").val(selected.join("\n"));
});
// Selects all the options, and manually triggers the change() of #loc
$("#add").click(function() {
var loc = $("#loc");
loc.find("option").prop("selected", true);
loc.change();
});
// Deselects all the options, and manually triggers the change() of #loc
$("#rem").click(function() {
var loc = $("#loc");
loc.find("option").prop("selected", false);
loc.change();
});
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
// Listens to the changes in #EmployeeName. Prepares the selected elements, and sets the
// result in #selected1.
$("#EmployeeName").change(function() {
var selected = [];
$(this).find("option:selected").each(function() {
selected.push($(this).text());
});
$("#selected1").val(selected.join("\n"));
});
// Selects all the options, and manually triggers the change() of #EmployeeName
$("#add1").click(function() {
var emps = $("#EmployeeName");
emps.find("option").prop("selected", true);
emps.change();
});
// Deselects all the options, and manually triggers the change() of #EmployeeName
$("#rem1").click(function() {
var emps = $("#EmployeeName");
emps.find("option").prop("selected", false);
emps.change();
});
// End JS for Showing Chosen Associates in textarea
<textarea id="selected">
? It looks confusingly similar to a dual multiselect — but isn't. \$\endgroup\$