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

Question

Question

Hiding the Submit Button until a Field is Populated from Lookup

asked on January 6, 2014

I have a form that requires a user to enter two fields to perform a SQL lookup.  However, the Submit button is visible and I do not want the user to have the ability to click on Submit until they pull valid information from the lookup.

 

Is there a way to hide the Submit button until a field has been populated by a lookup, through either a Rule or Javascript, to prevent the form from being submitted without data?

 

2 0

Answer

APPROVED ANSWER
replied on January 6, 2014

Yes! You can hide or even disable the submit button. You'll use JavaScript to accomplish this, but it is straightforward.

 

Hide the submit button:

$('.Submit').hide();

Show it again:

$('.Submit').show();

Disable the submit button:

$('.Submit').attr('disabled', 'disabled');

Enable the submit button:

$('.Submit').removeAttr('disabled');

As for the rule, you'll also define that within your JavaScript. Here's an example:

$(document).ready(function () {

//disable submit button until a button we added is clicked
    $('.Submit').attr('disabled', 'disabled');
    $('#donebutton').click(function () {
        $('.Submit').removeAttr('disabled');
    })

When the document loads, we disable the submit button. After the user clicks a special "done" button we added to the form, the submit button is enabled. If you need more help getting the code to work, just let me know and I'll try to help. Good luck!

1 0
replied on January 7, 2014

Thank you Eric, this scripting is most helpful. I will try it out and update the thread on my results.

0 0
replied on January 24, 2014

Hey Eric, what would the javascript look like if I wanted to enable the submit button when a field is not empty (instead of clicking a button)?

0 0
replied on January 24, 2014

When should the code check the field for its value?

 

You'd use a if/else statement sort of like this. In the following example, I'm referencing a field that has the empty CSS class.

  if ($('.empty input').val() !== "") {
    $('.Submit').attr('disabled', 'disabled');
  }
  else {
    $('.Submit').removeAttr('disabled');
  }

 

Keep in mind that you'll want to put this in an event (like $(document).ready...) so that it runs at the appropriate time.

 

 

 

0 0
replied on January 28, 2014

Eric-

I have been trying to apply your above code to a check box.  I am spinning my wheels so to speak.  I would like the Submit button hidden until the user clicks a confirmation check box.  

0 0
replied on January 28, 2014 Show version history

Hi Sean,

Try the following code. I have a checkbox field (with the checkbox CSS class added to it) with two options: "I agree" and "I disagree." The code checks to see if the "I agree" option is checked and, if it is, it shows the submit button.

 

$(document).ready(function() {
  $('.checkbox').click(function () {
    
    if($('input[value="I_agree"]').is(':checked')) //edit the value here to use your own.
       {
       $('.Submit').show();
       }
    else {
      $('.Submit').hide();
    }
  });                  
});

In the CSS section, add the following rule:

 

.Submit {display:none;}

Keep in mind that, instead of hiding the button, you could also disable the submit button until the appropriate checkbox is selected.

0 0
replied on January 29, 2014

Thanks Eric but this is not working for me. The CSS code does hide the Submit button but nothing happens after i check the checkbox.  I have tried this a few different ways with no luck.

0 0
replied on January 30, 2014

Did you add the checkbox CSS class to your checkbox field? You'll need to do this on the Edit page of the Form Designer in the Advanced tab of the field's settings.

 

The code as written won't work unless the checkbox's value is I agree. You can modify the code on line 4 by changing the value="I_agree" part to match your checkbox.

 

0 0
replied on January 30, 2014

Yes I do have checkbox as the CSS class on the advanced page. I also have I_confirm as the checkbox value.  Here is the code:

$(document).ready(function() {
  $('.checkbox').click(function () {
    if($('input[value="I_confirm"]').is(':checked'))
      }
      $('.Submit').show();
      }
    else
      {
      $('.Submit').hide();
      }
  });
});

 

0 0
replied on January 30, 2014

You have a syntax error (after your if statement you're using a closing brace instead of an opening one).

 

Try this:

 

$(document).ready(function() {
  $('.checkbox').click(function () {
     
    if($('input[value="I_confirm"]').is(':checked')) //edit the value here to use your own.
       {
       $('.Submit').show();
       }
    else {
      $('.Submit').hide();
    }
  });                 
});

 

1 0
replied on January 30, 2014

I should have seen that! Thanks, I'll go hide under a rock now...smiley

0 0

Replies

replied on January 6, 2015

As a feature request, would it be simpler for Laserfiche to add a field rule option to list the submit button?

 

Here is how it could work:

"Show or Hide"  ----  Field list (add here the Submit Button in this list)

when "Any" of the following is true

Field "Description" ---- "is not blank"

 

I think this would be a very small modification for LF developpers and would simplify implementing this process.

10 0
replied on September 5, 2017

I would like to do the same thing here... only for me, it's hiding the Submit button until someone has signed their signature at the end of my Form. I've attached an image of what I'm working with... HELP! You can ignore the bits about hiding the other signature box... and this DOES seem to hide the Submit button for me, it just won't show it once that Signature box is filled... I feel as though I'm extremely close to figuring this out, but by no means am a Java expert, so any help is appreciated! 

 

SignatureIssue.PNG
1 0
replied on December 8, 2017

Did you ever figure it out? I'm looking for something as well and I'm stuck in your same spot.

0 0
replied on January 6, 2014

The simple answer here is to have the fields filled by the lookup as required. Once you have those fields filled in, the submit button will be activated. If those fields are not filled yet, then you will not be able to successfully hit the "Submit" button, no matter how hard you try.

0 0
replied on January 7, 2014

The problem with having a required field in this particular scenario is that a user can simply enter anything in that field for the submit button to function regardless of the lookup results.

 

What I'm looking to accomplish is require the lookup to have a valid return of information prior to the user having the ability to submit the form.  The result field will be read-only with the lookup data, but you can't have a read-only field also be required (it's not in Form's logic).

 

Once the read-only field is filled in with the lookup information, the Submit button will show.

0 0
replied on January 7, 2014

okay, simple:

 

1. Make a hidden field

2. Have the lookup fill that field (doesn't really matter what it is)

3. Use javascript to hide/deactivate the submit button unless the hidden field and some other (non-hidden) field match up. This will ensure that if they did not do a lookup then they really wanted to get through the system you are setting up.

4. Kick back and relax

0 0
replied on May 29, 2015

Agreed!!!! the comment Above

0 0
replied on May 9, 2016

Dears i have tried using the below script in LF forms to hide the submit button, saved and tried to preview but it didn't work, please help me what is going wrong here..

$('.Submit').hide();

 

submit hide.png
submit hide.png (103.86 KB)
0 0
replied on May 9, 2016

Hi Afnan,

It's probably because the script has run before the document has finished loading (so the Submit button doesn't exist yet). Try putting it inside the document.ready() event like below:

$(document).ready(function(){
$('.Submit').hide();
});

Cheers, Dan

1 0
replied on May 10, 2016

Done, thanks !!

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

Sign in to reply to this post.