jQuery Timedatepicker无法在动态表单上正常工作 [英] Jquery Timedatepicker won't work properly on dynamic form
问题描述
我已经成功修改了在这里找到的代码，该代码使用javascript创建了新的文本框字段.
I have successfully modified a code that I found here, which creates new textbox fields using javascript.
我正在将timepicker与datepicker jquery插件一起使用，以进行平滑的日期和时间选择.我有个问题.加载页面后，时间选择器可以正常工作，但是在添加其他输入字段之后，时间选择器将停止工作.
I am using timepicker with datepicker jquery plugin for a smooth date and time selection. I have a problem. The timepicker works normally after loading the page but after adding additional input fields, the timepicker stops working.
这是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开发领域的新手.希望有一天能变得更好.
I am also trying to add the new input values in my database, any ideas on how to do that? Sorry, I'm still new in web development. Hoping to become better someday.
这是我一段时间以来一直在修改的php代码.我希望将新创建的字段顺利地插入到我的数据库中.我将要添加的最大字段设置为4.我一直在尝试通过创建一组准备好在我的数据库表中捕获它们的字段来动态地插入字段(datefrom1，dateto1，datefrom2，dateto2等，但是我可以没办法.
Here is the php code that I've been modifying for a while now. I want the newly created fields to be inserted in my database smoothly. I set the maximum of fields to be added to 4. I've been trying to insert the fields dynamically by creating a set of fields ready to catch them in my db table(datefrom1,dateto1,datefrom2,dateto2 and so on but i can't get it to work.
还可以通过代码在sql中添加大量字段吗?就像您有2个重复项一样，程序将在某个db表中创建2个新字段?如果可能的话，我希望这样做.我一直在网上寻找无处不在，但找不到解决方案.
Also, is it possible to add a umber of fields in my sql through code? Like if you have 2 duplicates the program will create 2 new fields in a certain db table? I'd prefer that if possible. I've been looking everywhere in the net but couldn't find the solution.
$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';
}
?>
推荐答案
添加新元素后，您需要为其初始化插件.当您运行代码时，它将不会对不存在的元素进行初始化.
You need to initialize the plugin for newly added elements after you add them. It won't initialize on elements that don't exists when you run the code.
更改此:
document.getElementById("fields").innerHTML=fields;
收件人:
$('#fields').html( fields).find('.timepicker').datetimepicker();
数据库问题不清楚
这篇关于jQuery Timedatepicker无法在动态表单上正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
