<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>How to prevent users from submitting a form with no changes made</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
input{width:100%}
body{margin:10px auto}
</style>
</head>
<body >
<script>
$(function() {
var $form = $('form');
var initialState = $form.serialize();
$form.submit(function (e) {
if (initialState === $form.serialize()) {
console.log('Form is unchanged!');
alert('Please make changes in form data');
} else {
console.log('Form has changed!');
$(myform).submit()
}
e.preventDefault();
});
});
</script>
<form id="myform">
<table width="50%" align="center" cellpadding="5px" cellspacing="0px">
<tr style="background:#efefef">
<td colspan="2"><h1 style="color:#996600">How to prevent users from submitting a form with no changes made</h1></td>
</tr>
<tr>
<td>Your Name</td>
<td><input type="text" name="f0" value="Manish Kumar" placeholder="Enter Name" /></td>
</tr>
<tr>
<td>Roll</td>
<td><input type="text" name="f1" value="12" placeholder="Enter Name" /></td>
</tr>
<tr>
<td>Father's Name </td>
<td><input type="text" name="f2" value="Suresh Kumar" placeholder="Enter Name" /></td>
</tr>
<tr>
<td>Mother's Name </td>
<td><input type="text" name="f3" value="Kavita Devi" placeholder="Enter Name" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="f4" value="Patna" placeholder="Enter Name" /></td>
</tr>
<tr>
<td>Pincode</td>
<td><input type="text" name="f5" value="804453" placeholder="Enter Name" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit" onclick="" onkeypress=""/></td>
</tr>
</table>
</form>
</body>
</html>
Preview