-1

I've been trying to show/hide a button based on the data currently in Input fields have been changed. It's an Account Update page, and the data is pulled from a database and inserted into the input fields.

I've found this topic and it's been mostly helpful: JQuery - Disable submit button unless original form data has changed

I've also pulled and adjusted a snippet of code and was able to make it work how I wanted: http://jsfiddle.net/Pug3H/97/

However when I try to implement this code onto my page it does not seem to work. A sample of how the input fields are populated from the database: 

    <input type="text" name="Name" value="<?= $row['Name'] ?>" required />

I'm not sure if this is conflicting with the serialize method and if I should be doing something differently? Any help is appreciated. Thanks!

Community
  • 1
  • 1
Evin
  • 1
  • 1

1 Answers1

1

Your demo is not complete and therefore has some syntax errors. You want to use the css() method to set the visibility of the submit button as follows:

$('form')
    .each(function(){
        $(this).data('serialized', $(this).serialize())
    })
    .on('change input', function(){
        //hide submit button
        $(this).find('input:submit, button:submit').css('visibility','hidden');
        //check if submit button should be made visible
        $(this).serialize() == $(this).data('serialized') || 
        $(this).find('input:submit, button:submit').css('visibility','visible'); 
     });

DEMO

PeterKA
  • 24,158
  • 5
  • 26
  • 48
  • This does not appear to be working in Fiddle, input into my file just to make sure and still does not work. – Evin Oct 02 '15 at 18:41
  • Not sure I understand what you're saying. Do you mean it does not work here: http://jsfiddle.net/fiddleyetu/Pug3H/99/? – PeterKA Oct 02 '15 at 18:44
  • Earlier when I tried it did not appear to be working. I checked again and it seems fine - however I did try it anyways and it did not work for my form. – Evin Oct 02 '15 at 19:48
  • In your form do not forget to put the code inside DOM ready like so: `$(function() { /*new line*/ /*THE CODE ABOVE*/ /*new line*/ })`. – PeterKA Oct 02 '15 at 20:07