how to monitor changes in an html form

So let's say we have a profile settings page that displays a user's details in the Input fields and we disabled the save button, then we need to track when the form has been updated so we can enable the button.

The change event is a feature that eliminates the headache of tracking changes on an HTML form.

Using HTML and JavaScript

So let's say this is our basic form with a submit event.

<body>

<form id="form" onsubmit="updateProfile()">
  <input type="text" name="firstName"/>
  <input type="text" name="lastName"/>

  <button id="form" disabled id="btn">
  save
  </button>
</form>


<script>
function updateProfile() {
 //send payload to the backend to updated database
}
</script>
</body>

In this form, the button is disabled, but we need to track any changes to the form and enable the button. All we need to do is add the onchange event attribute to the form tag and assign a function that will enable the button, this function will be automatically triggered when the user makes a change.

Let's call the function formUpdated

<form onsubmit="updateProfile()" onchange="formUpdated()">

Then let's define the formUpdated function and grab the button by Id then enable it

<script>
function updateProfile() {
 //send payload to the backend to updated database
}

function formUpdated() {
const btn = document.getElementById("btn")
btn.disabled = false
}

</script>

So this way once the user makes a change to the form input it will fire the formUpdated function which enables the button to save the changes.

Using React

So this is a basic Profile page component UI.

function ProfilePage() {
useEffect(() => {
const fetch = async()=>{
//this is where you can make the fetch request from the server
 //then assign each value to response from the server
setFirstName('John')
setLastName('Doe')
}
    window.addEventListener('load', fetch)
    return () => {
      window.removeEventListener('load', fetch)
    }
  }, [])

  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [formNotUpdated, setFormNotUpdated] = useState(true)

  const handleSubmit = () => {
    //send the payload to update the database
  }

  return (
    <form onSubmit={ ()=> handleSubmit() }>
        <input 
          type="text" 
          value={firstName}
          onChange={(e) => setFirstName(e.target.value)}
        />
      </label>

        <input 
          type="text" 
          value={lastName}
          onChange={(e) => setLastName(e.target.value)}
        />
      </label>

        <button disabled={formNotUpdated}>
          save
        </button>
    </form>
)
}

In this form, we are attaching the formNotUpdated boolean state to the button's disabled attribute so we can toggle the boolean easily.

Then we need to add the onChange event to the form tag and assign a function, let's call it handleChange which will run when any of the inputs are changed.

<form onSubmit={ ()=> handleSubmit() } onChange={handleChange}>

Then let's define the handleChange function and use it to toggle the formNotUpdated boolean value to enable the button.

const [formNotUpdated, setFormNotUpdated] = useState(true)

const handleSubit = () => {
    //send the payload to update the database
  }
const handleChange = () => {
    setFormNotUpdated = false
  }
  return (
    <form onSubmit={ ()=> handleSubmit() } onChange={handleChange}>

Using Vue

    <form id="form" @submit.prevent="updateProfile" >
    <input
            v-model="form.firstName"
            placeholder="First name"
            name="firstName"
            type="text" />
    <input
            v-model="form.lastName"
            placeholder="Last name"
            name="lastName"
            type="text" />

    <button id="form" :disabled="formNotUpdated">
        Save
    </button>
    </form>

In this form, we are attaching the formNotUpdated boolean state to the button's disabled attribute so we can toggle the boolean easily.

Then we need to add the v-on:change or @ change event to the form tag and assign a function, let's call it formUpdated which will run when any of the inputs are updated.

<form @submit.prevent="updateProfile" @change="formUpdated">

Then let's define the formUpdated function and use it to toggle the formNotUpdated boolean value to enable the button.

 data: (): ProfileInterface => ({
    form: {
      firstName: '',
      lastName: '',
    },
    formNotUpdated: true
  }),
mounted () {
    //this is where you can make the fetch request from the server
    //then assign each value to response from the server
      this.form.firstName = 'John'
      this.form.lastName = 'Doe'  
},
method: () {
updateProfile() {
//send the payload to update the database
},
formUpdated(){
formNotUpdated = false;
}
}

That's it, the save button will only be active when the user makes a change to the existing data.

If you have any questions drop a comment below.

Let me know if this was helpful.

Follow for more tutorials and tips.

Funsho's blog

Funsho's blog

How to monitor changes in an HTML form

Table of contents

Using HTML and JavaScript

Using React

Using Vue