Tutorials

Forms

UIX tries to stay as close as possible to existing Web APIs. The HTML <form> element is a powerful tool for processing user-submitted data.

In UIX, you can create a <form> element with JSX and just bind the input values to pointers or pointer properties:

// reactive 'User' class
@sync class User {
    @property name: string
    @property age: number
}

// <UpdateUserData/> form template
const UpdateUserData = template<{user:User}>((_, {user}) => 
    <form>
        Update User Data:
        <input type="text"   value={user.$.name}/>
        <input type="number" value={user.$.age}/>
    </form>
)

export default <UpdateUserData user={...}/>

In this case, you don't even need a submit button. Input value changes are immediately propagated to the provided User object. You actually don't even need a parent <form> element.

But what if you want to only update the User object after a form was submitted by clicking a button?

UIX provides a special element attribute for this exact usecase, called datex-update. Per default, datex-update is set to "onchange", meaning every input update is immediately propagated.

To only update the bound pointer values when a submit event was triggered, you can set datex-update to "onsubmit":

// <UpdateUserData/> form template with submit button
const UpdateUserData = template<{user:User}>((_, {user}) => 
    <form datex-update="onsubmit">
        Update User Data:
        <input type="text" value={user.$.name}/>
        <input type="number" value={user.$.age}/>
        <button type="submit">Save</button>
    </form>
)

Warning

The "onsubmit" option is currently not supported for frontend rendering.