Question

Hide Submit Button based on variable

Forms

Updated April 18, 2022

asked on April 18, 2022

I have a form with a status field.

If this status is "3", I have other fields hidden and a message to contact us is displayed.

However, the submit button is still present. How do I hide the submit button also, if the status is 3?

1 0

Replies

replied on April 18, 2022

Hi Chris,

You can use this if you want the button to be hidden or shown as soon as the field holds "3" or does not hold "3".

$(document).ready(function() {
    $("#q71 input").keyup(function(){
        if($(this).val() == "3"){
            $(".Submit").hide();
        }else{
            $(".Submit").show();
        }
    });
});

1 0

replied on April 18, 2022

The way I do it is with JavaScript.

Replace the "#Field1" with the ID of the "status" form field, and add the code to the custom javaScript section of the form.

$(document).ready(function() {
    $("#Field1").on("change, input", function(){
        if($(this).val() === "3"){
            $(".Submit").hide();
        }else{
            $(".Submit").show();
        }
    });
});

1 1

replied on April 18, 2022

If did but it is not hiding. I have the following:

$(document).ready(function() {
$("q71").on("change, input", function(){
if($(this).val() === "3"){
$(".Submit").hide();
}else{
$(".Submit").show();
}
});
});

0 0

replied on April 18, 2022

Hey Chris,

I assume that the status filed is just a plain text field? If so this code should work for you. It's a little different from what I posted before because I realized that you might have a form where the status is already set.
Let me know if this works.

$(document).ready(function() {
    toggleSubmit();
    $("#Field71").on("change, input", toggleSubmit);
});
function toggleSubmit(){
    var status = $("#Field71");
    if($(status).val() === "3"){
        $(".Submit").hide();
    }else{
        $(".Submit").show();
    }
}

0 0

replied on April 18, 2022

Hi Chris, you missed the pound sign in front of the field name. You need "#q71" instead of "q71". An easy mistake to make in jQuery.

0 0

View 1 previous reply

replied on April 18, 2022 • Show version history

I saw that and and added. Still nothing, lol. I now have the following:

$(document).ready(function() {
$("#q71").on("change, input", function(){
if($(this).val() === "3"){
$(".Submit").hide();
}else{
$(".Submit").show();
}
});
});

0 0

replied on April 18, 2022

0 0

replied on April 18, 2022

There are a couple of other things different from how I usually do it.

I use $(".action-btn") instead of $(".Submit").
I also just noticed that the "on" function has "change, input" instead of "change", "input".

If those changes don't fix it I'll put together a test form and then paste my code from it.

0 0

replied on April 18, 2022

I just saw Brian's solution. It's strength/weakness is that it only works for keyboard changes. Just something to be aware of--that might be exactly what you want.

0 0

replied on April 18, 2022

I made the changes and still no go. :-(

0 0

replied on April 18, 2022

I just tested the following code on forms 10.3. Don't forget to substitute the "#q1" with the ID of the field on your form. Laserfiche numbers all the fields on your form and sets the id attribute of the field to a "q" followed by that number. This should work whether the field is filled in from a lookup, from Javascript, or with the keyboard.

Be aware that this will work for a fill-in field. If you're working with a dropdown or radio button, it'll look slightly different.

$(document).ready(function() {
    $("#q1").on("change", "input", function(){
        if($(this).val() === "3"){
            $(".Submit").hide();
        }else{
            $(".Submit").show();
        }
    });
});

0 0

View 8 previous replies

replied on April 18, 2022

Thank for all you help. Still not working. I did notice where your values are blue, mine are red.

0 0

replied on April 18, 2022

What kind of field is #q71 on your form?

This only works for fill-in fields. You also have to move the cursor out of the field before the change event will be triggered.

0 0

replied on April 18, 2022

No need to worry about the color differences. The colors will be different depending on what you type the code into. What matters is the code itself.

0 0

replied on April 18, 2022

Q71 is a field populated from a look up table, based on another field's value.

0 0

replied on April 18, 2022

Hmmm! I thought that would work.

Is it a regular "single line" field other than being filled form a lookup?

0 0

replied on April 18, 2022

yes, it is a single line field.

0 0

replied on April 18, 2022

The only thing I can think of that could go wrong there is if the lookup field is inserting something invisible like space characters after or before the "3" with which it populates the field.

The following text does two things:

It inserts a "trim" function call to remove any extraneous spaces at either end of the character string when doing the comparison.
It inserts an alert function call to tell you what's actually in that field.

Go ahead and try this code. Remember to substitute your field name for my "#q1".

If it works, just remove the "alert" statement and you're good to go. If not, let me know whether the alert box pops up, and if so, what it shows.

$(document).ready(function() {
    $("#q1").on("change", "input", function(){
      alert(`Field value is *${$(this).val()}*`);
        if(trim($(this).val()) === "3"){
            $(".Submit").hide();
        }else{
            $(".Submit").show();
        }
    });
});

One more thing, note that the string in the alert statement is enclosed in back ticks, not single quote marks. If you copy and paste the text you won't have to worry about that, of course.

0 0

replied on April 18, 2022

I am completely stumped. This did not work either. I got no alert.

$(document).ready(function() {
$("#q71").on("change", "input", function(){
alert(`Field value is *${$(this).val()}*`);
if(trim($(this).val()) === "3"){
$(".Submit").hide();
}else{
$(".Submit").show();
}
});
});

0 0

replied on April 18, 2022 • Show version history

Ok, now we know more about what's going on. If the alert box didn't appear, then the event didn't fire.

While you're editing the javascript code, you should see fields to the right of the code. Above each field is a blue bar (at least on my version, which is Laserfiche 10.3). That bar tells you what the "id" is of the field. On your screen, what is the "id" of the field you want to watch? on my example, it's "q1".

Screenshot 2022-04-18 164910.jpg (48.18 KB)

| Download

0 0

replied on April 18, 2022

We got it working.

The Status Field was a part of a table and the table also had a class of "status", preventing the java action to work. Thank you all for jumping on this!!

0 0

replied on April 18, 2022

Woo-hoo Congratulations!! You worked hard for that one!

0 0

You are not allowed to follow up in this post.

Question

Question

Hide Submit Button based on variable

Replies

Sign in to reply to this post.