0
\$\begingroup\$

My input fields for the dates are not saved when the User presses the submit button. The page reloads and the values for the input fields are empty. So I'm using localStorage to save the values when it loads. I can't think of other JS functions or libraries that can help me clean this up.

<script type="text/javascript">
        const dateObj= {
      "fromDate":'', 'to_admitrange_date':'', 
      'from_dischargerange_date':'', 'to_dischargerange_date':''
    }

    jQuery(document).ready(function() {

      jQuery("#from_admitrange_date, #to_admitrange_date, #from_dischargerange_date, #to_dischargerange_date").on("change",function(){
        const fromDateRange =  jQuery("#from_admitrange_date").val();
        const toAdmitRange = jQuery("#to_admitrange_date").val();
        const fromDischargeRange = jQuery("#from_dischargerange_date").val();
        const toDischargeRange = jQuery("#to_dischargerange_date").val();

        dateObj.fromDate = fromDateRange;
        dateObj.to_admitrange_date = toAdmitRange;
        dateObj.from_dischargerange_date = fromDischargeRange;
        dateObj.to_dischargerange_date = toDischargeRange;
        
        localStorage.setItem("fromDateRange", JSON.stringify(dateObj));
        localStorage.setItem("to_admitrange_date", JSON.stringify(dateObj));
        localStorage.setItem("from_dischargerange_date", JSON.stringify(dateObj));
        localStorage.setItem("to_dischargerange_date", JSON.stringify(dateObj));
      });

      //Get the value of the dates
      const getLocalItem = localStorage.getItem("fromDateRange");
      const getLocalItemToAdmitRange = localStorage.getItem("to_admitrange_date");
      const getLocalItemFromDischargeRange = localStorage.getItem("from_dischargerange_date");
      const getLocalItemToDischargeRange = localStorage.getItem("to_dischargerange_date");

      if(getLocalItem || getLocalItemToAdmitRange || getLocalItemFromDischargeRange || getLocalItemToDischargeRange){
        const getData = JSON.parse(getLocalItem);
        const getData2 = JSON.parse(getLocalItemToAdmitRange);
        const getDataFromDischarge = JSON.parse(getLocalItemFromDischargeRange);
        const getDataToDischarge = JSON.parse(getLocalItemToDischargeRange);
        // console.log("localStorage", getData.fromDate);
        // console.log("localStorage to_admitrange", getData2.to_admitrange_date);
        jQuery("#from_admitrange_date").val(getData.fromDate);
        jQuery("#to_admitrange_date").val(getData2.to_admitrange_date);
        jQuery("#from_dischargerange_date").val(getData2.from_dischargerange_date);
        jQuery("#to_dischargerange_date").val(getData2.to_dischargerange_date);
      }
      </script>
\$\endgroup\$
2
  • \$\begingroup\$ Is your code complete as you are missing closing tags and brackets })</script>? \$\endgroup\$
    – Blindman67
    Nov 12, 2022 at 17:14
  • \$\begingroup\$ Sorry missed the closing tags but yes it is complete and it is working. I just find it redundant that I have to stringify and keep declaring each variable \$\endgroup\$
    – JThao
    Nov 13, 2022 at 1:18

1 Answer 1

1
\$\begingroup\$

You can reduce duplication by creating a function to get the date inputs, and using Object.keys to map the values accordingly to the keys.

That allowed me to cut down around 15 lines of code:

const dateObj = {
    "from_admitrange_date":'', 'to_admitrange_date':'', 
    'from_dischargerange_date':'', 'to_dischargerange_date':'',
  }

  function getDateInputs (date_id) {
    let date_value =  jQuery(`#${date_id}`).val();
    dateObj[date_id] = date_value;
    localStorage.setItem(date_id, dateObj[date_id]);
  }

  jQuery(document).ready(function() {
    //Get the values from localStorage if it exists and set it in the input field
    localStorage.getItem("from_admitrange_date") ? jQuery("#from_admitrange_date").val(localStorage.getItem("from_admitrange_date")) : "";
    localStorage.getItem("to_admitrange_date") ? jQuery("#to_admitrange_date").val(localStorage.getItem("to_admitrange_date")) : "";
    
    localStorage.getItem("from_dischargerange_date") ? jQuery("#from_dischargerange_date").val(localStorage.getItem("from_dischargerange_date")) : "";
    localStorage.getItem("to_dischargerange_date") ? jQuery("#to_dischargerange_date").val(localStorage.getItem("to_dischargerange_date")) : "";

    // Get the keys from the dateObj and use them as a selector for the on change handler
    Object.keys(dateObj)
    .map((val) => {
      jQuery(`#${val}`).on("change", function() {
        getDateInputs(val);
      })
    })
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.