Enable & Disable a button when user didn't fill out the form

Ask the community
,
1

I’m having some trouble with Enable & Disable a button if the user didn’t fill out the user inputbox(s), I think the disable part is work but I can’t enable the button even if they finish filling out the inputboxes… I place a image bellow

This the code I’m using…

$w.onReady(function () {
	
	if ($w('#dropdown1').value === '') {
		console.log('Gate 01 Closed');
		$w('#radioGroup1').value === '';
		console.log('Gate 02 Closed');
		$w('#input1').value === '';
		console.log('Gate 03 Closed');
		$w('#button1').disable();
		console.log('Order Button is disable');
		} else {
		$w('#dropdown1') === $w('#dropdown1').value;
		console.log('Gate 01 Opened');
		$w('#radioGroup1') === $w('#radioGroup1').value;
		console.log('Gate 02 Opened');
		$w('#input1') === $w('#input1').value;
		console.log('Gate 03 Opened');
		$w('#button1').enable();
		console.log('Order Button is enable');

}
});

If you can help me, I would appreciate the help.

2

Hi,

Wix code already enable you to use more poweful api for user input validation. please have a look at the following article and reference:

thanks,
Shlomi

3

Yea… I toke a look at the link you send… the button still not changing from able to disable… I’m lost.

4

Hi Arthur,

Please share what you are trying to build, ill try to setup an example and share with you.
What is the url of the site you are building?

Shlomi

5

URL: https://arthosmaciel.wixsite.com/wixcode-demo-02/Item/a9096669-60e4-4bc8-b4d6-0b1886ac43ef

It’s going to ask for member sign-up, this is a demo site so just create a random account.

Thank for the help.

6

What is the scenario you are trying to implement?

7

What I’m trying to set-up is an kinda of like an eCommerce page, where they look for a product then fill out the necessary information. So when they submit the information from the user input, it will be sent over to the Order DataBase. If the user didn’t fill out all 3 user inputs, the button will be disabled, but if they fill out all 3 users input with the necessary information asked, then the button will be enabled.

8

Hi,

i have looked into your page code implementation.
The wix code way to create a form, in your case ‘an order’, is to connect your form elements to the order collection data set. see section 07 and 08 here https://www.wix.com/code/home/tutorials-custom-form. then also connect your button to the data set and link the button to the submit operation to gain the out-of-the-box required validation and validation messages. it will also save you a lot of the code you wrote by yourself in the page to create the order.

if you still insist on implementing the button, uncheck the enable by default property of the button, run the form validation as a code within the onchange function of each of your form elements to decide if you want to enable/disable the button. personally i am not sure i’d go that path and prefer the validation which already exists in wix code, and allow you to also write your own custom ones if needed. your call :slight_smile:

if( isFormValid ) { 
    $w("#myButton").enable();
} else { 
    $w("#myButton").disable(); 
}

good luck,
Shlomi

9

I can’t use the normal wix code option, because I tying 3 different element value from other dataset & bring them together into the Order Database after the click on the button all within the Item Page… I just want the button to but disabled when their is no text value within the 3 users input. (I hope that make sense)

P.S. Where do I add the code from above into & what is “isFormValid” for?

10

Hi,

The isFormValid was just an example you should implement and just handling the button visibility part.
Still, you can bind the element to the destination collection elements in your order datasource, and inject the additional data in context using wix-dataset - Velo API Reference - Wix.com

another option you should try is using FormElement - Velo API Reference - Wix.com for the elements without binding

good luck,
Shlomi

11

Hello,
i am trying to do something similar, did you have any succes making it work?

if so, please share :smiley:

12

hi Guys,
How do I disable checkout button in cart page ? please help on this. ?
I don’t see any ID for checkout ? how do i disable the button when my subtotal is not 499 & above ?
Please do the needful at the earliest ?

13

hi Guys,
How do I disable checkout button in cart page ? please help on this. ?
I don’t see any ID for checkout ? how do i disable the button when my subtotal is not 499 & above ?
Please do the needful at the earliest ?