Disable Submit Button with Conditional Logic Using Correct Input Answer

Is there a way to create an input that requires a person to fill in the “correct’” answer to submit the form? 

Example:

Form question:

Please answer this question: what is 1 + 5?

 

If the user does *not* type in “6”, the form is not submitted.

This is simple to accomplish creating conditional logic, you could set to show the submit button only if the condition or conditions are met, if not met, the submit button won't show and form will not be submitted, please check the animated image example:

Here is my cloned version for you to test it: http://form.jotform.co/form/51975931486873

You can clone it if you want to take a deeper look: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

Here are some guides about conditions that may be of your interest: 

http://www.jotform.com/help/57-Smart-Forms-Using-Conditional-Logic

http://www.jotform.com/help/316-How-to-show-or-hide-a-field-in-the-form-based-on-the-other-field-input-or-selection

http://www.jotform.com/help/196-Hide-or-Show-Multiple-Fields-at-Once

http://www.jotform.com/help/297-Show-or-Hide-multiple-fields-at-once-using-form-collapse-tool

http://www.jotform.com/help/317-Configuring-Change-Thank-You-URL-after-submission-condition

If you have another question, please open a new thread, we will be glad to assist you.

Thanks! That is a very interesting solution.

Is there any way that this same scenario could be accomplished while also keeping the submit button visible consistently?

My only concern with this approach is I'll probably need to explain the technique before hand, as most folks are accustomed to seeing a submit button. If it is missing, they may assume the form is "broken".

Again, thanks for all of your help!

@johndmg

If submit button is shown than your users would be able to submit your form even if they did not insert correct values. Only other was that I could think of is to add page break inside of your form and then hide next button if conditions are not met. But basically it is the same solution as my colleague provided.

http://form.jotformpro.com/form/51975429134966? 

@grade4pagasa

Thank you for workaround you provided. 

I see. Thanks again for everyone's prompt reply.

You're welcome.

Feel free to contact us if you have any other question. 

Based on your last two responses above it seems you mean you want to show the submit button and just have it disabled instead.

It's possible to fake that with just the button plus an image and using conditional logic but I think you'd prefer to have it tied directly to the submit button itself instead.

Additionally yes, I have passed this along to our developers as a feature request on your behalf. I can't guarantee a timeframe but it will go into consideration and if there's any updates we'll let you know about it here.

"I think you'd prefer to have it tied directly to the submit button itself instead."

That is correct. Sorry if my question was not clear. I sincerely appreciate the feature request.

@grade4pagasa

That is a really great solution and very useful! Thanks again everyone. What a great forum!

@grade4pagasa Are you sure you are not a coder by some chance? :)

I actually had a similar idea as I started reading this thread so here it is in hope it helps someone.

What is does:

1. Takes 2 random numbers from 0 to 10 and asks you for the result of their sum
2. Until the number is correct a false button is shown
3. Once the numbers match, it shows the new button.

You can see here how it looks:

http://form.jotformpro.com/form/52005505865957

- Of course the top 3 fields with the values and results are going to be hidden and we do that by clicking on them with your right mouse button and select Hide Field option:

Now, to get numbers that change each time this is what we do - we add 1 form calculation (for now).

In its wizard we set it like so:

What is done here?

We add a random number by utilizing random() function which we get by clicking on that 3 dots button marked in the screenshot.

Now, since this will create a 0.xyz number and we need it to be from 0 to 10 we multiply it with 10. The same logic applies if you want to have numbers from 0 to 100 by multiplying the numbers with 100 instead.

Now we also do not want decimal places, so lets remove them by setting the advanced option to 0 decimal places.

OK, so we have set one field, now it is the hard part of creating that second value.

You must click on the first Form Calculation (the one that we had just set up) and click on Duplicate field:

That is it - the hard part is over ;)

Now we add another Form Calculation widget to the form and we set it up to sum the first and the second.

We now have a field that holds the total that the customer will need to type in, so the math part is now over :)

Now we add a text field that the user will type their result into.

I have used TextBox field for this:

Right above it I have also added the Text Field:

Now the Text field allows pipping and that allows us to show the numbers from the form calculations by adding them into the text field using their field names.

It looks like this:

<p>How much is {value1} + {value2} ?</p>

You can see here how to get Field tag / name:  How to find Field IDs & Names

OK, so that is all set. What we need now is to add another Text field to the form, which we will use for the submit button.

In this second once, I would place this:

<div class="form-buttons-wrapper" style="text-align: center;">
 <button class="form-submit-button fakeButton" disabled="" type="button">Submit</button>
</div>

It is basically the same HTML code that jotforms have for their submit button, with the slight difference of a fakeButton class.

Now, we should see 2 submit buttons on our form (one jotform's submit button that was added automatically for us, and the fake one that we have just added).

I would have gone with the image since usually this is how I did it, but seeing your CSS code @grade4pagasa it was shame not to use it as it will show the same button as the one under it (the real one).

So this is the CSS code that I have added to the form's custom CSS field:

.fakeButton {
 pointer-events: none;
 color: lightgray;
}

You can add it by following the steps here: Inject Custom CSS Codes

So what is left are conditions.

We set them similarly to what was shown by my colleague David at the top, so we have something like this:

The first Submit - the one that we are showing is the submit button, while the second (the one that we are hiding) is actually the Text element.

All that is left is to Preview and comment back how you like it :)

This is the link to the clone with the Form Calculations hidden so you can see the same as your users would: http://form.jotformpro.com/form/52006861010945

Wow!, Thanks so much for this!

In my colleague's name, you are welcome and I agree this is a very useful feature :)

Do let us know if you want to have the minus/plus random as well, or have any other questions and we would be happy to assist with them :)