JavaScript/jQuery Form - Update Form Data Using the API

jQuery

If you need to update form data at runtime, redefine the formData object. In this case, form item values are updated automatically and the UI component is rerendered from scratch. In the following example, the SelectBox UI component changes the formData object.

JavaScript
var employees = [{
    name: "John Heart",
    position: "CEO",
    officeNo: "901"
}, {
    name: "Bill Silver",
    position: "HR Manager",
    officeNo: "905"
}];

$(function() {
    var form = $("#formContainer").dxForm({
        formData: employees[0]
    }).dxForm("instance");

    $("#employeeSelector").dxSelectBox({
        displayExpr: "name",
        dataSource: employees,
        value: employees[0],
        onValueChanged: function(data) {
            form.option("formData", data.value);
        }
    });
});

View Demo

The Form UI component provides methods that update specific formData fields and rerender the corresponding editors without rerendering the whole UI component. The updateData(dataField, value) method updates the value of a single field. The updateData(data) method updates values of several fields at once. In the following code, these methods are called on a Button click.

JavaScript
$(function() {
    var form = $("#formContainer").dxForm({
        formData: {
            firstName: "Joe",
            lastName: "Heart",
            phone: "+1(213) 555-9392"
        }
    }).dxForm("instance");

    $("#updatePhone").dxButton({
        text: 'Update the Phone Number',
        onClick: function () {
            form.updateData("phone", "+1(333) 888-7698");
        }
    });

    $("#updateName").dxButton({
        text: 'Update the Name',
        onClick: function () {
            form.updateData({
                firstName: "John",
                lastName: "Doe"
            });
        }
    });
});
Angular

If you need to update form data at runtime, use two-way binding to bind the formData property to a component property. Swapping the whole formData object rerenders the UI component from scratch; updating specific formData fields rerenders only the corresponding editors.

HTML
TypeScript
<dx-form [(formData)]="employee"></dx-form>
<dx-button
    text="Update the Phone Number"
    (onClick)="employee.phone = '+1(333) 888-7698'">
</dx-button>
import { DxFormModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "Joe",
        lastName: "Heart",
        phone: "+1(213) 555-9392"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule,
        DxButtonModule
    ],
    // ...
})
Vue

If you need to update form data at runtime, use two-way binding to bind the formData property to a component property. Swapping the whole formData object rerenders the UI component from scratch; updating specific formData fields rerenders only the corresponding editors.

App.vue
<template>
    <div>
        <DxForm :form-data="employee" />
        <DxButton
            text="Update the Phone Number"
            @click="updatePhone" />
    </div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm } from 'devextreme-vue/form';
import { DxButton } from 'devextreme-vue/button';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    phone: '+1(213) 555-9392'
};

export default {
    components: {
        DxForm, DxButton
    },
    data() {
        return {
            employee
        };
    },
    methods: {
        updatePhone(e) {
            this.employee.phone = '+1(333) 888-7698';
        }
    }
};
</script>
React

If you need to update form data at runtime, bind the formData property to a state property. Swapping the whole formData object rerenders the UI component from scratch; updating specific formData fields rerenders only the corresponding editors.

App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form } from 'devextreme-react/form';
import { Button } from 'devextreme-react/button';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    phone: '+1(213) 555-9392'
};

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            employee
        }
        this.updatePhone = this.updatePhone.bind(this);
    }

    render() {
        return (
            <div>
                <Form formData={this.state.employee} />
                <Button
                    text="Update the Phone Number"
                    onClick={this.updatePhone} />
            </div>
        );
    }

    updatePhone(e) {
        this.setState(() => {
            return { employee: {...employee, phone: '+1(333) 888-7698' } };
        });
    }
}

export default App;
See Also