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 に設定しました。db テーブル (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();

DB の問題が明確でない

于 2013-02-02T02:34:03.833 に答える
0

この種の動的フォームでは、動的ビット用のクライアント側テンプレートを使用することをお勧めします。そうすれば、コードを 2 回 (js で 1 回、html で 2 回) コーディングする必要がなくなります。

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 に挿入した後、datetimepicker() などの ui クラスを必ずバインドしてください。

DB に保存する限り、一般的な考え方は、フィールドなどに一意の名前属性を付けたいということです。これは、サーバー側のコードがポスト パラメーターとして受け取るものです。これらのパラメーターを SQL 挿入ステートメントに収集し、DB に対して実行します。SQL インジェクションを避けるようにしてください。PHP で SQL インジェクションを防ぐにはどうすればよいですか? を参照してください。詳細については。

于 2013-02-02T03:20:37.690 に答える