How to add input fields on button click

Question

function add() {
  var new_chq_no = parseInt($('#total_chq').val()) + 1;
  var new_input = "<input type='text' id='new_" + new_chq_no + "'>";
  $('#new_chq').html(new_input);
}

function remove() {
  var last_chq_no = $('#total_chq').val();
  if (last_chq_no > 1) {
    $('#new_' + last_chq_no).append('');
    $('#total_chq').val(last_chq_no - 1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button onclick="add()">Add</button>
<button onclick="remove()">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">

its adding input fields one time and on second click its not adding anything and remove button is not working

Zakaria Acharki · Accepted Answer · 2018-06-07 17:25:04Z

Working fiddle.

You have to use .append() instead of .html() when appending elements :

$('#new_chq').append(new_input);

It will be better to attach the event in your JS code like :

$('.add').on('click', add);
$('.remove').on('click', remove);

NOTE 1: Don't forget to increment the counter #total_chq :

$('#total_chq').val(new_chq_no);

NOTE 2: You've to use .remove() if you want to remove the element.

$('.add').on('click', add);
$('.remove').on('click', remove);

function add() {
  var new_chq_no = parseInt($('#total_chq').val()) + 1;
  var new_input = "<input type='text' id='new_" + new_chq_no + "'>";

  $('#new_chq').append(new_input);

  $('#total_chq').val(new_chq_no);
}

function remove() {
  var last_chq_no = $('#total_chq').val();

  if (last_chq_no > 1) {
    $('#new_' + last_chq_no).remove();
    $('#total_chq').val(last_chq_no - 1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="add">Add</button>
<button class="remove">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">

Akhil Aravind · Accepted Answer · 2018-06-07 17:31:11Z

Check the snippet, hope this is what you are looking for :D

function add(){
      var new_chq_no = parseInt($('#total_chq').val())+1;
      var new_input="<input type='text' id='new_"+new_chq_no+"'>";
      $('#new_chq').append(new_input);
      $('#total_chq').val(new_chq_no)
    }
    function remove(){
      var last_chq_no = $('#total_chq').val();
      if(last_chq_no>1){
        $('#new_'+last_chq_no).remove();
        $('#total_chq').val(last_chq_no-1);
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
  <button onclick="add()">Add</button>
  <button onclick="remove()">remove</button>
  <div id="new_chq"></div>
  <input type="hidden" value="1" id="total_chq">

Cavidan Rəcəbli · Accepted Answer · 2019-11-25 11:55:37Z

1

$('.add').on('click', add);
$('.remove').on('click', remove);

function add() {
  var new_chq_no = parseInt($('#total_chq').val()) + 1;
  var new_input = "<input type='text' id='new_" + new_chq_no + "'>";

  $('#new_chq').append(new_input);

  $('#total_chq').val(new_chq_no);
}

function remove() {
  var last_chq_no = $('#total_chq').val();

  if (last_chq_no > 1) {
    $('#new_' + last_chq_no).remove();
    $('#total_chq').val(last_chq_no - 1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="add">Add</button>
<button class="remove">remove</button>
<div id="new_chq"></div>
<input type="hidden" value="1" id="total_chq">

answered Nov 25, 2019 at 11:55

Cavidan Rəcəbli

112 bronze badges

1 Comment

David García Bodego Over a year ago

Welcome to SO! When you reply to a question with code, try to explain it a little bit.

Collectives™ on Stack Overflow

How to add input fields on button click

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related