Monitoring form fails with Ajax

Question

I have a large form that I want to monitor for changes. I found example code for that in this post. When I run the code as posted, it works fine. But my form is using Ajax and it doesn't work for some reason. Here's my jsfiddle. I added a second monitor near the bottom but it isn't working either.

When the monitoring code is in the doc ready function, even the first "hello" update doesn't work. But this may be something to do with jsfiddle since I can get past that point locally. But even then, the origForm data is not seen more than once because, I think, the doc ready function is only called the one time when Ajax loads it.

Is there a way to monitor all of the fields when using Ajax?

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="saved_form"></div>
    <div id="changed"></div>
    <div id="showform"></div>



    <script> 
    $(document).ready(function() {
       ShowForm();
       $("#saved_form").text("hello");

       var $form = $("form"),
       origForm = $form.serialize();
       $("#saved_form").text(origForm);

       $("form :input").on("change input", function() {
          $("#changed").text("A change was made");
       });

    });

    function ShowForm () {
      $.ajax({
         url: 'ajax3.php',
         success: function(data) {

           $("#showform").html(`

            <form>
                <div>
                    <textarea name="description" cols="30" rows="3"></textarea>
                </div>
                <div>Username: <input type="text" name="username" /></div>
                 <div>
                    Type: 
                    <select name="type">
                        <option value="1">Option 1</option>
                        <option value="2" selected>Option 2</option>
                        <option value="3">Option 3</option>
                    </select>
                </div>
                <div>
                    Status: <input type="checkbox" name="status" value="1" /> 1
                    <input type="checkbox" name="status" value="2" /> 2
                </div>
            </form>      
            `);
          }
      });
    };

     var $form2 = $("form"),
     origForm2 = $form2.serialize();
     $("#saved_form").text(origForm2);
     $("form :input").on("change input", function() {
        $("#changed").text("A change was made");
     });
    </script>

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Andreas, Jan 31 '17 at 15:33

Daisuke Tahara · Answer 1 · 2017-01-31T15:39:07.840

1

You are dynamically adding the form to your page. The selector will not pick up the change event. Also the event and selector in the on method are defined properly. more information about the on method can be found here http://api.jquery.com/on/

Try this:

$(document).on("change", "input, textarea", function() {
    $("#changed").text("A change was made");
});

edited Jan 31 '17 at 15:39

answered Jan 31 '17 at 15:31

Daisuke Tahara

183
7

score 0 · Accepted Answer · answered Jan 31 '17 at 15:49

You can use .promise() after using .html() to render your form. This callback is launched right after form has been populated. Then you can use $("#showform form :input") to monitor events just on this eactly form. It costs less in performance than doing with $(document).on(...)

In your code:

function ShowForm () {
  $.ajax({
     url: 'test',
     success: function(data) {

       $("#showform").html(`
               // <--- All your previous html -->
        `).promise().done(function(){
              // <--- Execute your monitor after rendering new form -->
              $("#showform form :input").on("change input", function() {                    $("#changed").text("A change was made");
             });
          });
      }
  });
};

Look at the updated jsfiddle

To know more about .promise() here-jquery-promises

Monitoring form fails with Ajax

2 Answers2