onWixFormSubmit( )

Adds an event handler that runs when a site visitor starts to submit a Wix Form yet before the form is actually submitted and sent to the server.

Description

When a site visitor submits a Wix Form, the onWixFormSubmit() event handler runs for the WixForms element before the Wix Form data are submitted to the server.

The callback to run when the Wix Form that is about to be submitted is either the name of the function or a function expression.

The event handler can contain synchronous operations only. If you include asynchronous operations, no error is issued and the asynchronous operations are ignored.

Generally, define form validations and operations in one onWixFormSubmit() event handler.

Note: You can define more than one onWixFormSubmit(), for example, if you prefer to split your code into chunks. Keep in mind that all validations for all the event handlers must succeed for their operations to be performed and for the data to be sent to the server.

The event handler runs in parallel with any operations defined in an onClick() event handler.

Note: Do not explicitly include the onWixFormSubmit() inside an onCLick(). This is because onWixFormSubmit() must be loaded before an onClick() event handler runs.

The onWixFormSubmit() event handler does the following:

Performs built-in, general validations (such as checking that all email fields contain valid email addresses).
These validations are performed without your needing to code them.
If the form fields do not pass validation, the submission of the Wix Form data to the server is aborted.
Performs client-side, synchronous operations and validations that you define in the event handler.
This gives you the opportunity to manipulate the data on the Wix Form before submitting the data for server processing. For example, the Wix Form might have first and last name fields, but the server might be expecting full names only. You can combine the first and last name into one field before sending the data to the server.
These manipulations cannot include adding new fields or deleting fields. You can only change values of existing Wix Form fields.
Lets you stop the submission process entirely by returning a false value based on validations you define.
If a WixFormSubmitEvent event fails, operations for all WixFormSubmitEvent event stop, no submission occurs, and console warnings are issued. You can use the onWixFormSubmitted() event handler to check if data for the Wix Form was successfully submitted to the server.

The received WixFormSubmitEvent object contains information about the Wix Form that is about to be submitted. The WixFormSubmitEvent object is returned by the callback asynchronously after a submit was requested, before the server receives the request, and before the server starts to process the relevant operations.

onWixFormSubmit() provides information and functionality available on the client side only:

The function has access to the field names and field values on the form but does not have access to submission details that exist only on the server, such as the contact ID and the submission time.
The function performs operations only on the client side, such as changing field values before submission to the server.

For other Wix Forms events, see:

The onWixFormSubmitted() event handler, which sets events that fire when a site visitor submits a Wix Form and it is successfully received by the server.
The onWixFormSubmittedError() event handler, which sets events that fire when a site visitor submits a Wix Form and it is not received by the server.
The onFormSubmit() event handler, which is called in the Backend section's code, to set events that fire on the backend when a site visitor submits a form.

Syntax

function onWixFormSubmit(eventHandler: WixFormSubmitEventHandler): void
eventHandler: function WixFormSubmitEventHandler(event: $w-wixformsubmitevent): Object | boolean

onWixFormSubmit Parameters

NAME

TYPE

DESCRIPTION

eventHandler

WixFormSubmitEventHandler

The name of the function or the function expression to run when a Wix Form is submitted.

Returns

This function does not return anything.

Return Type:

void

WixFormSubmitEventHandler Parameters

NAME

TYPE

DESCRIPTION

event

$w-wixformsubmitevent

The Wix Forms event that occurred.

Returns

Either an array of WixFormField objects, or a boolean value indicating if the Wix Form should be submitted to the server.

Return Type:

Object

boolean

Was this helpful?

Trigger processing for a Wix Form before it is submitted to the server

Copy Code

1// Switch the order of the names entered in the full name field
2// before submitting to server.
3$w("#wixForms1").onWixFormSubmit((event) => {
4  let fullName = event.fields[0].fieldValue;
5  let fullNameArray = fullName.split(" ");
6  event.fields[0].fieldValue = fullNameArray[1] + ", " + fullNameArray[0];
7  let email = event.fields[1].fieldValue;
8  return event.fields;
9});
10
11/* fields array of objects before onWixFormSubmit():
12 * 
13 * [
14 *   { 
15 *    "id" : "inputName",
16 *    "fieldValue" : "Jane Doe",
17 *    "fieldName" : "Enter first name and then last name, with a space separator."
18 *   },
19 *   { 
20 *    "id" : "inputEmail",
21 *    "fieldValue" : "jd@theCompany",
22 *    "fieldName" : "Enter email."
23 *   }
24 * ] 
25 * 
26 *  
27 *  fields array of objects after onWixFormSubmit():
28 * 
29 *  [ 
30 *    { 
31 *      "id" : "inputName",
32 *      "fieldValue" : "Doe, Jane",
33 *      "fieldName" : "Enter the last name and then the first name, separated by a space."
34 *    },
35 *    { 
36 *      "id" : "inputEmail",
37 *      "fieldValue" : "jd@theCompany",
38 *      "fieldName" : "Enter email."
39 *    }
40 * ] 
41 */

Trigger a "go/no-go" decision determining if a Wix Form should be submitted

Copy Code

1// Check if the member entered a name in  
2// the form field at position 0 in the fields array.
3$w("#wixForms1").onWixFormSubmit((event) => {
4  if (typeof event.fields[0].fieldValue == "undefined" || event.fields[0].fieldValue === "") 
5      return false;
6  } else 
7      return true;
8});