disabled submit when nothing changed

Question

For example I have an edit form with Name and Description:

Name: ApplePie
Description: Sort of cake.

(SUBMIT)

Default I can click on the submit button and still update the entries when nothing changed. I want to prevent this behaviour. So, when I click in the input field for example ApplePie and start writing ApplePie|s, the submit button goes active, but if I changed nothing the submit button is by default disabled.

I'm using Symfony 2.6.7 and jQuery.

Someone an idea? :-)

score 3 · Accepted Answer · edited May 23 '17 at 11:46

Use a flag to detect if any changes were made on the form. Then, in onsubmit, check the flag and return false if no changes occured

var changed = false;
$('form [name]').change(function(){
    changed = true;
});

$('form').submit(function({
    if(!changed){
        return false;
    }
});

See Detecting Data changes in Forms using JQuery

Update

It is technically possible the change event may fire but 'no' changes were made(user undoes change).

To do a true check of whether any changes were made or not, you can lever jQuery serialize() to check before/after

 var originalForm = $('form').serialize();

 $('form').submit(function({
        var currentForm = $('form').serialize();
        if(orginalForm == currentForm){
            return false;
        }
    });

disabled submit when nothing changed

1 Answers1