Create an "Are you sure you want to save?" confirmation box

Show and tell
,
1

Wix Code lets you create a submit button to save data users enter in input elements. However, the submit action happens immediately and you may want to ask users to confirm they want to save before the submit is triggered.

To do this you need to code the submit action instead of using the Connect to Data panel to implement it. You can create the confirmation using a text box and buttons or a lightbox.

These are the basic steps for using a text box and buttons:

  1. Add a Text element to your page which will contain your “Are you sure?” message, and set it to Hidden on load in the Properties panel.

  2. Add two buttons to your page, for “Yes” and “No”, and set them to Hidden on load in the Properties panel.

  3. Register an onClick event for your Submit button. In its event handler check if the user input is valid and then call the .show functions for the Text element and the Yes and No buttons.

  4. Register an onClick event for the Yes button. In its event handler call .save on the dataset that your input elements are connected to. Then call the .hide functions for the Text element and the Yes and No buttons.

  5. Register an onClick event for the No button. In its event handler call the .hide functions for the Text element and the Yes and No buttons.
    Here’s what that code would look like:

export function Save_click(event) {
	if ($w("#input1").valid) {
		$w("#confirmYes").show();
		$w("#confirmNo").show();
		$w("#confirmMessage").show();	
	}	
}

export function confirmYes_click(event) {
	$w("#dataset1").save();
	hide_stuff();
}

export function confirmNo_click(event) {
	hide_stuff();
}

function hide_stuff() {
	$w("#confirmMessage").hide();
	$w("#confirmYes").hide();
	$w("#confirmNo").hide();
}

You can also add a submit message to your form.

See this post to see how Yoav helped farmshare-prime do this with a lightbox.

3 Likes