How can I conditionally submit a form?

Ask the community
,
1

I’m working on a custom registration page, where the user is submitting information about several people. There are about a dozen required fields. One button saves the form data into the database and stays on the same page. That works. The other button also saves the form data, but then goes to a payment page. By default that button only works if the form is filled out.

What I want to do is pre-validate the required fields and if any of them are missing, skip submit but go on to the payment page if at least 1 person was registered.

Here is a simplified web page:
https://ccmusiccamp.wixsite.com/registration-test

Can someone help me with the custom code needed to do any of the following?

The Add Another Person needs to keep track of how many times it was pressed.

The Register and Pay button should be disabled until the form is completely filled in or there was at least 1 person added.

The submit should be skipped if the form is partially filled in, but it should be allowed to continue to the payment page.

Thanks,
Mike

2

Hi Mike,

you can start by wiring event listeners to components on your page. I have reused same IDs of components in your example page:

$w.onReady(function () {
	$w('#input1').onChange(formChanged)
	$w('#input2').onChange(formChanged)
	$w('#dropdown1').onChange(formChanged)
	$w('#button1').onClick(addAnotherPersonClicked)
	$w('#button2').onClick(registerAndPayClicked)
});

First thing we should do is run a function every time form changes to check if submit button should be enabled. We do that by selecting each form element and checking it’s “valid” property. If it’s valid, we go ahead and enable Add Another Person button:

function formChanged() {
	const nameValid = $w("#input1").valid
	const emailValid = $w("#input2").valid
	const dropdownValid = $w("#dropdown1").valid
	const isFormValid = nameValid && emailValid && dropdownValid
	
	if (isFormValid) {
	    	$w('#button1').enable()		
	} else {
		$w('#button1').disable()
	}
}

When Add Another Person button is clicked, we must do 3 things - process the data in some way, reset the form and enable Register and Pay button. When resetting, we can reuse same “formChanged” function which already knows how to update submit button correctly:

function addAnotherPersonClicked() {
	// processing form data here
	resetForm()
}

function resetForm() {
	$w('#input1').value = null
	$w('#input2').value = null
	$w('#dropdown1').value = null
	formChanged()
	$w("#button2").enable()
}

Once enabled, Register and Pay cannot be disabled according to your requirements, so we don’t need to add any additional logic to it. All that’s missing is actual code to process registration and navigation:

function registerAndPayClicked() {
    // process form and navigate here
}

This code lacks the specifics, but hopefully it’s enough to start you going. Let us know if there you have any more questions. Good luck!

3

Yes, thank you! I was putting listeners on to the inputs instead of just one on the ready, and they were firing too soon for validation or not at all.

4

Thanks a lot it really helps