CODEWITHSUNDEEP
javascriptjquery
Test Account
Test Account

Reputation: 77

add new input after button is clicked

I need to have a button which will add a new text and input each time after the button is clicked.

Desired output after the button is clicked once.

enter image description here

But given my following codes, my new input will override the initial input.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table</title>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>Input
          <input type="text" class="form-control" readonly="readonly">
        </td>
      </tr>
    </tbody>
  </table>
  <div class="form-group row" style="padding-top: 10px">
    <div class="col-md-1 text-center">
      <button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
    </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#addnewinputbtn').click(function() {
        $('tr').appendTo('tbody')
          .html(
            '<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
      });
    });
  </script>
</body>

</html>

Upvotes: 1

Views: 96

Answers (4)

Deep
Deep

Reputation: 9804

this code

 $('tr').appendTo('tbody').html(
   '<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
 });

.html() on tr will replace the html of tr element with the new input td element , you should append the new input td element in the tr element.

Edited: This code will replace the html of the tr element in the DOM since the selector $('tr') will select the tr element present in the DOM.

$('tr').appendTo('tbody')
          .html(
            '<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
      });

but if you wan to create a new tr element, the code should be

$('').appendTo('tbody') .html( 'New Input '); });

$('') will create a new element.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table</title>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>Input
          <input type="text" class="form-control" readonly="readonly">
        </td>
      </tr>
    </tbody>
  </table>
  <div class="form-group row" style="padding-top: 10px">
    <div class="col-md-1 text-center">
      <button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
    </div>
  </div>

  <script type="text/javascript">
    $(document)
      .ready(
        function() {
          $('#addnewinputbtn')
            .click(
              function() {
                
         $('<tr>').appendTo('tbody').html(
            '<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
      });

        });
  </script>
</body>

</html>

Upvotes: 2

Nishant Saini
Nishant Saini

Reputation: 431

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table</title>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>Input
          <input type="text" class="form-control" readonly="readonly">
        </td>
      </tr>
    </tbody>
  </table>
  <div class="form-group row" style="padding-top: 10px">
    <div class="col-md-1 text-center">
      <button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
    </div>
  </div>

  <script type="text/javascript">
    $(document)
      .ready(
        function() {
          $('#addnewinputbtn')
            .click(
              function() {
                $('tbody')
                  .append(
                    '<tr><td>New Input <input type="text" class="form-control" readonly="readonly"></td></tr>');

              });
        });
  </script>
</body>

</html>

Upvotes: 0

Jeric Cruz
Jeric Cruz

Reputation: 1909

You can use Jquery append to add another element.

function AddTextBox(){
  $("#populateInput").append('<input type="text" class="customControl"/>')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="AddTextBox()">Add Input</button>
<div id="populateInput">
  </div>

Upvotes: 0

Zaidhaan Hussain
Zaidhaan Hussain

Reputation: 516

Try doing appending it do the tr instead like so: 

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

That will append a new element nested in the tr tag instead of appending a new element to the body thus overriding itself

Upvotes: 0

Related Questions