Cloud JavaScript - Show/Hide Submit based on Field matching

asked on May 12, 2022

Hello All,

We are using the Cloud version of Laserfiche, and I have a Form where I need to Show/Hide the Submit button as well as some basic Text based on the value of two fields. I'm attempting to use JavaScript in the New Form Designer to accomplish this, but I am by no means a JavaScript expert and believe I'm running into syntax issues.

The Form asks for a User to input a specific Number, which is then checked against a Lookup Rule and if a match is found, a second field is populated. If that second field is not blank, the JS code should then display certain text and enable/show the Submit button. If it IS blank, the JS code needs to display different text and keep the Submit button hidden.

The verification needs to be made each time the User changes the value in field 1 (think if they mistype the number or need to look it up, etc.) The fields in question are ID : "q16" (field 1) and ID: "q18" (field 2).

Here's the code I have so far (please excuse any errors, as I'm just learning JS):

/* Confirm match on Vendor Number with internal Records */
$(document).ready(function () {
$('#q16 input').on('change input click keydown', function () {
if ($LFForm.getFieldValues({fieldId: 16}) != $LFForm.getFieldValues({fieldId: 18})) {
$('.Submit').hide();
if ($('.warningText').length > 0 || $(LFForm.getFieldValues({fieldId: 18}) == ''){
return;
} else {
$('Vendor account cannot be confirmed, please re-enter Vendor Number and try again.').insertAfter('.#q3');
}
}
else
$('.warningText').remove()
$('Vendor account has been confirmed.').insertAfter('.#q3');
;
$('.Submit').show();
});
});

Any guidance would be greatly appreciated, and Thank you!

0 0

replied on May 12, 2022

I see syntax issues in lines 13 and 15. You're missing a semi-colon on line 13 and have a semi-colon by itself on line 15.

I recommend checking the browser's inspect functionality and the console in there as that can catch those kind of syntax errors and report them there.

Unfortunately, I'm not on Cloud, so I can't test the new designer Javascript, so I can't confirm there are no issues with the new items ($LFForm.getFieldValues).

Also, just a note - when posting code on this site, please use the "code" button to format it as such - will make it much easier to read. Here's your code with is tagged as code:

/* Confirm match on Vendor Number with internal Records */
  $(document).ready(function () {
    $('#q16 input').on('change input click keydown', function () {
        if ($LFForm.getFieldValues({fieldId: 16}) != $LFForm.getFieldValues({fieldId: 18})) {
            $('.Submit').hide();
            if ($('.warningText').length > 0 || $(LFForm.getFieldValues({fieldId: 18}) == ''){
                return; 
            } else {
                $('<p class="warningText"><font color="red">Vendor account cannot be confirmed, please re-enter Vendor Number and try again.</font></p>').insertAfter('.#q3');
            }
        }
        else
            $('.warningText').remove()
      $('<p class="warningText"><font color="green">Vendor account has been confirmed.</font></p>').insertAfter('.#q3');
            ;
        $('.Submit').show();
    });
});

0 0

View 4 previous replies

replied on May 12, 2022

Thank you Matthew! I'll check the errors you mentioned and try again. Also thank you for mentioning the Code button, I'll be sure to use that moving forward.

0 0

replied on May 12, 2022

Sadly the syntax changes to line 13 and 15 were not the culprit, JS still will not fire correctly. I'll keep digging!

0 0

replied on May 12, 2022

Oh, you're also missing curly brackets { and } after your else statement on line 12. Assuming lines 13, 14, and 16 are only supposed to happen in that else condition, those lines need to be wrapped in the brackets. Without them, line 13 is probably running on the else condition, but lines 14 and 16 would be running in all cases.

0 0

replied on May 12, 2022

Thanks Matthew, I've adjust the { } brackets around the lines you suggested but I still can't get the script to fire. I'm thinking it has something to do with line 3, the way I'm trying to call the field 16 with the .on piece. I'm not sure this works in the "new" form designer, but could be mistaken.

Here's the code as I have it now:

/* Confirm match on Vendor Number with TOL Records */
  $(document).ready(function () {
    $('#q16 input').on('change input click keydown'), function () {
        if ($LFForm.getFieldValues({fieldId: 16}) != $LFForm.getFieldValues({fieldId: 18})) {
            $('.Submit').hide();
            if ($('.warningText').length > 0 || $(LFForm.getFieldValues({fieldId: 18}) == '')){
                return; 
            } else {
                $('<p class="warningText"><font color="red">Vendor account cannot be confirmed, please re-enter Vendor Number and try again.</font></p>').insertAfter('.#q3');
            }
        }
        else {
            $('.warningText').remove();
			
			$('<p class="warningText"><font color="green">Vendor account has been confirmed.</font></p>').insertAfter('.#q3');
            
			$('.Submit').show();
		}
    });
});

0 0

replied on May 12, 2022

You might be right. Unfortunately, I can't test since I'm not in cloud.

Try adding a line like this before line 4: alert('test');

That may at least help you confirm whether or not line 3 is triggering in the cases you expect.

0 0

replied on May 12, 2022

Funny thing about the alert() piece, it appears it's disabled/blocked. I tried doing that and the Console error was "Ignored call to alert(). The document is sandboxed, and the 'allow-modals' keyword is not set". I'm no expert but I don't think it likes the alert() function.

I did try using console.log() piece, but that fails. I think this shows that line 3 is not working as it should.

0 0

replied on May 12, 2022

Yeah, you could put a conole.log line before line 3 and confirm that it's at least getting that far. If you can confirm that before line 3 triggers, but within it does not, then that would be an indication it isn't happening.

Unfortunately, at that point, I think you're getting into questions about what is different with the functionality of the new module in Cloud, which I can't help with. So hopefully someone else may be able to weigh in.

0 0

Question

Question

Cloud JavaScript - Show/Hide Submit based on Field matching

Replies

Sign in to reply to this post.