2

My Javascript code is like this :

var j = 1;
$('body').on('click', '.btn-add-detail', function(){
    $('#pax_dob_2').attr('id','pax_dob_' + j);
    $('#pax .clone').clone().appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
    $("#pax_dob" + j).datepicker({
        dateFormat: "yy-mm-dd",
        format: "yyyy-mm-dd",
        orientation: "left", 
        autoclose: true,
        changeYear : true,
        changeMonth : true,
        yearRange: "-100:+0"
    });
});

My full code and demo is like this : https://jsfiddle.net/oscar11/w4zf690v/

When I add multiple and I click input datepicker, the datepicker not working

Any solution to solve my problem?

Thank you very much

Improve this question
2

2 Answers 2

Reset to default
1

You can use a common class for the date field and just initialize the datepicker for the newly cloned element.

$('body').on('click', '.btn-add-detail', function() {
  // clone the element 
  $ele = $('#pax .clone').clone();
  // append it to parent and do the rest
  $ele.appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
  // get the date input and initialize the datepicker
  $(".pax_dob", $ele).datepicker({
    dateFormat: "yy-mm-dd",
    format: "yyyy-mm-dd",
    orientation: "left",
    autoclose: true,
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+0"
  });
});


$('body').on('click', '.btn-add-detail', function() {
  $ele = $('#pax .clone').clone();
  $ele.appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
  // or just initialize for the appended
  $(".pax_dob", $ele).datepicker({
    dateFormat: "yy-mm-dd",
    format: "yyyy-mm-dd",
    orientation: "left",
    autoclose: true,
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+0"
  });
});

$("#pax_dob_1").datepicker({
  dateFormat: "yy-mm-dd",
  format: "yyyy-mm-dd",
  orientation: "left",
  autoclose: true,
  changeYear: true,
  changeMonth: true,
  yearRange: "-100:+0"
});

$('body').on('click', '.btn-remove-detail', function() {
  if ($('#pax div.row').length > 2) {
    $(this).parent().parent().parent().parent().parent().parent().remove();
  }
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="form-group">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-10">
        <label class="control-label"><strong>Pax</strong>
        </label>
      </div>
      <div class="col-sm-2">
        <label class="control-label">Add Pax</label>
        <button type="button" class="btn btn-success btn-add-detail"><i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-12">
    <div id="pax">
      <div class="row margin-top-10 clone hidden">
        <div class="table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td style="width:160px;">
                  <select class="form-control pax_type not_included required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title not_included required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name not_included">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name not_included">
                </td>
                <td>
                  <input type="text" name="pax_dob[]" class="form-control pax_dob not_included pax_dob">
                </td>
                <td>
                  <button type="button" class="btn red btn-remove-detail"><i class="fa fa-trash-o"></i>delete</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Type Passenger</th>
                <th>Title</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <select class="form-control pax_type required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name">
                </td>
                <td>
                  <input type="text" id="pax_dob_1" name="pax_dob[]" class="form-control pax_dob">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <input type="hidden" class="pax_check" name="pax_check" id="pax_check" />
</div>

Or the same with chaining methods.

$('body').on('click', '.btn-add-detail', function() {
  $('#pax .clone')
    .clone()
    .appendTo('#pax')
    .removeClass('hidden clone')
    .find(".not_included")
    .removeClass("not_included")
    .end()
    .find(".pax_dob").datepicker({
      dateFormat: "yy-mm-dd",
      format: "yyyy-mm-dd",
      orientation: "left",
      autoclose: true,
      changeYear: true,
      changeMonth: true,
      yearRange: "-100:+0"
    });
});


$('body').on('click', '.btn-add-detail', function() {
  $('#pax .clone')
    .clone()
    .appendTo('#pax')
    .removeClass('hidden clone')
    .find(".not_included")
    .removeClass("not_included")
    .end()
    .find(".pax_dob").datepicker({
      dateFormat: "yy-mm-dd",
      format: "yyyy-mm-dd",
      orientation: "left",
      autoclose: true,
      changeYear: true,
      changeMonth: true,
      yearRange: "-100:+0"
    });
});

$("#pax_dob_1").datepicker({
  dateFormat: "yy-mm-dd",
  format: "yyyy-mm-dd",
  orientation: "left",
  autoclose: true,
  changeYear: true,
  changeMonth: true,
  yearRange: "-100:+0"
});

$('body').on('click', '.btn-remove-detail', function() {
  if ($('#pax div.row').length > 2) {
    $(this).parent().parent().parent().parent().parent().parent().remove();
  }
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="form-group">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-10">
        <label class="control-label"><strong>Pax</strong>
        </label>
      </div>
      <div class="col-sm-2">
        <label class="control-label">Add Pax</label>
        <button type="button" class="btn btn-success btn-add-detail"><i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-12">
    <div id="pax">
      <div class="row margin-top-10 clone hidden">
        <div class="table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td style="width:160px;">
                  <select class="form-control pax_type not_included required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title not_included required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name not_included">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name not_included">
                </td>
                <td>
                  <input type="text" name="pax_dob[]" class="form-control pax_dob not_included pax_dob">
                </td>
                <td>
                  <button type="button" class="btn red btn-remove-detail"><i class="fa fa-trash-o"></i>delete</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Type Passenger</th>
                <th>Title</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <select class="form-control pax_type required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name">
                </td>
                <td>
                  <input type="text" id="pax_dob_1" name="pax_dob[]" class="form-control pax_dob">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <input type="hidden" class="pax_check" name="pax_check" id="pax_check" />
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

When I select datepicker, It's not display in textfield
on the first datepicker that appears. But in a second datepicker and so on, it does not appear in textfield
The first method also does not work. Datepicker 1 and 2, It's appear in textfield. But Datepicker 3 and so on, it does not appear in textfield
0

When you clone something - you also clone its id - therefore when you append it into another element - you are also appending a duplicated id. You need to ensure that the id of the cloned element is altered before appending it.

perhaps as you are appending it - you could alter its id with

//js 
var new ID = uniqueContent;
 .attr('id', newID);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.