0

我已经成功修改了在这里找到的代码，它使用 javascript 创建了新的文本框字段。

我正在使用带有 datepicker jquery 插件的 timepicker 来进行平滑的日期和时间选择。我有个问题。加载页面后时间选择器正常工作，但在添加其他输入字段后，时间选择器停止工作。

这是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 个重复，程序会在某个 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';
    }
?>
4

2 回答 2

1

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

改变这个：

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

至：

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

数据库问题不清楚

于 2013-02-02T02:34:03.833 回答
0

对于这些类型的动态表单，您最好使用客户端模板作为动态位。这样您就不必编写两次代码（一次在 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 注入即可。请参阅如何防止 PHP 中的 SQL 注入？了解更多信息。

于 2013-02-02T03:20:37.690 回答