Question

我已经成功修改了我在这里找到的代码，它使用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>

我也在尝试在我的数据库中添加新的输入值，有关如何做的任何想法？对不起，我还是网络开发的新手。希望有一天会变得更好。

编辑：这是我已经修改了一段时间的PHP代码。我希望新创建的字段能够顺利地插入到我的数据库中。我将要添加的字段的最大值设置为4.我一直在尝试通过创建一组准备好在我的数据库表中捕获它们的字段来动态插入字段（datefrom1，dateto1，datefrom2，dateto2等等，但我可以不能让它发挥作用。

另外，是否可以通过代码在我的sql中添加一串字段？就像你有2个重复项一样，程序会在某个db表中创建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';
    }
?>

Answer 1

添加后，您需要为新添加的元素初始化插件。它不会初始化运行代码时不存在的元素。

改变这个：

document.getElementById("fields").innerHTML=fields;

TO：

$('#fields').html( fields).find('.timepicker').datetimepicker();

数据库问题不明确

Answer 2

对于这些动态形式，最好使用客户端模板作为动态位。这样你就不必对它们进行两次编码（一次在js中，一次在html中）

请参阅http://jsfiddle.net/HmCPd/1/

你的addField函数应该类似于：

function addField() {
    // get html from the template
    var html = $('#fieldTemplate').html();

    /*
    make a new dom element (need to trim whitespace or jquery 
    won't parse the template properly
    */
    var $newField = $($.trim(html));

    // insert the new field and make it a datepicker
    $('#fieldsContainer')
      .append($newField)
      .find('input')
      .datepicker();
}

这与你想做的非常相似。在将新节点插入dom之后，请确保绑定任何ui类，如datetimepicker（）。

就将数据保存到数据库而言，一般的想法是，您希望提供您的字段等...唯一的名称属性，您的服务器端代码将作为后期参数接收。将这些参数收集到SQL插入语句中并对数据库运行它。只要确保你避免SQL注入。有关详细信息，请参阅How can I prevent SQL injection in PHP?。

Jquery Timedatepicker在动态表单上无法正常工作

2 个答案: