Knack Record-Update Listener w/JavaScript

I edited some JavaScript that, given an entry into a cost field, will calculate margin if a quote figure is entered or calculate the quote if a margin figure is entered. The script looks like:

From what I’ve read, to do something like this in Knack, I would need to use a Knack record-update listener. What would that code look like?

2 Likes

Hi Michael,

Welcome to the Knack forum :wave:

Is this what you’re looking for? The listener will depend on the view type you’re using.

Perhaps…I’m quite new at this.

We currently have a form with fields in which Site Survey Costs and Subcontractor Installation Costs are input by the user into two fields. The user can then enter a margin, which produces produces “Suggested Bid based on Margin Provided”, and/or enter “Marked Up Labor Cost”, which produces “Margin Based on Lump Sum Input”. Thes inputs/fields are independent from one another.

What I hope to do is eliminate the “CALCULATOR: Suggested Bid base on Margin Provided” and “CALCULATOR: Margin Based on Lump Sum Input” fiels. Providing an input into the “CALCULATOR: Margin” field would update the “CALCULATOR: Marked Up Labor Cost” field and vice-versa; the fields would be linked.

Your best approach depends on if you need to see the value update in real-time, or after submitting the form.

If the latter, you can define your logic with Record Rules, which don’t require you to write Javascript. Knack’s record-update listener has similar functionality as Record Rules but is intended for people who write code and need to take additional actions after the record is updated such as call other APIs.

If the former, you might achieve your goal with Equations but you mentioned wanting to eliminate those fields, so I’m thinking you’re probably looking for the Change method (jQuery), which allows you to update the value of an input based on another input’s value in real-time. Here’s an example of how that looks:

// Just an example, not intended to be copy pasted into Knack.
$('#input1').change(function() { // When the first input is changed
  var input1Value = $(this).val(); // Get the value of the first input
  $('#input2').val(input1Value); // Update the value of the second input
})

If none of the above, perhaps someone else may want to jump in. :slightly_smiling_face:

Thank you! Looks like the latter suggestion is what I am looking for. I presume I’d just add some similar lines of code for when the second input is changed, update the value of the first input…

1 Like

We got it! This is what the code looks like:

$(‘input#field_1366’).change(function() { // When the first input is changed
var marked_up_labor = $(this).val(); // Get the value of the first input
var survey_cost = document.querySelector(‘input#field_1363’).value;
var subcontractor_cost = document.querySelector(‘input#field_1364’).value;
var total_cost = Math.abs(Math.abs(survey_cost) + Math.abs(subcontractor_cost))
var margin = Math.round((marked_up_labor - total_cost) / marked_up_labor * 100) + “%”;

//var simplemath = Math.abs(Math.abs(marked_up_labor - survey_cost - subcontractor_cost) / marked_up_labor );

//$(‘input#field_1364’).val(simplemath); // Update the value of the second input
$(‘input#field_1365’).val(margin); // Update the value of the second input

});

},1); //set timeout value
});

// Set Trigger field to Triad Branch for Traid Site Visit Booking
$(document).on(‘knack-scene-render.scene_213’, function(event, view, record){
setTimeout(function(){

$(‘input#field_1365’).change(function() { // When the first input is changed
var margin = $(this).val(); // Get the value of the first input
var survey_cost = document.querySelector(‘input#field_1363’).value;
var subcontractor_cost = document.querySelector(‘input#field_1364’).value;
var total_cost = Math.abs(Math.abs(survey_cost) + Math.abs(subcontractor_cost))
var marked_up_labor = Math.round(total_cost / (1 - margin))

//var simplemath = Math.abs(Math.abs(marked_up_labor - survey_cost - subcontractor_cost) / marked_up_labor );

//$(‘input#field_1364’).val(simplemath); // Update the value of the second input
//$(‘input#field_1366’).clear;
$(‘input#field_1366’).val(marked_up_labor); // Update the value of the second input
$(‘input#field_1366’).keyup();

});

},1); //set timeout value
});

1 Like