CODEWITHSUNDEEP
jqueryhtml
junaid
junaid

Reputation: 77

I am trying to append input to parent div on button click but its not working

I am new to jquery and I am trying to append input field dynamically on button click to parent div but its not working. I am trying to add div containing input in parent div with id join.

<script type='text/javascript'>
       $('#add1').click(function(){
           $('#join').append(" <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company name</label>
             <span class="help-block"></span>
          </div>")
       });
    </script>


    <div class="row" id="join">
       <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company name</label>
             <span class="help-block"></span>
          </div>
       </div>
       <!--/span-->
       <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company Location</label>
             <span class="help-block"></span>
          </div>
       </div>
       <div class="btn-toolbar col-md-2" style="padding-top: 20px;">
          <div class="btn-group btn-group-sm btn-group-circle">
             <button type="button" id="add1" class="btn red"><i class="fa fa-plus"></i></button>
             <button type="button" id="remove1" class="btn blue"><i class="fa fa-times"></i></button>
          </div>
       </div>
       <!--/span-->
    </div>

Upvotes: 1

Views: 359

Answers (2)

Jishnu V S
Jishnu V S

Reputation: 8409

sorry for my english , use single quotes after append , check with the working snippet

$('#add1').click(function(){
    $('#join').append('<div class="col-md-5"><div class="form-group form-md-line-input form-md-floating-label"><input type="text" class="form-control" id="form_control_1"><label for="form_control_1">Company name</label><span class="help-block"></span></div>')
});
<div class="row" id="join">
       <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company name</label>
             <span class="help-block"></span>
          </div>
       </div>
       <!--/span-->
       <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company Location</label>
             <span class="help-block"></span>
          </div>
       </div>
       <div class="btn-toolbar col-md-2" style="padding-top: 20px;">
          <div class="btn-group btn-group-sm btn-group-circle">
             <button type="button" id="add1" class="btn red"><i class="fa fa-plus"></i></button>
             <button type="button" id="remove1" class="btn blue"><i class="fa fa-times"></i></button>
          </div>
       </div>
       <!--/span-->
    </div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You've a double quotes " problem try to use single quotes instead ' like :

$('#join').append('<div class="col-md-5">
      <div class="form-group form-md-line-input form-md-floating-label"> \
         <input type="text" class="form-control" id="form_control_1"> \
         <label for="form_control_1">Company name</label>\
         <span class="help-block"></span>\
      </div>');

Hope this helps.

$('#add1').click(function(){
  $('#join').append('<div class="col-md-5"><div class="form-group form-md-line-input form-md-floating-label"><input type="text" class="form-control" id="form_control_1"><label for="form_control_1">Company name</label><span class="help-block"></span></div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="row" id="join">
  <div class="col-md-5">
    <div class="form-group form-md-line-input form-md-floating-label">
      <input type="text" class="form-control" id="form_control_1">
      <label for="form_control_1">Company name</label>
      <span class="help-block"></span>
    </div>
  </div>
  <!--/span-->
  <div class="col-md-5">
    <div class="form-group form-md-line-input form-md-floating-label">
      <input type="text" class="form-control" id="form_control_1">
      <label for="form_control_1">Company Location</label>
      <span class="help-block"></span>
    </div>
  </div>
  <div class="btn-toolbar col-md-2" style="padding-top: 20px;">
    <div class="btn-group btn-group-sm btn-group-circle">
      <button type="button" id="add1" class="btn red"><i class="fa fa-plus"></i></button>
      <button type="button" id="remove1" class="btn blue"><i class="fa fa-times"></i></button>
    </div>
  </div>
  <!--/span-->
</div>

Upvotes: 4

Related Questions