Not applicable

Auto populate 2nd input field by checking a tick box

Hi All.

Hope all is well. I am new to Nintex form and workflow. I am getting along well and have deployed some solutions. Just stuck on a form feature that follows....

I've a tick box named "Same as Inbound" for the Outbound trip section of the Travel Request form. I've done the workflow that set the Inbound Arrival and Departure airports to that of the Outbound fields inputs if the "Same as Inbound" tick box is selected.

Outbound Section

- Fields (Departure Airport, Arrival Airport)

Inbound Section

- (Arrival Airport, Departure Airport)

Now, I've been asked to make a change where selecting the "Same as Inbound" tick box in the Outbound Section will auto populate the fields in the Inbound Section.

Seems this can be done using jQuery but I am not sure how.

Could you be kind as to assist me in doing this (Auto populate 2nd input field by checking a tick box)?

Thanks, Larry

0 Kudos
Reply
5 Replies
cassymfreeman
Automation Master
Automation Master

Re: Auto populate 2nd input field by checking a tick box

Paul Crawford​ I was thinking this could be done with calculated fields and formatting rules to hide the text box but you must have some jquery up your sleeve to do just this?

Reply
paul_crawford
Design Dabbler

Re: Auto populate 2nd input field by checking a tick box

Hi Larry

You and Cassy Freeman​ are right, this can be done with jQuery.

I have created this form:

Capture.PNG

the field settings for each field are:

Outbound Departure:

Capture.PNG

Outbound Arrival:

Capture.PNG

Same As Inbound:

Capture.PNG

Inbound Arrival:

Capture.PNG

Inbound Departure

Capture.PNG

Once all the fields are configured, add this javascript to the Custom Javascript of the form settings:

NWF$('#' + varSameAsInbound).click(function(){

var checkBox = NWF$('#' + varSameAsInbound);

if (checkBox.prop('checked') == true){

var outboundDeparture = NWF$('#' + varOutboundDeparture).val();

var outboundArrival = NWF$('#' + varOutboundArrival.val();

NWF('#' + varInboundArrival).val(outBoundDeparture);

NWF('#' + varInboundDeparture).val(outBoundArrival);

}

else

{

var nullValue = '';

NWF('#' + varInboundArrival).val(nullValue);

NWF('#' + varInboundDeparture).val(nullValue);

}

});

This will update the values when Same As Inbound is checked and clear the values when unchecked as below:

Unchecked:

Capture.PNG

Checked:

Capture.PNG

Hope this helps.

Let me know how you get on with this.

Regards

Paul

Reply
Not applicable

Re: Auto populate 2nd input field by checking a tick box

Niceeeeee.

Will try later today.... I was away

Thanks, Paul and Cassy

Reply
Not applicable

Re: Auto populate 2nd input field by checking a tick box

UPDATED, Corrected the problem with the following script...

NWF$('#' + Same).click(function(){

  var checkBox = NWF$('#' + varSame);

  if (checkBox.is(':checked') == true){

  var OutboundDeparture = NWF$('#' + varOutboundDeparture).val();

  var OutboundArrival = NWF$('#' + varOutboundArrival).val();

  NWF$('#' + varinboundArrival).val(outboundDeparture);

  NWF$('#' + varinboundDeparture).val(outboundArrival);

  }

  else

  {

  var nullValue = '';

  NWF$('#' + varInboundArrival).val(nullValue);

  NWF$('#' + varInboundDeparture).val(nullValue);

  }

});

......................................................................................

Hi Paul.

Thank you very much for your help. I created a new custom list from scratch and tried as show above.

Named the fields same as you did, pasted the JS in the form settings "Custom JavaScript" and published the form.

When it came to adding a new item, I get an error stating "The app Nintex Forms for Office 365 is out of date. Please update the app.".

As stated, I'm on O365 and updates are automatic. Is there something I've missed or done incorrectly.

Thanks, Larry

Reply
Not applicable

Re: Auto populate 2nd input field by checking a tick box

Hi Cassy. Below is what I sent to Paul. Is there something I'm missing?

...........................................................................................................

Hi Paul.

Thank you very much for your help. I created a new custom list from scratch and tried as show above.

Named the fields same as you did, pasted the JS in the form settings "Custom JavaScript" and published the form.

When it came to adding a new item, I get an error stating "The app Nintex Forms for Office 365 is out of date. Please update the app.".

As stated, I'm on O365 and updates are automatic. Is there something I've missed or done incorrectly.

Thanks, Larry

Reply