Pre populate & disable fields via JavaScript tab

Hi All

I’m trying to create a booking tool (but this could be useful for many situations) as such im using a date range field with the timer option enabled instead of the end date and im trying to pre-populate and disabled the input (number) field and disable the select integer (minutes, hours days) field.

in the browser console i can add value=“60” and disabled=“disabled” as below to get it to do what i’d like, could anyone advise me how this can be achieved via within the tadabase builder? the value and disabled options are the only things i added below.

<div class="col-md-5" ng-if="$ctrl.showDuration"><!----><input type="text" value="60" disabled="disabled" class="form-control d-i-b m-r ng-pristine ng-valid ng-empty ng-touched" style="width: 100px;" ng-model="$ctrl.record[$ctrl.slug].durationVal"><select ng-model="$ctrl.record[$ctrl.slug].durationSlug" class="form-control d-i-b ng-pristine ng-valid ng-empty ng-touched" disabled="disabled" style="width: 100px;"><option value="" selected="selected">minutes</option><option value="h">hours</option><option value="d">days</option></select></div>

Thanks a bunch guys
Paul

Hey @HiPO!

This can be done using the following steps.

  1. Add a CSS class called “my-date-range” to the Date Range in the form
  2. Find the Component ID of the Form
  3. Add the following code ensuring that you change ‘component_ID’ to your forms component ID from step 2.

Copy and paste the following

var NUMBER_OF_MINUTES = "60";

TB.render('component_ID', function(data) {
    var durationInput = $(data.ele.find('.my-date-range input')[1]);
	durationInput.val(NUMBER_OF_MINUTES).change();
	durationInput.attr('disabled','disabled');
	data.ele.find('select').attr('disabled','disabled');
	data.ele.find('button.af-form-submit').on('click',function(){
	    setTimeout(function(){
	        durationInput.val(NUMBER_OF_MINUTES).change();
	    },500);
	});
});

Final Result.

1 Like

Your an absolute star chem, thanks a bunch

2 Likes