Autofill next field from prior field

[jeffs88keys]

Hello,  I have a simple form. 

I want to fill in field:Arrival_Date with regular calendar popup.

However, when the user selectes field:Departure_Date,  I'd like it to default to the same value just entered in field:Arrival_Date so that the departure date can be easily selected based on the arrival date, not today's date which is the default.  Think of it in terms of an online reservation system for hotels.

Of course, all of this occurs prior to submitting the form.  It needs to be on the fly as the values are entered.

Is this possible?  I can't figure it out.

Thanks !!

[Ilyrian]

Hi @jeffs88keys
You could try the following: 
Sample DP: https://c0hbs114.caspio.com/dp/025a80009ee147aa71cd4b5fbf20

1. Disable the “Calendar popup” on the two Date Fields.
2. Insert a Header and Footer and disable the HTML Editor.
3. On the Header, add the code below.
 

<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>

4. Make the necessary fields required by ticking the “Required” checkbox.
5. On the Footer, add the code:
 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
$('#InsertRecordDeparture_Date, #InsertRecordReturn_Date').unbind();
$('#InsertRecordDeparture_Date, #InsertRecordReturn_Date').attr('autocomplete', 'off');
init_datepicker();

// Disables numeric keys for inserting date manually
$('#InsertRecordDeparture_Date, #InsertRecordReturn_Date').keypress(function(event){
event.preventDefault();
});
// refresh datepicker 
$('#InsertRecordDeparture_Date, #InsertRecordReturn_Date').keyup(function(event){
console.log(2);
init_datepicker();
});
});
function init_datepicker() {
let departureDate =  $("*[name=InsertRecordDeparture_Date]");
let returnDate =  $("*[name=InsertRecordReturn_Date]");
$('.hasDatepicker').removeClass('hasDatepicker');
$('*[name=InsertRecordDeparture_Date], *[name=InsertRecordReturn_Date]').datepicker('destroy');
departureDate.datepicker({
onSelect: function(date){
returnDate.datepicker( "option", "minDate", date);
}
});

returnDate.datepicker({
onSelect: function(date){
departureDate.datepicker( "option", "maxDate", date);
}
  });

  if( departureDate.val() > '' ) {
   returnDate.datepicker( "option", "minDate", departureDate.val());
 
  }

  if( returnDate.val() > '' ) {
   departureDate.datepicker( "option", "maxDate", returnDate.val());

  }
  
  // remove additional datepicker on datapage reload
  $('.ui-datepicker').each(function(i){
   if (i != 0) {
    $(this).remove();
   }
  });
 }


 function initCaspioFormValidate(formAppKey, initializer, justValidateConfig = null) {
  // Make sure the JustValidate is loaded
  if (typeof window.JustValidate !== 'function') {


console.error('JustValidate is not detected. Unable to initialize validator.');
   return false;
  }

  let validator = null; // Validator instance
  let formIsValid = false; // Flag to check if the form is already validated.

  // Use DataPage ready to make sure the form inputs will be detected.
  document.addEventListener('DataPageReady', function (event) {
   if (event.detail.appKey.includes(formAppKey)) {
    if (document.querySelector(`form[action*="${formAppKey}"] section[data-cb-name="cbTable"]`) == null) {
     // Skip when the form is submitted and the inputs are no longer available.
     console.log('Form is no longer available. Skipping validation initialization');
     return false;
    }

    validator = new window.JustValidate(`form[action*="${formAppKey}"]`, justValidateConfig);

    initializer(validator);
   }
  });

  // Intercept Caspio form submission so we can validate it first.
  document.addEventListener('BeforeFormSubmit', function(event) {
   // A in AppKey is capitalized in BeforeFormSubmit event
   if (event.detail.AppKey.includes(formAppKey)) {
    if (!formIsValid) {

     event.preventDefault(); // Stop form submission

     validator.revalidate().then(isValid => {
      formIsValid = isValid; // Update flag so next submit won't validate.

      if (formIsValid) {
       // Try to submit again
       document.querySelector(`form[action*="${formAppKey}"] input[type="submit"]`).click();
      }
     });
    }
   }
  });

  document.addEventListener('FormSubmitted', function(event) {
   // A in AppKey is capitalized in FormSubmitted event
   if (event.detail.AppKey.includes(formAppKey)) {
   formIsValid = false; // Update flag to enable validation again
   }
  });
 }

 initCaspioFormValidate(
  '[@cbAppKey]',
  function(validator) {
   validator
   .addField('#InsertRecordDeparture_Date', [
    {
    rule: 'required',
    errorMessage: '! Departure Date is required',
    }
   ])
   .addField('#InsertRecordReturn_Date', [
    {
    rule: 'required',
    errorMessage: '! Return Date is required',
    }
   ])
   .onFail((fields) => {
    console.log('failed fields: ', fields)
   });
  }
 );

</script>

6. If your two Date fields are named “Departure” and “Arrival”, change the “#InsertRecordDepature_Date” and “#InsertRecordReturn_Date” to “#InsertRecordDepature” and “#InsertRecordReturn”. Please refer to JavaScript elements.
7. The required fields on the DataPage are Departure Date, and Arrival Date. On the last part of the code, you will need to change the field names as well depending on which field is required.