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.
我正在使用带有datepicker jquery插件的timepicker来获得平滑的日期和时间选择。我有个问题。加载页面后，时间戳正常工作，但添加其他输入字段后，时间戳停止工作。
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>
我也在尝试在我的数据库中添加新的输入值，如何做到这一点的任何想法？对不起，我还是网络开发的新手。希望有一天会变得更好。
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个重复项一样，程序将创建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;
TO：
$('#fields').html( fields).find('.timepicker').datetimepicker();
数据库问题不明确
这篇关于Jquery Timedatepicker在动态表单上无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
