Get integer value from Input and generate input dynamically

Question

i want to get inputs dynamically when focus out from \"End Date\" input and pass the number of days to JQuery and generate it.i tried this code

Answer 1

i want to get Panels dynamically when focus out from "Date" input and pass the number of days to JQuery and generate it.i tried this code but not working Get Value from days and generate number of panels..thats it

I changed slightly from focus out to click event and formatted the input as a button. You may always to change back. The problem you are experiencing is:

$(this).closest(".it-right-side").find(".panel-group").append(panelHtml);

The element with class it-right-side is not the closest element. The correct way is:

$(this).closest('.col-md-2').siblings(".it-right-side").find(".panel-group")

It's the sibling of the closest col-md-2 element.

Moreover, I added empty before to fill the panel-group.

If you need to create Panels automatically when select the date change this line inside the "$from.add($to).change(function () {":

$('#days').attr('value', days)

to:

$('#days').attr('value', days).trigger('click');

The snippet:

$(document).on('click', '#days', function () {
  var i;
  var val = $(this).val();
  if (val == 0) {
      return;
  }
  var panelGroup = $(this).closest('.col-md-2').siblings(".it-right-side").find(".panel-group");
  panelGroup.empty();
  for (i = 0; i < val; i++) {
      var panelHtml = '<div class="panel panel-info"> ' +
              '<div class="panel-heading"> ' +
              '<h4 class="panel-title"> ' +
              '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '">Day ' + (i + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
              '</div> ' +
              '<div id="collapse' + i + '" class="panel-collapse collapse"> ' +
              '<div class="panel-body">' +
              '<div class="row" > ' +
              '<div class="col-md-12 sch-box">' +
              '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div> ' +
              '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div> ' +
              '<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div> ' +
              '<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div> ' +
              '</div> ' +
              '</div> ' +
              '</div> ' +
              '<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button> ' +
              '</div> ' +
              '</div>';

      panelGroup.append(panelHtml);
  }
});


var $from = $("#firstDate"),
        $to = $("#secondDate");

$from.datepicker({
    numberOfMonths: 1,
    minDate: 0,
    dateFormat: 'dd-mm-yy',
    onClose: function (selectedDate) {
        $to.datepicker("option", "minDate", selectedDate);
    }
});

$to.datepicker({
    defaultDate: "+1w",
    numberOfMonths: 1,
    minDate: 0,
    dateFormat: 'dd-mm-yy',
    onClose: function (selectedDate) {
        $from.datepicker("option", "maxDate", selectedDate);
    }
});
$from.add($to).change(function () {
    var dayFrom = $from.datepicker('getDate');
    var dayTo = $to.datepicker('getDate');
    if (dayFrom && dayTo) {
        var days = calcDaysBetween(dayFrom, dayTo);
        $('#days').attr('value', days).trigger('click');
//
    }
});

function calcDaysBetween(startDate, endDate) {
    return (endDate - startDate) / (1000 * 60 * 60 * 24);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="col-md-5">
    <div class="form-group"> <!-- Date input -->
        <label class="control-label" for="firstDate">Start Date</label>
        <input class="form-control" id="firstDate" name="firstDate" placeholder="dd/mm/yyyy" type="text"/>
    </div>
</div>
<div class="col-md-5">
    <div class="form-group"> <!-- Date input -->
        <label class="control-label" for="secondDate">End Date</label>
        <input class="form-control" id="secondDate" name="secondDate" placeholder="dd/mm/yyyy" type="text"/>
    </div>
</div>
<div class="col-md-2">
    <div class="form-group">
        <label class="form-control-label">Day(s)</label>
        <input type="button" class="form-control btn btn-primary" id="days" name="days" value="0">
    </div>
</div>

<!--Panel Create here-->
<div class="col-md-6 it-right-side">
    <p><b>Set your schedules</b></p>

    <div>
        <div class="col-md-12" id="dynamicInput">
            <!--Start Panel-->
            <div class="panel-group" id="accordion">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Day 1<i
                                    class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body" id="formcreation">
                            <div class="row">
                                <div class="col-md-12 sch-box">
                                    <div class="col-md-6 form-group"><input type="time" class="form-control"
                                                                            value="00:00" id="sch-s-time"
                                                                            name="sch-s[]"></div>
                                    <div class="col-md-6 form-group"><input type="time" class="form-control"
                                                                            value="00:00" id="sch-e-time"
                                                                            name="sch-e[]"></div>
                                    <div class="col-md-12 form-group"><input type="text" class="form-control"
                                                                             placeholder="Enter Description"
                                                                             id="sch-title" name="sch-title[]"></div>
                                    <div class="col-md-12 form-group"><textarea id="sch-title1"
                                                                                class="form-control vresize"
                                                                                name="sch-title[]"></textarea></div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn center-block panel-addbtn"><i class="fa fa-plus"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <!--End panel-->
    </div>
</div>