You are viewing limited content. For full access, please sign in.

Question

Question

Java Script code to hide/show the submit button based on the form lookup rule

asked on December 17, 2020

Am designing a form where the fields are populated based upon look rule.

One of the field is called Fund.

If the value of this field is any other value other than 200,201,202 i need to display a message "This form is only for employees with Fund Code 200,201,202" and disable the submit button or hide the submit button.

Below is the code is have for 1 condition. Need advice on what is incorrect and how i can handle all the 3 check. Can it be done in 1 if statement for all 3 checks (200 or 201 or 202)

 

$('#q6 input').change(function(){
      if ($('#q6 input').val() != 200)
    {
      $('.Submit').hide();
      $('.submitMsg').hide();
      $('.Submit').prop("disabled", true);

}

})

0 0

Answer

SELECTED ANSWER
replied on December 17, 2020

Hard to say for sure without additional testing, but the easy solution is to fall back on a "tried and true" method as a quick fix.

Change the type from "submit" to "button"

Then add the following JavaScript

$(document).ready(function(){
    $('#customSubmit').on('click',function(){
        $('.Submit').click();
    });
});

Basically, instead of instead of trying get the custom button to work as the submit button directly, that JavaScript makes it so the click event on the custom button just triggers a click event on the hidden Submit button.

1 0

Replies

replied on December 17, 2020

Rather than trying to write JavaScript, I usually do this:

  1. Set CSS to always hide the built-in submit button
    • .Submit {display: none !important;}
  2. Add Custom HTML with my own submit button
    • <button id="customSubmit" type="submit">Submit</button>
  3. Add CSS to style it as needed
  4. Use Field Rules to show/hide the custom submit button

 

I do a lot of custom JavaScript, but for something like this it isn't entirely necessary and you get a lot more control when it's your button rather than the one added automatically.

A few years back at Empower one of the LF engineers confirmed using type="submit" is enough for the form to run the validation and everything which makes it super easy to add your own.

3 0
replied on December 17, 2020

Thanks! Let me try this and see. Will keep you posted.

0 0
replied on December 17, 2020

Perfect that worked! Thanks again!

0 0
replied on December 17, 2020

I was testing the process after making the above changes and when i click submit to submit the form with my test data, it gives an error

Laserfiche Forms has encountered a problem.

An unexpected error has occurred. [LFF502-UnexpectedError]

This is what i did.

In CSS, i did

.Submit {display:none;}

In the forms i created a custom html to display Submit button.

I then control this through the field rules.

 

 

Any idea why the custom built Submit is causing this error.

0 0
SELECTED ANSWER
replied on December 17, 2020

Hard to say for sure without additional testing, but the easy solution is to fall back on a "tried and true" method as a quick fix.

Change the type from "submit" to "button"

Then add the following JavaScript

$(document).ready(function(){
    $('#customSubmit').on('click',function(){
        $('.Submit').click();
    });
});

Basically, instead of instead of trying get the custom button to work as the submit button directly, that JavaScript makes it so the click event on the custom button just triggers a click event on the hidden Submit button.

1 0
replied on December 18, 2020

Perfect! Added the click event and changed the type to button and it worked as expected. Thanks again!

0 0
replied on December 18, 2020

@SteveKnowlton

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.