Disable the submit button unless the original form image is changed with jquery

Question

I tried the code mentioned in this question my code:

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

And it works perfectly on text input and textarea and select. But when I upload a picture for example with the following input:

<form class="form_contact" action="/admin/edit-post-logic.php" enctype="multipart/form-data" method="POST">
<input type="file" name="avatar" accept="image/png, image/jpeg">
<button disabled="" class="button_reset_form" type="reset">ביטול שינויים</button>
<button disabled="" class="button_submit_form" type="submit" name="submit">שמירה</button>
</form>

The image appears and everything is fine, but the buttons do not become active and remain disabled, does anyone have any idea what can be done to make it work?

Is your `input type=file` inside the form? Please provide a *complete* snippet: see [mcve] — freedomn-m, Feb 16 '23 at 17:22
Is `preview()` stopping event propagation (if that's possible from an onclick=) — freedomn-m, Feb 16 '23 at 17:23
As your question is about javascript/jquery, please provide *rendered* HTML - server-side tags don't run client side. The main question is what does preview() do and does it affect the event propagation. When you debug, does your code hit the `.on('change input'` handler/callback? Please also see *minimal* part of [mcve] - just enough (and enough) to reproduce the issue, no need to see 501 fields if 2 show it working and 1 not working. — freedomn-m, Feb 16 '23 at 17:33
Right in the jQuery documentation ***"Data from file select elements is not serialized."*** https://api.jquery.com/serialize/ — epascarello, Feb 16 '23 at 17:39
serialize method IGNORES the file inputs...... It skips it. It does not read it. It does not process it. — epascarello, Feb 16 '23 at 17:50

epascarello · Accepted Answer · 2023-02-16T18:04:15.910

Serialize does not convert the file input's value so it will be ignored. So your check will not get the value. So you need to add another check for the file input.

So you can check it directly $(input[type="file"]).val()

$('.form_contact')
  .each(function() {
    $(this).data('serialized', $(this).serialize())
  })
  .on('change input', function() {
    $(this)
      .find('button:reset, button:submit')
      .attr('disabled', $(this).serialize() == $(this).data('serialized') && !$('input[type="file"]').length);
  })
  .find('button:reset, button:submit')
  .attr('disabled', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form_contact" action="/admin/edit-post-logic.php" enctype="multipart/form-data" method="POST">
  <input type="file" name="avatar" accept="image/png, image/jpeg">
  <button disabled="" class="button_reset_form" type="reset">ביטול שינויים</button>
  <button disabled="" class="button_submit_form" type="submit" name="submit">שמירה</button>
</form>

Disable the submit button unless the original form image is changed with jquery

1 Answers1