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

Question

Question

Can I hide submit button?

Forms
Updated January 6, 2023
asked on February 1, 2014

 Hello All

 

I have been trying to hide Submit button from starting point on my LF Forms but I don't seem to find it.  I only have one page for Form Submision and I like the submit button to show only if certain selection is made? 

 

 

3 0

Answer

APPROVED ANSWER
replied on February 1, 2014 • Show version history

The following should do the trick:

$(document).ready(function() {

  //cache the elements we will use
  var $submit = $('.Submit');
  var $Field1 = $('#Field1');

  //hide the submit button
  $submit.hide();

  //bind event handler to the dropdown field
  $Field1.change(function() {

    //if the user selects what we want, show the submit button
    if ($Field1.find(':selected').val() === "value we want"){
      
      $submit.show();
    }
    //if not, hide it
    else {
      
      $submit.hide();
    }
  });
});

Here, we start by assigning the submit button and the dropdown field to variables, which is a form of caching to avoid digging into the DOM every single time. Then we hide the submit button and bind a change event handler to the dropdown field. When the user makes a selection, we put the value through a simple if/else construct to see if their selection matches the one we want. If it does, we display the submit button. If not, we keep it hidden.

 

What you need to do in order to make this work in your form is to find the field ID of your dropdown field (which you can do by inspecting the form page) and use that instead. In most cases it should match the "q" identifier of the field div. For example, if the div ID is "q77" then the field ID will be "Field77". From there, simply change the condition inside the if statement to the actual value you want and you should be good to go.

2 0
View 6 previous replies
replied on February 3, 2014

Instead of using the field identifier to target the field, it is easier to add a CSS class to the field on the Edit page and then use that class to target the field.

 

Hiding the submit button this way with JavaScript does work, but the button may briefly appear at the beginning before disappearing after the page loads. To avoid this, you can use a CSS rule to hide the Submit button.

.Submit {display:none;}

 

0 0
replied on February 3, 2014

Thanks Eric  

 

I only have one page and I am using field show and hide to display the fields.  I don't have flashing issue with Button (Using Ege's method)  but I do have flashing issue with other field that I use forms hide and show.  I think you CSS method could help me here.  

 

I am not a programmer and usually is an struggle to implement a code and I work with examples.   If you could give me a working example I could learn from it that would be fantastic.   

 

When I use  .submit {display:none;} how can I condition it to show?

How can

0 0
replied on February 3, 2014 • Show version history

You'd use that CSS rule on the CSS and JavaScript page of the Form Designer in the CSS section.

 

Once you've hidden it, you'll use JavaScript or a field rule to get it to show based on other conditions. Code like what Ege mentioned will do this. That CSS rule is specific to the submit button; if you want to hide other elements using CSS, you'll need to target them.

 

For more code examples of showing/hiding fields with JavaScript, see this discussion.

0 0
replied on February 11, 2014

Thanks Eric , I just tested your suggrestion and used the CSS to hide the Submit button which worked for hidding the button.  I couldn't show it using show or hide field rules, I don't see any reference to Submit button.  Being none programer I would prefere using show and hide field rules. 

 

Any ideas?

0 0
replied on February 12, 2014

Unfortunately you cannot hide the submit button using field rules. The only way to hide it is to use CSS or JavaScript as Ege mentioned. We'll consider adding the submit button to field rules for a future release of Forms.
 

0 0
replied on October 1, 2015

What in the code would change if I was trying to hide the submit button until the signature field is completed?  How would that change the code?

replied on October 6, 2015

What in the code would change if I was trying to hide the submit button until the signature field is completed?  How would that change the code?

0 0
replied on October 6, 2015

You can use something like

$(document).ready(function () {
  
  $('.Submit').hide(); //hide the submit button by default
  
  $('.signSignatureBtn').click(function () {
    $('.Submit').show(); //show the submit button after signing
  });
  
  $(document).on('click','.form-sig-remove',function(){
    $('.Submit').hide(); //hide the submit button if the signature is removed
  });
  
});
3 0
replied on October 7, 2015

Thanks Alex, this is great!

0 0
replied on February 17, 2022

This worked for me too (hide submit until signagture completed)!
Thank you!
Christine

0 0

Replies

replied on February 3, 2014

Thanks Ege

 

Your code was perfect fit and works great. Thanks for you help

0 0
replied on March 5, 2014

Hi

I have added Ege's response (below) in my Form and it works very well.  I need to combine anohter filed with "Field Activity submission".    Everthing being the same, the condition should be if "Field Activity submission" and another new field value does equal empty (single field that get a string inserted into it from lookup database) than show submit button. 

Note "Field Activity submission" coming from a drop down field and new value that is called "Activity Submitted On:" is a single text field.

 

I appreciate additional help on this. 

 

================================

