Javascript/jQuery issue - lock submit button until an equation field is greater than 20

API & Customization
1

Hi there, 

I'm trying to build a feature into an existing application that performs a custom "validation rule".  Normally, this type of thing is accomplished by using Knack's built-in validation, but because the field is an equation field, I've turned to Javascript and jQuery as an alternative.

Essentially, I have a form for a purchase request which includes an estimated price, estimated tax, and estimated shipping.  Those fields are summed by an equation field on the form called "Estimated Total". 

My goal is to lock the submit button for the form until "Estimated Total" > $20.  

To that end, I've created a button called "Check Total" which the user theoretically clicks after inputting their estimated prices. Then, my code should execute and unlock the submit button. 

However, I keep getting errors in the console from my custom code and I'm too inexperienced to know what I'm doing wrong.  This is my code so far:

//Connor Code
$(document).on('knack-scene-render.scene_387', function(event, view, data, scene) { //select the scene view on which to execute
$('#kn-input-field_1596').append(`<div id="check-total-div"><input type="button" id="check-total" value="Check Total"></div>`); //create "Check Total" button
 
//Select and lock the submit button as long as buttonState === false
const submitButton ='.kn-submit button';
const buttonState ='';
//setup variable to contain the value of the estimated total
let totalCalc ='';

//Create function to check buttonState and unlock submitButton if buttonState === true
function checkButtonState(){
if(buttonState){
$(submitButton).attr('disabled', false)
console.log('Unlocking submitButton')
}else{$(submitButton).attr('disabled',true)
console.log('Locking submitButton')
};
};
//Call the function once to lock button state after scene renders
checkButtonState();

$('#view_795 .check-total').on("click", function() {
//select estimated total fields value and contain in totalCalc
totalCalc = $('#field_1596').val();
console.log(totalCalc); //log to make sure its in
 
if(totalCalc =20){
buttonState = true
console.log('totalCalc was greater than 20')
} elseif (totalCalc <20&&>0){
buttonState = false
console.log('totalCalc was less than 20')
}else{
buttonState = false
console.log('totalCalc was blank or there was an error')
}

//Call function to check submit button
checkButtonState;
});
});
 
The error I'm getting right now is:
Error evaluating custom code: SyntaxError: Unexpected token '{'
 
Any help or advice is appreciated!
2

Double check the selectors are correct, but it might be because you are reassigning the variable on this line:

if ((totalCalc = 20)) {

When you should be using an equality operator ===. In JavaScript one equals = means you want to assign the variable, and 3 equals means you want to compare them. 

Hope that helps
3

Thank you very much Kelson - that was causing the errors that were preventing the custom script from running.

Now it is running, but I'm still having trouble with the code. It looks like my IF statements regarding the button are not actually firing when the button is clicked.  Any thoughts?  I appreciate the time you've put into this already.

4

Hi Connor, 

A couple of syntax errors with your javascript:

  • The else if statement on this line must be two words: } elseif (totalCalc <20&&>0){
  • The condition is not following correct syntax: (totalCalc <20&&>0)

Replace that line of code with this and it should work (assuming the code logic is correct):

 } else if (totalCalc < 20 && totalCalc > 0) {


I work as a full-time web developer writing custom code for my clients on Knack, reach out if you need more help. 
Best Regards, 
Kelson
https://www.ksensetech.com/knack/
kelson@ksensetech.com