Jquery Timedatepicker无法在动态表单上正常工作
Jquery Timedatepicker无法在动态表单上正常工作
提问于 2013-02-02 10:19:41
我已经成功地修改了我在这里找到的一段代码，它使用javascript创建新的文本框字段。
我使用timepicker和datepicker jquery插件来平滑地选择日期和时间。我有个问题。时间选择器在加载页面后正常工作，但在添加其他输入字段后，时间选择器停止工作。
下面是html代码：
<head>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/timepicker.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/timepicker.js"></script>
</head>
<body>
<form id="obform" name="obform" action="test5.php" method="POST">
<div id="fields">
<p><label>Date From:</label><input class="timepicker" name="txtdatefrom0" type="text"/></p>
<p><label>Date To:</label><input class="timepicker" name="txtdateto0" type="text"/></p>
<input type="hidden" name="num" value="1"/>
<button id="start" type="button" onclick="addField()">Add</button>
<input type="submit" value="Submit"/>
</div>
</form>
</body>这是脚本
<script>
$(document).ready(function(){
$('.timepicker').datetimepicker();
});
$('#start').click(function(){
$(".timepicker").datetimepicker("destroy");
$(".timepicker").datetimepicker();
});
var num=0;
function addField(){
num++; //1
if(num>4){
num--;
}
makefields();
}
function rmField(){
num--;
if(num<0){
num++;
}
makefields();
}
function makefields(){
var fields="";
for(var o=0;o<=num;o++){
fields+="<p><label>Date From: </label><input class=\"timepicker\" name=\"txtdatefrom"+o+"\" type=\"text\"></p>";
fields+="<p><label>Date To:</label><input class=\"timepicker\" name=\"txtdateto"+o+"\" type=\"text\"/></p>";
}
fields+="<br/><input type=\"hidden\" name=\"num\" value=\""+o+"\"/>";
if(num!=3){fields+="<button type=\"button\" onclick=\"addField()\">Add</button>";}
if(num>0){fields+="<button type=\"button\" onclick=\"rmField()\">Remove</button>";}
fields+="<input type=\"submit\" value=\"Submit\"/></form>";
document.getElementById("fields").innerHTML=fields;
}
</script>我也在尝试在我的数据库中添加新的输入值，你有什么想法吗？对不起，我在web开发方面还是个新手。希望有一天能变得更好。
编辑:这是我已经修改了一段时间的php代码。我希望新创建的字段能够顺利插入到我的数据库中。我将要添加的字段的最大值设为4。我一直试图通过在我的数据库表中创建一组准备好捕获它们的字段(datefrom1、dateto1、datefrom2、dateto2等等)来动态地插入这些字段，但是我不能让它工作。
另外，是否可以通过代码在我的sql中添加多个字段？例如，如果你有2个副本，程序将在某个数据库表中创建2个新字段？如果可能的话，我更愿意那样做。我已经在网上到处找了，但是找不到解决方案。
$mysql_host = 'changed'; // put change for confidentiality
$mysql_user = 'changed';
$mysql_pass = 'changed';
$mysql_db = 'changed';
if(!mysql_connect($mysql_host, $mysql_user, $mysql_pass) || !mysql_select_db($mysql_db)) {
die(mysql_error());
}
$sets=mysql_real_escape_string($_REQUEST["num"]);
for($loop=0;$loop<$sets;$loop++){
$df="txtdatefrom".$loop;
$dt="txtdateto".$loop;
if(isset($_POST[$df]) && isset($_POST[$dt])) {
$datefrom=mysql_real_escape_string($_REQUEST[$df]);
$dateto=mysql_real_escape_string($_REQUEST[$dt]);
$query="INSERT INTO testob (datefrom,dateto) VALUES ('$datefrom','$dateto')";
$query_run=mysql_query($query);
}
else {
echo 'Fill up all fields';
}
?> Stack Overflow用户
发布于 2013-02-02 10:34:04
在添加完新添加的元素后，您需要初始化插件。当你运行代码时，它不会在不存在的元素上初始化。
更改此设置：
document.getElementById("fields").innerHTML=fields;至：
$('#fields').html( fields).find('.timepicker').datetimepicker();数据库问题不明确
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14657950
复制相关文章
相似问题
腾讯云开发者