$(document).ready(function() {
 
  //cache the elements we will use
  var $submit = $('.Submit');
  var $Field1 = $('#q1');
 
  //hide the submit button
  $submit.hide();
 
  //bind event handler to the dropdown field
  $Field1.change(function() {
 
    //if the user selects what we want, show the submit button
    if ($Field1.find(':selected').val() === "Field Activity submission","Check-In Submission",
           
      $submit.show();
   
    if ($Field1.find(':selected').val()
    }
    //if not, hide it
    else {
      
      $submit.hide();
    }
  });
});
====================================

0 0
replied on March 17, 2014

Here is some screen shuts that some of you have asked for this issue that I have.

 

In summery,  I want  if condition to hide Submit button when "Field Activity Submission" is selected and "Activity Submittd on:" is NOT

 

Following image we have "Field Activity Submission" selected but the data for "Activity submitted on:" is blank and the form look good and we need the submit button at this stage.

 

 

The following image show "Field Activity Submission" is selected and "Activity Submitted On:" is field with the date that submission is done.   I have issue on this page, I don't need Submit button to show at this stage.

 

0 0
View 1 previous reply
replied on March 17, 2014

Are those fields populated with a lookup when the Field Activity Submission is selected?

0 0
replied on March 17, 2014

Yes, they are.  Initially they are submitted but at this stage the fields are populated from SQL DB via Forms Lookup .

0 0
replied on March 17, 2014

What triggers the lookup?

0 0
replied on March 17, 2014

Sales Agent Name and sales agent code trigger the lookup

0 0
replied on March 17, 2014

Sales Agent Name and sales agent code trigger the lookup.  I have SQL view that quries last activity for teh sales agent.

0 0
View 5 previous replies
replied on March 17, 2014

Okay, so it is a lookup based on two fields? Where is the auto-fill button that triggers the lookup?

0 0
replied on March 17, 2014

The field gets populated by Lookup rules, please see the image below.  It the last the Row that inserts the data from the SQ table into the "Activithy submitted on:" field.

 

0 0
replied on March 17, 2014

There isn't a good way to conditionally hide the submit button in this scenario due to the way JavaScript works.

 

What I would recommend is leaving the Submit button there, but not allowing the user to submit the form if the Activity Submitted On field has data in it.

//Replace 'field' with the ID of the Activity Submitted On field.

(".Submit").click(function(e) {
   if ($("#field").val() !== "") {
      e.preventDefault();
      alert("There is no need to submit this form.");
   }
});

Essentially, when a user clicks Submit, the form checks if the Activity Submitted On field has a value in it. If it does, the form is not submitted, and the user gets a popup message.

0 0
replied on March 17, 2014

Yes, as you indicated that should work from me.  Unfortunately I am not getting the result.  I tried putting the code at end of the exsiting code and between the code as an else if condition but its not disabling the button.   I did replace the field with  #q168 (Field ID)

0 0
replied on March 18, 2014

Try this:

 

$(document).ready(function () {

    $('form').submit(function (ev) {
        if ($("#q168 input").val() == "") {
            ev.preventDefault();
        }
        else
            $(this).unbind('submit');
    });

    $('.Submit').click(function () {
        if ($("#q168 input").val() !== "") {
            $('form').unbind('submit');
        }
        else
            alert("There is no need to submit this form.");
    });
});

 

0 0
replied on March 18, 2014

Hi guys

 

Thanks Eric your code did work but it is also effecting other pages.  I need to have a "and" condition to have this working properly on an specific page. 

 

 

We have Select Activity with   "Field Activity Submission" that is a drop down list this is on #q1;  and we, also, have "Activity Submitted on:" field that is on #q168. 

 

The button should be disabled when "Field Activity Submission" is selected and "Activity Submitted on:" has some value in it (not blank)

 

I tried the follwoing combination but it did not work:

 

 

$('form').submit(function (ev) {

  if (($("#q168 input").val() !== "")&&("#q1"=="Field Activtiy Submission")) {
  ev.preventDefault();
0 0
replied on March 18, 2014 • Show version history

Ok, try this:

 

$(document).ready(function () {

    $('form').submit(function (ev) {
        if (($("#q3 input").val() !== "") &&($('#q1 option:selected').val() == "Field Activity Submission")) {
            ev.preventDefault();
        }
        else
            $(this).unbind('submit');
    });

    $('.Submit').click(function () {
      if (($("#q3 input").val() == "") &&($('#q1 option:selected').val() !== "Field Activity Submission")) {
            $('form').unbind('submit');
        }
        else
            alert("There is no need to submit this form.");
    });
});

Basically, we're preventing the default submit behavior if those conditions are met, but we're also checking those conditions again when the submit button is clicked. This way if the fields have changed we can allow the user to submit the form.

0 0
replied on March 18, 2014

We have the form working properly for each page.  with exception that the click only show the alert once which is not a big deal.

 

I some modification to your code to get it working with both my submission forms.   I realy appreciate you guys for wonderful help.. Thank you.

 

I did the following changes to get it working:

 

 

$(document).ready(function () {

    $('form').submit(function (ev) {

      if (($("#q168 input").val() !== "") &&($('#q1 option:selected').val() == "Field Activity Submission"))
      {

            ev.preventDefault(); alert("Last Activity Has been Submitted. Please Check-In before submitting another Field Activity.");


        }

 

else

            $(this).unbind('submit');
          

    });


});

 

 

$(document).ready(function () {

    $('form').submit(function (ev) {

      if (($("#q168 input").val() == "") && ($('#q1 option:selected').val() == "Check-In Submission"))
      {

            ev.preventDefault(); alert("Your last Check-In Submission is pending.  Please Submit Activtiy to complete .");


        }

 

else

            $(this).unbind('submit');


            

    });


});

0 0
replied on October 19, 2016

I actually want to hide the submit button until a certain date field is filled in.  I've set the variable for the date field to $FinalDec

How can I write that code?

If ($FianlDec....? help?

0 0
replied on January 6, 2023

Hide/Show submit button using field rule is supported with new form designer in Forms 11 Update 3.

You can see other changes of Forms 11 Update 3 from  https://support.laserfiche.com/kb/1014413/list-of-changes-for-laserfiche-forms-11-update-3 and get Forms 11 Update 3 from Laserfiche 11 package  https://support.laserfiche.com/kb/1014263/software-versions-and-fixes-included-in-the-laserfiche-11-download-package. 

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

Sign in to reply to this post.

Details
Related Posts
Loading ...