JavaScript/jQuery Form - Form Properties

To change the Form configuration at runtime, call the option(optionName, optionValue) method. This approach is more typical of jQuery.

JavaScript
  • $(function() {
  • var form = $("#formContainer").dxForm({
  • formData: {
  • firstName: "John",
  • lastName: "Heart",
  • phone: "+1(213) 555-9392",
  • email: "jheart@dx-email.com"
  • }
  • }).dxForm("instance");
  •  
  • $("#checkBoxContainer").dxCheckBox({
  • text: 'Disable the Form',
  • value: false,
  • onValueChanged: function (e) {
  • form.option("disabled", e.value);
  • }
  • });
  • });

With Angular, Vue, or React, bind the property that should be changed to a component property.

App.vue
  • <template>
  • <div>
  • <DxForm
  • :form-data="employee"
  • :disabled="isFormDisabled" />
  • <DxCheckBox
  • text="Disable the Form"
  • :value.sync="isFormDisabled" />
  • </div>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxForm } from 'devextreme-vue/form';
  • import { DxCheckBox } from 'devextreme-vue/check-box';
  •  
  • const employee = {
  • firstName: 'John',
  • lastName: 'Heart',
  • phone: '+1(213) 555-9392',
  • email: 'jheart@dx-email.com'
  • };
  •  
  • export default {
  • components: {
  • DxForm, DxCheckBox
  • },
  • data() {
  • return {
  • employee,
  • isFormDisabled: false
  • };
  • },
  • };
  • </script>
See Also