Question

Disable Submit Button Based on 2 Different Fields

Forms

Updated February 15, 2023

asked on April 21, 2017

I have a form that has 2 single line fields. When the first field has a change, I need to check that fields value and make sure it is not null or empty. The second field needs to be checked when the page first loads to see if it has a value of 1. If field 1 has is note empty AND not null OR field 2 equals 1, then I need to show the submit button, else hide it. Here is the JavaScript I have created so far, but it is not working correctly. I am sure I am just missing something, but any help would be greatly appreciated.

 //Hide Submit button
  var $submit = $('.Submit');
    $submit.hide();
  
    $("#Field78").on('change', function(){
      
      if (($(this).val() != null && $(this).val() !="") || ($("#Field89").val() ="1")){
            $submit.show();
        } else {
            $submit.hide();
        }
    });

1 0

Answer

SELECTED ANSWER

replied on April 21, 2017

Oh, sorry. I do think the issue is that we left the $(this) in the function, and then changed it to a called function. "This" works when the field change executes the function, but not when it's invoked at the end of doc.ready.

$(document).ready(function() {
	var $submit = $('.Submit');
    $submit.hide();
  
    $("#Field90").on('change', evaluate);
    
    function evaluate(){
      
      if (($("#Field90").val() != null && $("#Field90").val() !="")||($("#Field89").val()=="1")){
            $submit.show();
        } else {
            $submit.hide();
        }
      };
  setTimeout(evaluate, 1500);
});

Let's try that.

2 0

Replies

replied on April 21, 2017 • Show version history

Hi Blake,

You need to use == in your IF statement, not just a single equals operator:

($("#Field89").val() == "1")

Also, if you haven't applied this patch yet, you should. There are some weird things going on with CSS and JS in 10.2, and this fixes them: https://support.laserfiche.com/kb/1013834/list-of-changes-for-laserfiche-forms-10-2-update-1-

0 0

View 3 previous replies

replied on April 21, 2017

Thank you @████████. While that very well could have been one problem, it unfortunately did not fix everything. Figuring I also need the function to be called when the form first loads because the 2nd field should already be populated with a 1 at that point, I changed the JavaScript to the following:

var $submit = $('.Submit');
    $submit.hide();
  
    $("#Field90").on('change', evaluate);
    
    function evaluate(){
      
      if (($(this).val() != null && $(this).val() !="")||($("#Field89").val()=="1")){
            $submit.show();
        } else {
            $submit.hide();
        }
      };
  evaluate();

It is still only working if field90 has a change though. Can you see anything else that I might be missing?

0 0

replied on April 21, 2017

You could try wrapping the whole statement in a document.ready and using setTimeout to delay the function by a bit. If it's relying on a lookup, then it might be running the evaluation before the lookup completes. This is configured with a 1.5 second delay on the evaluate function.

$(document).ready(function() {
	var $submit = $('.Submit');
    $submit.hide();
  
    $("#Field90").on('change', evaluate);
    
    function evaluate(){
      
      if (($(this).val() != null && $(this).val() !="")||($("#Field89").val()=="1")){
            $submit.show();
        } else {
            $submit.hide();
        }
      };
  setTimeout(evaluate, 1500);
});

0 0

replied on April 21, 2017

It is wrapped in a document.ready function already. I am trying to test it by using a default value in field89. I'm not sure if that's what's causing my problem? The production scenario will be that the form before this one will populate field89 with a 1 or leave it empty.

0 0

SELECTED ANSWER

replied on April 21, 2017

$(document).ready(function() {
	var $submit = $('.Submit');
    $submit.hide();
  
    $("#Field90").on('change', evaluate);
    
    function evaluate(){
      
      if (($("#Field90").val() != null && $("#Field90").val() !="")||($("#Field89").val()=="1")){
            $submit.show();
        } else {
            $submit.hide();
        }
      };
  setTimeout(evaluate, 1500);
});

Let's try that.

2 0

replied on April 21, 2017

Great catch!

1 0

replied on May 31, 2019

Hi,

I am trying to do a similar JS, how would I write the functions for 2 fields a criteria I need is to make sure both fields match? Currently there is only an error message that appears when the fields value entered do not match, how do I modify your java script to disable the submit button if those error message appear?

Thanks!

0 0

replied on February 15, 2023

This worked for me when a dropdown option (Emergency) was selected from a list generated by a lookup. I wanted the submit button to be hidden if Emergency was selected as a priority. Tried many different options and could not get anything to work until I tried what you see below.

____________________________________________

I created a hidden single line field (aka #q71)

______________________________________________________

and had a calculation set up to populate the field with the results of the dropdown based on lookup (Priority).

______________________________________________________

Then referred to the hidden field instead of the dropdown. Using the sample above, I came up with this:

$(document).ready(function() {
var $submit = $('.Submit');
$submit.hide();
$("#Field71").on('change', evaluate);
function evaluate(){
if (($("#Field71").val() != null && $("#Field71").val() !="Emergency")){
$submit.show();
} else {
$submit.hide();
}
};
setTimeout(evaluate, 1500);
});

Probably a Duct Tape solution, and for sure heavily plagiarized, but I had been trying to get hiding the submit button (if Emergency was selected) accomplished for over an hour, and this finally worked.

Thanks for your post!!!!

Christine

0 0

You are not allowed to follow up in this post.

Question

Question

Disable Submit Button Based on 2 Different Fields

Answer

Replies

Sign in to reply to this post.