diff --git a/frontend/src/components/FieldLayout/Field.vue b/frontend/src/components/FieldLayout/Field.vue
index 67127ba2..8f956675 100644
--- a/frontend/src/components/FieldLayout/Field.vue
+++ b/frontend/src/components/FieldLayout/Field.vue
@@ -31,6 +31,7 @@
       :class="field.prefix ? 'prefix' : ''"
       :options="field.options"
       v-model="data[field.fieldname]"
+      @change="(e) => fieldChange(e.target.value, field)"
       :placeholder="getPlaceholder(field)"
     >
       <template v-if="field.prefix" #prefix>
@@ -195,6 +196,7 @@ import { getFormat, evaluateDependsOnValue } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'
 import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
+import { useDocument } from '@/data/document'
 import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
 import { computed, inject } from 'vue'
 
@@ -208,8 +210,11 @@ const preview = inject('preview')
 
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
   getMeta(doctype)
+
 const { getUser } = usersStore()
 
+const { triggerOnChange } = useDocument(doctype, data.value.name)
+
 const field = computed(() => {
   let field = props.field
   if (field.fieldtype == 'Select' && typeof field.options === 'string') {
@@ -265,6 +270,12 @@ const getPlaceholder = (field) => {
     return __('Enter {0}', [__(field.label)])
   }
 }
+
+function fieldChange(value, df) {
+  data.value[df.fieldname] = value
+
+  triggerOnChange(df.fieldname)
+}
 </script>
 <style scoped>
 :deep(.form-control.prefix select) {
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index e84aeb15..59abbd69 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -176,9 +176,7 @@
                           v-model="document.doc[field.fieldname]"
                           :options="field.options"
                           :placeholder="field.placeholder"
-                          @change.stop="
-                            emit('update', field.fieldname, $event.target.value)
-                          "
+                          @change.stop="fieldChange($event.target.value, field)"
                         />
                         <Link
                           v-else-if="field.fieldtype === 'User'"
@@ -428,7 +426,7 @@ const emit = defineEmits(['update', 'reload'])
 
 const showSidePanelModal = ref(false)
 
-const { document } = useDocument(props.doctype, props.docname)
+const { document, triggerOnChange } = useDocument(props.doctype, props.docname)
 
 const _sections = computed(() => {
   if (!props.sections?.length) return []
@@ -481,6 +479,14 @@ function parsedField(field) {
   return _field
 }
 
+async function fieldChange(value, df) {
+  document.doc[df.fieldname] = value
+
+  await triggerOnChange(df.fieldname)
+
+  document.save.submit()
+}
+
 function parsedSection(section, editButtonAdded) {
   let isContactSection = section.name == 'contacts_section'
   section.showEditButton = !(