Question 14987 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

on plus icon dynamic textbox is not getting generated in jquery

What I want is, I want to generate a new input type = text whenever a plus icon is getting clicked. SO I have written below code for the same.

$('#dvDVRdata1 .add').on('click', function() {
  addDynamicTextbox();
});

function addDynamicTextbox() {
  //alert('icon clicked');
  var numItems = $('#dvDVRdata1').length;
  alert(numItems);
  if (numItems != 5) {
    var lastfieldsid = $('#dvDVRdata1 input').last().attr('id');
    if ($('#' + lastfieldsid).val() != "") {
      var id = parseInt(lastfieldsid.substr(13, lastfieldsid.length));
      var tr2 = $("#dvDVRdata1" + id + "");
      var tr = "<tr id='dvDVRdata1" + (id + 1) + "'><td><div class=''><div class=''><div class='' id='dvDVRdata1" + (id + 1) + "'><label>DVR Address</label><span><input type='text'  value='' name='nmDVRAddress" + "' id='txtDVRAddress" + (id + 1) + "'/></span></div></span></div></span></div></div><div class='minus'><i class='fa fa-times' aria-hidden='true'></i></div></td></tr>"
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6" id="dvDVRdata1">
  <div class="form-group">
    <label for="">DVR Address </label>
    <input type="text" class="form-control" id="txtDVRAddress1" runat="server" />
  </div>
  <div class="add">
    <i class="fa fa-plus" aria-hidden="true"></i>
  </div>
</div>
Tags:

3

Answers


  1. 0

    Assuming that you are going to add new input field in div#dvDVRdata1. You need to append the HTMLcontent to that div as following:

    $('#dvDVRdata1').append(tr);

    Login or Signup to reply.
  2. 0

    The thing is you need to append the element, which you did not do in the code in your question.

    As for remove, you also have not done it in your question yet. Here’s the example of add and remove.

    $(document).ready(function(){
  $('.add').on('click', function () {
      addDynamicTextbox();
  });

  $('.del').click(function (e) {
      deleteDynamicTextbox(e);
  });
});

function addDynamicTextbox() {
    //alert('icon clicked');
    var numItems = $('.form-group .dvDVRdata').length;
    alert(numItems);
    if (numItems != 5) {
        var formGroup = $('.form-group');
        var elem = `<div class="dvDVRdata" id="dvDVRdata${numItems+1}">
                                        <label for="txtDVRAddress${numItems+1}">DVR Address </label>
                                        <input type="text" class="form-control" id="txtDVRAddress${numItems+1}" runat="server" />
                                </div>`;
        formGroup.append(elem);
    }
}

function deleteDynamicTextbox() {
    //alert('icon clicked');
    var numItems = $('.form-group .dvDVRdata').length;
    alert(numItems);
    if (numItems > 1) {
        $(`#dvDVRdata${numItems}`).remove();
    }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="col-sm-6" id="dvDVRdata1">
  <div class="form-group">
    <div class="dvDVRdata" id="dvDVRdata1">
      <label for="">DVR Address </label>
      <input type="text" class="form-control" id="txtDVRAddress1" />
      </div>
  </div>
</div>

  <div class="add">
     <i class="fa fa-plus" aria-hidden="true"></i>
  </div>
  

  <div class="del">
     <i class="fa fa-minus" aria-hidden="true"></i>
  </div>
    Login or Signup to reply.
  3. 0

    Couple of problem in your code.

    1. Use slice(-1) to get last character of id. It’s remove your dependency using hardcode substr(13,... and you can use that value to increase new generated id by +1 .
    2. Check length for input using $('.form-group').find('input').length < 5 which check the length of input inside form-group class and user only able to add 5 inputs.
    3. Finally don’t forgot to append your generated element on form-group class using $('.form-group').append(tr); .
    4. I also add example to delete added tr using minus class.

    Example:

    $('#dvDVRdata1 .add').on('click', function() {
  addDynamicTextbox();
});

function addDynamicTextbox() {
  //alert('icon clicked');
  var numItems = $('#dvDVRdata1').length;

  if ($('.form-group').find('input').length < 5) {
    var lastfieldsid = $('#dvDVRdata1 input').last().attr('id');
    if ($('#' + lastfieldsid).val() != "") {
      var id = parseInt(lastfieldsid.slice(-1));
      var tr2 = $("#dvDVRdata1" + id + "");
      var tr = "<tr id='dvDVRdata" + (id + 1) + "'><td><div class=''><div class=''><div class='' id='dvDVRdata" + (id + 1) + "'><label>DVR Address</label><span><input type='text'  value='' name='nmDVRAddress" + "' id='txtDVRAddress" + (id + 1) + "'/></span></div></span></div></span></div></div><div class='minus'><i class='fa fa-times' aria-hidden='true'>Remove</i></div></td></tr>";

    }
    $('#yourid').append(tr);
  } else {
    alert("warning........")
  }
}
$(document).on('click', 'div.minus', function() {
  $(this).closest('tr').remove();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6" id="dvDVRdata1">
  <div class="form-group" id="yourid">
    <label for="">DVR Address </label>
    <input type="text" class="form-control" id="txtDVRAddress1" runat="server" />
  </div>
  <div class="add">
    <i class="fa fa-plus" aria-hidden="true">icon</i>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search