So, moving on from my last post I was able to create a custom multi step form by adding java to a Wix slider, input elements and buttons. The form has functioning next and back buttons and works well. However, I want to disable the next button until the input fields have been filled in so that there are no errors when it comes to submission at the end. Any ideas?
something like this…
if ((($w(‘#input1’).value) === null ) ||
(($w(‘#input2’).value) === null ) ||
(($w(‘#input3’).value) === null ))
{
$w('#nextButton').disable();
} **else** {
$w('#nextButton').enable();
}
1 Like
Hi!
You can always set certain fields as “required” and so it will force the user to complete/fill those fields before the form is finally submitted.
You can turn a field to a “required” on by entering the component settings and check the relevant checkbox.
Doron.
[@dylanmoss1995] Mike’s suggestion is closer to what you are looking for. Doron’s solution works as a way to ensure that all fields are complete and, with validation, contain the expected data formats.
What you need to do on top of this is catch an event that allows you to test to see if you can execute the code Mike is proposing. To do that you should add an event handler to each required field that responds to onChange. You can use the same handler for each input element you need to check since it will check all element values.
Steve
Hi Don,
The fields are are set to required but that doesn’t stop users changing to the next slide and then they can’t submit at the end. That method also means they have to go back through the form to find out what the errors are.
The method Mike posted is what I was thinking of, I’ll give it a go and let you know if it works Mike. Thank you both for the suggestion.
Thanks Steve. It’s been a long time since i’ve used code, I’ll give it a go and get back to you!
Update
I added IF/ELSE statement to the onclick function of the next button. As shown below
If (($w(‘#fname’).value) === “”) {
$w(‘#button1’).disable();
} else {
$w(‘#button1’).enable();
$w(‘#slideshow’).changslide(1);
}
I did try .value === null but I had no luck. However, with the code shown above I was able to disable the button but it changed slide first and then disabled. So, when I click back to slide 1 the next button was disabled.
if you are want to go that route then code something like this…
$w.onReady( function () {
$w(‘#button1’).disable();
$w(‘#button1’).onClick( function () {
$w('#slideshow').changslide(1);
})
})
export function fname_change(event, $w) {
If (($w('#fname').value) !== “”) {
$w('#button1').enable();
} **else** {
$w(‘#button1’).disable();
}
}
2 Likes
I tried the suggestion above which worked but only for the first name field but I cant make it work for the last name field too. I’ve tried multiple ways to write code that says:
If the first name, last name and date of birth are empty - disable next button. If they aren’t empty - enable next button.
So far, just with the first name field this code works. Any ideas on including the other input fields in it?
$w.onReady( function () {
$w(‘#button1’).disable();
})
export function fname_change (event) {
if ((($w(‘#fname’).value)=== null )) {
$w(‘#button1’).disable();
} else {
$w(‘#button1’).enable();
}
}
Wix is such a pain in the ass when trying to copy code, every time i try to copy your code from above it pastes in an unformatted mess, very fustrating, i wish Wix would hold the formatting when copying code from the forum, anyway you need to add parameters for the last name as in your code you only have parameters for first name, code something like this…
$w.onReady( function () {
$w(’ #button1 ').disable();
})
export function fname_change (event) {
if ((($w(’ #fname ‘).value)=== null ) ||
(($w(’ # l name ').value) === null ))
{
$w(' [#button1](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23button1) ').disable();
} else {
$w(’ #button1 ').enable();
}
}
export function lname_change (event) {
if ((($w(’ #fname ‘).value)=== null ) ||
(($w(’ # l name ').value) === null ))
{
$w(' [#button1](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23button1) ').disable();
} else {
$w(’ #button1 ').enable();
}
}
That’s what I have done here - the issue is when I type something into the first name field, the next button is enabled, before I even type anything into the last name field.
Try change null to “”
@mikemoynihan99 that has stopped the next button enabling after only filling in the first name, but it’s not enabling the button after filling in the last name either now 
replace the onChange events with keyPress events:
example:
export function lname_keyPress(event) {
if ((($w(’ #fname ‘).value)=== “” ) ||
(($w(’ # l name ‘).value) === “” ))
{
$w(’ #button1 ‘).disable();
} else {
$w(’ #button1 ').enable();
}
}
@mikemoynihan99 I wish I could say it worked but it’s doing the same thing. I’m running out of ideas, maybe theres an issue with six supporting some code? Should I add you as a controbutor so you have access to try figuring it out?
Here is the full form code. The form functions really well apart from this issue with the next button. Only the first four sections of the code are relative to the first page that we’ve been working on.
$w.onReady( function () {
$w(‘#nextbtn’).disable();
})
export function fname_keyPress(event) {
if ((($w(‘#fname’).value) === “”) ||
(($w(‘#lname’).value) === “”)) {
$w(‘#nextbtn’).disable();
} else {
$w(‘#nextbtn’).enable();
}
}
export function flname_keyPress(event) {
if ((($w(‘#fname’).value) === “”) ||
(($w(‘#lname’).value) === “”)) {
$w(‘#nextbtn’).disable();
} else {
$w(‘#nextbtn’).enable();
}
}
export function nextbtn_click(event) {
$w('#slideshow').changeSlide(1);
}
export function backbtn1_click(event) {
$w(‘#slideshow’).changeSlide(0);
}
export function nextbtn2_click(event) {
$w(‘#slideshow’).changeSlide(2);
}
export function backbtn2_click(event) {
$w(‘#slideshow’).changeSlide(1);
}
export function nextbtn3_click(event) {
$w(‘#slideshow’).changeSlide(3);
}
export function addeducation_click(event) {
$w(‘#addeducation’).hide();
$w(‘#education2’).show();
}
export function closeeducation2_click(event) {
$w(‘#addeducation’).show();
$w(‘#education2’).hide();
}
export function backbtn3_click(event) {
$w(‘#slideshow’).changeSlide(2);
}
export function nextbtn4_click(event) {
$w(‘#slideshow’).changeSlide(4);
}
export function addsubject_click(event) {
$w(‘#addsubject’).hide();
$w(‘#subject2’).show();
}
export function closesubject2_click(event) {
$w(‘#addsubject’).show();
$w(‘#subject2’).hide();
}
export function closesubject3_click(event) {
$w(‘#addsubject3’).show();
$w(‘#subject3’).hide();
}
export function addsubject3_click(event) {
$w(‘#addsubject3’).hide();
$w(‘#subject3’).show();
}
export function backbtn4_click(event) {
$w(‘#slideshow’).changeSlide(3);
}
export function nextbtn5_click(event) {
$w(‘#slideshow’).changeSlide(5);
}
export function preferpaypal_click(event) {
$w(‘#bankdetails’).hide();
$w(‘#paypalemail’).show();
$w(‘#preferpaypal’).hide();
$w(‘#preferbank’).show();
}
export function preferbank_click(event) {
$w(‘#paypalemail’).hide();
$w(‘#bankdetails’).show();
$w(‘#preferpaypal’).show();
$w(‘#preferbank’).hide();
}
export function backbtn5_click(event) {
$w(‘#slideshow’).changeSlide(4);
}
you have a typo in this part of your code, you have the ID for the last name input referenced as two different ID’s
export function flname_keyPress(event) { if ((($w(’ #fname ‘).value) === “”) || (($w(’ #lname ‘).value) === “”)) { $w(’ #nextbtn ‘).disable(); } else { $w(’ #nextbtn ').enable(); }
Rectified, no difference though
I know, i had to modify the code a bit. It’s working now like this…
$w.onReady( function () {
$w(‘#nextbtn’).disable();
$w('#fname').onKeyPress( **function** () {
if ((($w(‘#fname’).value) === “”) ||
(($w(‘#lname’).value) === “”)) {
$w(‘#nextbtn’).disable();
} else {
$w(‘#nextbtn’).enable();
}
})
$w('#lname').onKeyPress( **function** () {
if ((($w(‘#fname’).value) === “”) ||
(($w(‘#lname’).value) === “”)) {
$w(‘#nextbtn’).disable();
} else {
$w(‘#nextbtn’).enable();
}
})
$w('#nextbtn').onClick( **function** () {
if ((($w(‘#fname’).value) !== “”) &&
(($w(‘#lname’).value) !== “”)) {
$w('#slideshow').changeSlide(1);
}
})
})
1 Like