Detect a change in my HTML form using jQuery

Question

I have a form which I only want to allow users to upload 3 images (max), after which the add more button should then be hidden so that they cannot upload any more. When the user clicks the add more button an input field is generated (with a link to remove that input field).

What I would like to happen is the following

1) Hide the add more button if nested_field_destroy_num and nested_field_num if the count is >=3

2) if a user clicks add more and the count is >= 3 but then clicks remove field then the add more button should reappear

I have this working (to a point) when the DOM is ready but am having some issues getting it to work 'live' so to speak. I'm not sure what event handler I can use to detect the changes on the fly.

$(document).ready(function(){

    var show_add_button = function() {
        var nested_field_destroy_num = $("input[id$='__destroy']").length;
        var nested_field_num = $('.animal_file').length;

        if(nested_field_destroy_num + nested_field_num >= 3){
            $('.add_nested_fields').hide();
        } else {
            $('.add_nested_fields').show();
        }
    }
    show_add_button();
});

What event handler could I use here?

Update

This is the HTML structure with the user having 2 images uploaded

<!-- File Upload -->
<div class="fields">
 <div class="form-group has-feedback">
  <img alt="image" src="/" />
   <input id="animal_animal_images_attributes_0_image_cache" name="animal[animal_images_attributes][0][image_cache]" type="hidden" />
   <label for="animal_animal_images_attributes_0_image">Remove Image</label>
   <input name="animal[animal_images_attributes][0][_destroy]" type="hidden" value="0" /><input class="form-control" id="animal_animal_images_attributes_0__destroy" name="animal[animal_images_attributes][0][_destroy]" type="checkbox" value="1" />
 </div>

 <input id="animal_animal_images_attributes_0_id" name="animal[animal_images_attributes][0][id]" type="hidden" value="38" />
</div>

<div class="fields">
  <div class="form-group has-feedback">
    <img alt="image2" src="/" />
      <input id="animal_animal_images_attributes_1_image_cache" name="animal[animal_images_attributes][1][image_cache]" type="hidden" />
    <label for="animal_animal_images_attributes_1_image">Remove Image</label>
    <input name="animal[animal_images_attributes][1][_destroy]" type="hidden" value="0" /><input class="form-control" id="animal_animal_images_attributes_1__destroy" name="animal[animal_images_attributes][1][_destroy]" type="checkbox" value="1" />
  </div>

 <input id="animal_animal_images_attributes_1_id" name="animal[animal_images_attributes][1][id]" type="hidden" value="43" />
 </div>
 // Add Another input field
 <a class="btn btn-default btn-green add_nested_fields" data-association="animal_images" data-blueprint-id="animal_images_fields_blueprint" href="javascript:void(0)">Add Another Image</a>

<div class="centered">
  <input class="btn btn-default btn-green btn-sign-up" name="commit" type="submit" value="Update Advert" />   
</div>

Answer 1

我认为您可以绑定到单击添加按钮。

$('.add_nested_fields').click(show_add_button);

Answer 2

Ok so an update really as I have found a working solution, apologies if my question was not clear enough. I am using nested_form with Rails and i found that when you remove an input field via their link it infact makes the element hidden, so i have had to factor that into account. This is what i have ended up doing, hopefully it will help someone else who uses nested_form ?

i also added a check to look for extra input fields just incase someone physically changes the css of the add image button, which if true will remove the last one completely. But there will be server side validation also so hopefully all avenues covered

It may be a bit messy but Im looking into ways to refactor this

var show_add_button = function() {
  var nested_field_destroy_num = $("input[id$='__destroy']").length;
  var nested_field_destroy_num_hidden = $("input[id$='__destroy']:hidden").length;
  var hidden_fields = $(".fields:hidden").length;
  var nested_field_num = $('.animal_file').length;
  var total = nested_field_destroy_num + hidden_fields + nested_field_num

  if(nested_field_destroy_num + nested_field_num - hidden_fields - nested_field_destroy_num_hidden >= 3){
    $('.add_nested_fields').hide();
    console.log('hide rule applied');
  } else {
    $('.add_nested_fields').show();
    console.log('display rule applied');
  }

 if(nested_field_num >= 5){
    $('.fields:last').remove();
  }

}

$(document).on('click', '.add_nested_fields', show_add_button);
$(document).on('click', 'a.remove_nested_fields', show_add_button);