从Input获取整数值并动态生成输入 [英] Get integer value from Input and generate input dynamically
本文介绍了从Input获取整数值并动态生成输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想从"结束日期"输入中重点关注时动态获取输入，并将天数传递给JQuery并生成它.我尝试了此代码，但没有在职的 从几天中获取价值并生成面板数.就这样
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 but not working Get Value from days and generate number of panels..thats it
<script>
jQuery(function ($) {
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);
//
}
});
function calcDaysBetween(startDate, endDate) {
return (endDate - startDate) / (1000 * 60 * 60 * 24);
}
});
</script>
<script type="text/javascript">
$(document).on('focusout','#secondDate',function(){
var i;
var val=$("#days").val();
// e.preventDefault();
for(i=1;i<val;i++){
var panelHtml = '<input type="text" name="in_day[]" id="in_days[]"';
$(this).find(".row").append(panelHtml);
}
});
</script>
<label>Start Date</label>
<input class="form-control" id="firstDate" name="firstDate" placeholder="dd/mm/yyyy" type="text"/>
<label>End Date</label>
<input class="form-control" id="secondDate" name="secondDate" placeholder="dd/mm/yyyy" type="text"/>
<label>Number of Days</label>
<input type="text" class="form-control" id="days" name="days" value="">
<div class="row">
<!--Input generate Here-->
</div>
推荐答案
我想从日期"输入中获得焦点时动态获取面板，并将天数传递给JQuery并生成它.我尝试了此代码，但无法从天数获取值并生成面板数. /p>
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);
类为it-right-side的元素不是最近的元素.正确的方法是:
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")
它是最接近的col-md-2元素的同级.
It's the sibling of the closest col-md-2 element.
此外，我在填充面板组之前添加了空白.
Moreover, I added empty before to fill the panel-group.
如果需要在选择日期时自动创建面板，请在"$ from.add($ to).change(function(){":
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)
收件人:
$('#days').attr('value', days).trigger('click');
摘要:
$(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>
这篇关于从Input获取整数值并动态生成输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
