Disable submit button when textarea added dynamically is empty - jQuery

user_1683379 0
Viewed 116

I am trying to disable a submit button if any textarea is empty. It works fine if the area is static. But if I add another text area by clicking a button, it will work only when I click inside the dynamically added textarea.

I have tried using all sorts of events (input click keyup keypress blur keyup), but still the result is the same.

Here is my code

<div class='form'>
   <textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea>
   <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" id="insert"/>
   </div>
   <hr>
   <button class="btn btn-info add_field_button">Add Another textarea</button>
   <div class="input_fields_wrap form-group">
   </div>


$(document).ready(function () {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click

        e.preventDefault();

        if (x < max_fields) { //max input box allowed
            x++; //text box increment

            $(wrapper).append('<textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea><button type="button" class="btn btn-danger remove_field">Delete</button></div>');


        }
    });

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});
$(document).ready(function () {
    $(document).on('input click keyup keypress blur keyup', 'textarea', function () {

        var empty = false;
        $('textarea').each(function () {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
});

Should I somehow fire the function checking if any textarea is empty on the button that adds new textarea?

Here is Demo in jsfiddle

jquery
1 Answers

When you add new textarea under click event there only check if the textarea is empty or not and depending on this disabled or enabled button.

Demo Code : 

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click

    e.preventDefault();

    if (x < max_fields) { //max input box allowed
      x++; //text box increment
    //added <div>
      $(wrapper).append('<div><textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea><button type="button" class="btn btn-danger remove_field">Delete</button></div>');


    }
    //chcking added textrea is empty
    $('textarea').each(function() {
      if ($(this).val().length == 0) {
        //disable
        $('.actions input').attr('disabled', 'disabled');
      } else {
        //enabled
        $('.actions input').attr('disabled', false);
      }
    });


  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
       //chcking added textrea is empty
    $('textarea').each(function() {
      if ($(this).val().length == 0) {
        //disable
        $('.actions input').attr('disabled', 'disabled');
      } else {
        //enabled
        $('.actions input').attr('disabled', false);
      }
    });
  })
});
$(document).ready(function() {
  $(document).on('input click keyup keypress blur keyup', 'textarea', function() {

    var empty = false;
    $('textarea').each(function() {
      if ($(this).val().length == 0) {
        empty = true;
      }
    });

    if (empty) {
      $('.actions input').attr('disabled', 'disabled');
    } else {
      $('.actions input').attr('disabled', false);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <textarea name="answer[]" id="answer" class="form-control" rows="4" placeholder="Type your answer here"></textarea>
  <div class='actions'>
    <input type="submit" value="Login" disabled="disabled" id="insert" />
  </div>
  <hr>
  <button class="btn btn-info add_field_button">Add Another textarea</button>
  <div class="input_fields_wrap form-group">
  </div>
</div>

user_106064000
Related