div内のdivに設定されたドロップダウンリストを動的に複製するボタン

ボタンを押して、div内にdropdownlist（MySQLデータベースにアクセスして作成）を動的に追加しますか？最初のものを複製するような並べ替え。div内のdivに設定されたドロップダウンリストを動的に複製するボタン

私はjavascriptを使ってテキストボックスだけであるdivを複製することができます（したがって、データベースにアクセスする必要はありません）。 javascriptは複製を行います。

は以下のjavascript

var counter = 1; 
var limit = 15; 
function addInput(divName){ 
    if (counter == limit) { 
      alert("You have reached the limit of adding " + counter + " inputs"); 
    } 
    else { 
      var newdiv = document.createElement('div'); 
      newdiv.innerHTML = "Type: <input type='text' name='types[]'> <br> Desc: <input type='text' name='descs[]'> <p>"; 
      document.getElementById(divName).appendChild(newdiv); 
      counter++; 
    } 
}

私が直面してる問題はJavaScriptでデータベースを介して取り込まドロップダウンリスト+です。以下は、複製したいドロップダウンリストです

 sqlconn(); 
     $sql="SELECT type FROM products"; 
     $result = mysql_query($sql); 
     $num_rows = mysql_num_rows($result); 
     echo "<select type=\"type\">";  
     for($i=0;$i<$num_rows;$i++){ 
      $products = mysql_fetch_array($result); 
      echo "<option value='" . $products['type'] . "'>" . $products['type'] . "</option>"; 
     } 
     echo "</select>"; 
     mysql_close($con);

出典

2012-02-07 vinz

：私はDBへの呼び出しをコメントアウトし、ちょうど「偽」のDropboxを印刷しているという事実にご注意くださいサーバ側。あなたがしたいことは、 "＆action = duplicate"のようなものを自分自身に提出するフォームを作成することです。このフォームは、POST/GETリクエストを受け取るPHPファイルに置かれ、DBを呼び出して更新された値のリストを取得し、新しいドロップダウンを作成してください（そうでないと、以前のドロップダウンボックスもHTTPリクエストに渡してください）。 – alfasin

ドロップダウンリストのhtmlはどこですか？あなたはリストを作成することができませんクローンdiv？ –

私は自分の質問を編集して、私が複製したいドロップダウンリストを表示しました。 @alfasin私はあなたが再び説明することができれば、あなたが何を残念に思っているかを知る。 – vinz

次の例をとり、変更することができます。これは上で行われる必要があります - あなたはあなたのDBにアクセスする必要があるので、あなたはJSを使用してそれを行うことはできません

<?php 
function getDropbox(){ 
    $res = ""; 
    /*sqlconn(); 
    $sql="SELECT type FROM products"; 
    $result = mysql_query($sql); 
    $num_rows = mysql_num_rows($result); 
    $res = "<select type=\"type\">"; 
    for($i=0;$i<$num_rows;$i++){ 
     $products = mysql_fetch_array($result); 
     $res += "<option value='" . $products['type'] . "'>" . $products['type'] . "</option>"; 
    } 
    $res += "</select>"; 
    mysql_close($con);*/ 
    $res = "<select type=\"type\"><option value='sas'>kiki</option>"; 
    return $res; 
} 

    echo "<html><body> <table><form action=\"\" method=\"POST\"><tr><td>"; 


    if(isset($_POST["check1"]) && $_POST["check1"] == "Yes"){ 
    $create = $_POST["check1"]; 
    } 
    if(isset($_POST['num'])){ 
    $numOfDropboxes = $_POST["num"]; 
    } 

    if ($numOfDropboxes == NULL){ 
      $numOfDropboxes=1; 
    } 
    if ($create != NULL){ 
     $numOfDropboxes++; 
    } 
    for($i=0; $i < $numOfDropboxes; $i++){ 
     $dropbox = getDropbox(); 
     echo "<tr><td>".$dropbox."</td></tr>"; 
    } 
    echo "create = $create [".$_POST['check1']."] and numOfDropboxes = $numOfDropboxes </br>"; 

    echo "</td> </tr><tr><td><input type=hidden id=\"num\" name=\"num\" value=\"$numOfDropboxes\" /><input type=checkbox id=\"check1\" name=\"check1\" value=\"Yes\" />Click here if you want to create a dropbox</td> </tr>"; 
    echo "<tr><td><input type=\"submit\" value=\"Submit\"/></td></tr>"; 
    echo "</form></table></body></html>"; 
?>

出典

2012-02-08 00:07:21 alfasin

なぜAJAXを使用しないのですか？ドロップダウン要素を作成し、サーバーにドロップダウンアイテムのリクエストを送信し、get'emしてリストに値を設定します。

出典

2012-02-07 21:26:12

あなたはJSのAJAXを意味しますか？ – vinz

<html> 
    <script type="text/javascript" > 
    var counter = 1; 
    var limit = 15; 


    function inAdd(divName){ 

     if (counter == limit) { 
       alert("You have reached the limit of adding " + counter + " inputs"); 
     } 
     else { 
       var newdiv = document.createElement('div'); 
       newdiv.innerHTML = "Type: <input type='text' name='types[]'> <br> Desc: <input type='text' name='descs[]'> <p>"; 
       document.getElementById(divName).appendChild(newdiv); 
       counter++; 
     } 
    } 
    </script> 
    <div id="foobar"> 
     <input type="button" value="click" onclick="inAdd('foobar')" /> 
    </div> 
    </html>

動的のテキストボックスの..あなたがそれらに追加する任意のコンテンツを追加、これを試してみてください - ..あなたは、AJAXを介してサーバから取得する必要があるのか、ボタンをonclickから...これが問題であると思います

出典

2012-02-07 21:34:36

問題は、このコードはDBからの情報を取得しないことです。 – alfasin

@alfasin私は、divを入力することが問題であるという印象を受けました.dbから情報を取得することが問題であれば、 ajaxコール - サーバーから情報を取得し、そのデータを使用してリストを再投入します。 –

@alfasinが正しいです。私は今AJAXで何かをしようとしています。しかし、それはまあまあ良いです。 – vinz

div内のdivに設定されたドロップダウンリストを動的に複製するボタン

答えて

関連する問題