Forms

The Actions can directly receive an HTML form as an argument from JavaScript.

GOX automatically inspects the controls of the form, obtains its values and converts them to the appropriate Go type before invoking the Action.

No need to create JavaScript objects, use FormData or manually extract the value of each control.

Sending HTML controls

HTML controls can be sent directly to an Action.

func SaveProfile(name string, age int, active bool) gox.Action {
    ...
}

For example, an individual control can be used as an argument along with other values.

const name = document.getElementById("profile-name") as HTMLInputElement

const [result, err] = await Actions.SaveProfile(
    name,
    30,
    true
)

GOX automatically gets the value of the control and converts it to the expected type by the corresponding parameter.

It is also possible to send a full form.

const form = document.getElementById("profile") as HTMLFormElement

const [result, err] = await Actions.SaveProfile(form)

In this case, GOX automatically processes all the controls on the form and tries to associate them with the parameters declared by the Action.

The same conversion and type compatibility rules apply to both individual controls and full forms.

Association by name

Each form control must define an attribute name.

GOX uses this attribute to determine which parameter each value belongs to.

<form id="profile">
    <input name="name" type="text">
    <input name="age" type="number">
    <input name="active" type="checkbox">
</form>

func SaveProfile(name string, age int, active bool) gox.Action {
    ...
}

In this example, the value of the control name is assigned to the parameter namethe control, age to parameter age and control active to parameter active.

The association depends exclusively on the name of the parameter and not on the position of the control within the form.

Type compatibility

Each control must be compatible with the type declared by the corresponding parameter.

<form id="profile">
    <input name="name" type="text">
    <input name="age" type="number">
    <input name="active" type="checkbox">
</form>

func SaveProfile(name string, age int, active bool) gox.Action {
    ...
}

GOX automatically converts the content of each control to the type expected by the Action before running it.

If a control cannot be converted to the requested type, the Action does not run.

Control order

The controls on the form can be declared in any order.

<form id="profile">
    <input name="active" type="checkbox">
    <input name="name" type="text">
    <input name="age" type="number">
</form>

func SaveProfile(name string, age int, active bool) gox.Action {
    ...
}

Although the order is different, GOX reconstructs the arguments using the attribute name from each control.

This allows the form to be reorganized freely without changing the signature of the Action.

Additional controls

A form may contain controls that are not part of the Action.

<form id="profile">
    <input name="name" type="text">
    <input name="age" type="number">
    <input name="active" type="checkbox">

    <input name="preview" type="checkbox">

    <button type="submit">
        Save
    </button>
</form>

func SaveProfile(name string, age int, active bool) gox.Action {
    ...
}

In this case, the control preview does not have a corresponding parameter and is simply ignored.

GOX only processes the controls necessary to complete the signature of the Action.

Expected types

HTMLInputElement

The elements <input> are automatically converted according to the value of your attribute type.

HTMLTextAreaElement

The elements <textarea> are automatically converted to string.

<textarea name="description"></textarea>

func Save(description string) gox.Action {
    ...
}

HTMLSelectElement

The elements <select> They can also be sent using a form.

One <select> conventional produces a string.

<select name="country">

func Save(country string) gox.Action {
    ...
}

When the element uses the attribute multiple, GOX produces a slice of strings.

<select name="roles" multiple>

func Save(roles []string) gox.Action {
    ...
}

Sending files

Type-checks file allow one or more files to be sent to an Action.

<input name="avatar" type="file">

func Upload(avatar gox.File) gox.Action {
    ...
}

When the control allows multiple files, the Action receives a slide.

<input name="documents" type="file" multiple>

func Upload(documents []gox.File) gox.Action {
    ...
}

It is also possible to send created files directly from JavaScript.

const file = new File(["Hello GOX"], "hello.txt")

const [result, err] = await Actions.Upload(file)

When the Action expects multiple files, an object arrangement can be sent File.

const files = [
    new File(["A"], "a.txt"),
    new File(["B"], "b.txt")
]

const [result, err] = await Actions.Upload(files)

Integration with Go

The forms do not change the way the Actions are declared.

The signature continues to use conventional Go parameters and GOX uses that information to determine which controls to read and how to convert each value.

This allows you to work with HTML forms using the same type system used by the rest of the application, without entering annotations, decorators or additional configurations.

Best practices

• Assign an attribute name all checks to be sent to the Action.
• It uses names that match the parameters declared by the Action.
• Select the type of HTML control that best represents the expected Go type.
• Always value the data on the server, even when the form includes HTML validation.
• Keep the forms focused on a single operation to facilitate their maintenance.

To learn more about ParametersSee your documentation. To learn more about Return valuesSee your documentation. To learn more about Errors, check your documentation.

See also

• Parameters
• Return values
• Errors