Hi there!
I have a very limited knowledge of coding and wondering if anyone could help me achieve the following?
I have 6 checkboxes and a submit button.
I would like the submit button to direct users to the next page only when all 6 checkboxes are ticked.
If any less e.g. 5 are ticked, I would like an error message to display “Sorry, that’s not correct, try again.”
Here’s the use case: I am building an online murder mystery game. At this stage in the game, you have to tick the boxes of everyone who you think has an alibi. All 6 characters have an alibi. If you select any less, you must go back and look at the evidence again. Once you have ticked all 6, you can proceed to the next part of the game.
Thank you in advance!! 
Here is my page setup if it helps:
Disable your button as default. Then add a custom validation that will enable the button when valid, and disable when invalid. When the button is enabled, you can click on the button to perform the action that you want.
$w("#checkboxGroup1").onCustomValidation((value, reject) => {
if (value.length < 3) {
$w("#button1").disable();
}
else {
$w("#button1").enable();
}
});
Hey there! Thanks so much for your reply.
Unfortunately it doesn’t seem to be working - the button will let you click through no matter how many check boxes are ticked.
The live page is here: https://mairinolan4.wixsite.com/mysite/alibi-submit
and here’s my coding (I swapped 3 to 6, as there are 6 check boxes)
Have I done something wrong?
@mairinolan You did not disable your button as default - uncheck “Enabled” as shown in the screenshot:
Or, add this to the beginning of your code in the page’s onReady():
$w("#button1").disable();
@yisrael-wix Hey there! Thanks so much again for your help! I’ve disabled the button.
Unfortunately now the button remains greyed out no matter how many checkboxes are ticked. It won’t allow me to click it at all.
If possible, I would like the button to always be clickable. As this is a puzzle game, it being greyed out until the correct number are ticked gives the answer away!
Here’s the page again:
@mairinolan I don’t see the problem. I tried the page on your site and it works perfectly. I see that you changed to value.length < 3 in the code. So, if I check 3 of the boxes, the Submit button is enabled just as it should be.
You can set the conditions as you wish. That is you can check how many boxes, which boxes, or even if certain combinations of boxes are checked. It’s up to you.
@yisrael-wix Hey there, are we looking at the same page?
https://mairinolan4.wixsite.com/mysite/alibi-submit
It definitely doesn’t work for me, the button remains greyed out no matter what. I’ve just tried incognito move and a different browser. Which browser are you using?
@mairinolan Here’s the page I’m on…
Here’s the button enable after checking 3 boxes:
@yisrael-wix I see that - but I’m just not getting the same!
Please advise what I might be doing wrong? Here’s a video I just captured of the same page
www.loom. com/share/93a4be360b97404fb034aac089c14004
@mairinolan AHA! I think this has to do with a recent release of performance improvements. Give me a moment…
Please try the site again.
@yisrael-wix No luck, I tried in incognito too for good measure!
If it helps at all, my follow up question was going to be if there’s a way to do this so that the button isn’t faded out at the start? I’d love for it to be clickable throughout, so it doesn’t give the puzzle away. Just that the only correct answer that takes you to the next page is with 6 checkboxes checked?
@mairinolan Of course you can keep the button clickable. It’s just that it’s easier to figure out what’s going on if you start with disabled and then enable or disable according to the conditions. No matter.
I tried again to be sure and it works fine:
I click on all 6 and the Submit button is enabled. There’s really nothing else I can do. If it works, then it works. Is the Submit button not enabled for you?
I tried this on two different browsers in incognito mode as well and it works perfectly.
Regarding keeping the button clickable… You can use whatever button state you want, and whatever validity conditions you want. It’s just a matter of coding the right combinations.
@yisrael-wix Thank you for all your help! It looks like it’s working now - it just took a little bit of time. Thank you so much!
Apologies in advance - I’ve a very limited knowledge of coding! When you say “coding the right combinations” what would the snippet of code look like with a particular combination? For example, if I wanted checkbox A and C to work, but B/D/E/F to be unticked?
The original coding I was working with was:
$w("#input1").onCustomValidation( (value, reject) => {if(value !== "Noel" && value !== "Dorothy"){ reject("invalid");}
In this case, I’ve set the values of the tick boxes to those e.g. “Noel”, “Dorothy”
Is this what you mean, and if so would this work?
I’d like the button to be visible/clickable at any time, but the link is only active when all the conditions are met!
I did this before on a text input with this:
$w("#submitButton").onClick(event => {
if($w("#input1").valid) {wixLocation.to("/case-overview");}
Please let me know if you have any thoughts? I’m just copy and pasting code at this point, I’m not sure what any of it means.
@mairinolan My first thought would be that you need to realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want.
What you want to achieve can be done through code, but it would be challenging for a non-coder to accomplish.
You may want to check out the Wix Marketplace - it’s a place where you can look for Corvid experts for hire.
And, you certainly should give a shot at learning how to code in Corvid. You might be interested in this Codecademy course on Wix programming .
Also, r ead the following articles that will help you start working with Corvid:
