User can add new input field with click on button - how to limit/set max fields?

Question

The user can add a new input-field with a click on "Add". My problem is that there is no limit but I want to limit the max. input-fields to 50. Im not that good with js but I think it could done with:

if id or input-field = 50

than disable Add-button. And enable if id or input-field is under 50.

This is my code so far:

 function addFormField() { var id = document.getElementById("id").value; $("#divTxt").append( "<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + "&nbsp;&nbsp;<input type='text' size='20' name='txt[]' id='txt" + id + "'>&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>" ); id = id - 1 + 2; document.getElementById("id").value = id; } function removeFormField(id) { $(id).remove(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p><a href="#" onClick="addFormField(); return false;">Add</a></p> <form action="#" method="get" id="form1"> <input type="hidden" id="id" value="1"> <div id="divTxt"></div> <p><input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset" name="reset"></p> </form>

Thank you

Answer 1

You have to check for the length of child p tags of your div like this:

if($("#divTxt > p").length) < 50 ){
        var id = document.getElementById("id").value;
          $("#divTxt").append(
            "<p id='row" +
              id +
              "'><label for='txt" +
              id +
              "'>Field " +
              id +
              "&nbsp;&nbsp;<input type='text' size='20' name='txt[]' id='txt" +
              id +
              "'>&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" +
              id +
              "\"); return false;'>Remove</a><p>"
          );

          id = id - 1 + 2;
          document.getElementById("id").value = id;
        }

Answer 2

You can set a variable and add 1 to it until the count reaches 50 like this

 let currentCount = 0; function addFormField() { if(currentCount < 50){ currentCount+= 1; var id = document.getElementById("id").value; $("#divTxt").append( "<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + "&nbsp;&nbsp;<input type='text' size='20' name='txt[]' id='txt" + id + "'>&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>" ); id = id - 1 + 2; document.getElementById("id").value = id; }else{ alert('You can not add more then 50') } } function removeFormField(id) { $(id).remove(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p><a href="#" onClick="addFormField(); return false;">Add</a></p> <form action="#" method="get" id="form1"> <input type="hidden" id="id" value="1"> <div id="divTxt"></div> <p><input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset" name="reset"></p> </form>