[Gelöst] Form – show a field only when another field it filled out

[Author]

Artikel

[leilaG]

Hello,

Is there any code to show a date field only when another date field it filled out? We would like the departure date to only show after the arrival date is filled out.

I've added the below code but not sure what to replace this with: eq '1')"

<div class="col-md-4">
<label>Arrival time</label>
[cred_field field='arrival-time' force_type='field' class='form-control' output='bootstrap']
</div>
[cred_show_group if="($(arrival-time) eq '1')" mode="fade-slide"]
<div class="col-md-4">
<label>Departure date</label>
[cred_field field='departure-date' force_type='field' class='form-control' output='bootstrap']
</div></div>
[/cred_show_group]

Thanks

[leilaG]

We realized that hiding the departure date will not solve the issue. The problem is users are selecting a departure date that is before the arrival date. We used the below code to stop this from happening, but it only seems to work in Chrome and not for our other users that prefer Safari or Firefox. Is there any way to make it work on all browsers?

Thanks

jQuery(window).load(function() {

var fromId = jQuery('input[name="wpcf-arrival-date[display-only]"]').attr('id');
var toId = jQuery('input[name="wpcf-departure-date[display-only]"]').attr('id');

var $from = jQuery( '#' + fromId );
var $to = jQuery( '#' + toId );

var alt_filed_arrival = jQuery('input[name="wpcf-arrival-date[datepicker]"').attr('id');
var alt_filed_departure = jQuery('input[name="wpcf-departure-date[datepicker]"').attr('id');

$from.datepicker('option', 'dateFormat', 'dd/mm/yy' );

$from.datepicker('option', 'minDate',0);
$from.datepicker('option', 'onSelect', function( selectedDate, obj ) {
if(selectedDate) {
var sd = selectedDate.split("/");

stamp = new Date(Date.UTC(sd[2], sd[1]-1, sd[0])).getTime();
stamp = parseInt(stamp/1000);
jQuery('#'+alt_filed_arrival).val(stamp);
$to.datepicker( "option", "minDate", selectedDate );
}
});

$to.datepicker('option', 'dateFormat', 'dd/mm/yy' );
$to.datepicker('option', 'minDate',0);
$to.datepicker('option', 'onSelect', function( selectedDate, obj ) {
if(selectedDate) {
var sd = selectedDate.split("/");
var newDate = sd[1]+"/"+sd[0]+"/"+sd[2];
stamp = new Date(Date.UTC(sd[2], sd[1]-1, sd[0])).getTime();
stamp = parseInt(stamp/1000);
jQuery('#'+alt_filed_departure).val(stamp);
$from.datepicker( "option", "maxDate", selectedDate );
}
});

});

[Shane]

Hi Leila,

Thank you for getting in touch.

Given that this is custom code there isn't much that we can do here in terms of assistance.

The most I can do is to look at the page in firefox and see if there is any errors being thrown in the console and let you know.

Thanks,
Shane

[leilaG]

Okay, understood. Thank you