0

Visit Disable submit button unless original form data has changed

$('form')
    .each(function(){
        $(this).data('serialized', $(this).serialize())
    })
    .on('change input', function(){
        $(this)             
            .find('input:submit, button:submit')
                .attr('disabled', $(this).serialize() == $(this).data('serialized'))
        ;
     })
    .find('input:submit, button:submit')
        .attr('disabled', true)
;

it doesn't work with dynamically loaded form. what changes should I do to make it work with dynamically loaded form?

Community
  • 1
  • 1
Darshita Gangwani
  • 45
  • 1
  • 1
  • 7
  • You need [event delegation](https://learn.jquery.com/events/event-delegation/) for dynamically created elements - `$(document).on('change', 'input', function() {` –  Oct 27 '16 at 20:39
  • how do I disable submit button only? I do have submit and cancel buttons in my form. – Darshita Gangwani Nov 03 '16 at 17:01

1 Answers1

0

I assume that by dynamically loaded form you mean a form created by script in DOM. Control created this way are the same in your DOM that other controls.

Just be sure to call your code after having created the form.

Toine Seiter
  • 437
  • 4
  • 20
  • thank you for suggestion, I've tried. Submit button gets disabled while loading the form when I make any changes in field button gets activated but if change it back to original value submit button does not get disable again. it worked well with the fields which are created in DOM but it doesn't worked on fields which are generated by calling functions in asp.net-mvc. – Darshita Gangwani Oct 27 '16 at 20:11
  • add a `console.log($(this).serialize())` in the change event to see what is the result of the serialization. May be, an other script affects the controls of your form. – Toine Seiter Oct 27 '16 at 20:23
  • Thank you guys for your help.. what was happening before calling all my fields above mentioned function executes first so it did not get serialized all my fields, so I have add this line before start of the above mentioned function `$(document).ajaxStop(function())` and it worked fine. – Darshita Gangwani Oct 28 '16 at 15:00
  • how do I disable submit button only? I do have submit and cancel buttons in my form. – Darshita Gangwani Nov 03 '16 at 17:00
  • your cancel button shouldn't be disabled if it's not a submit button too. otherwise I would replace `'input:submit, button:submit'` selector by `'.whatever'` and set this css class to your submit button – Toine Seiter Nov 04 '16 at 11:10
  • thank you for your suggestion. my cancel button is submit too.. i've used `.find('input[type=submit]:not(.cancel),button')` to disable submit button only. – Darshita Gangwani Nov 04 '16 at 14:46