PHP + Javascriptの動的divで、フォームに入力を動的に追加する

Question

PHP + Javascriptの動的divで、フォームに入力を動的に追加する

ボタンクリック時にMySQLからのデータが入力されるドロップダウンリストを動的に追加します。

<div id="dynamicDiv">
        sqlconn();
        $sql="SELECT column_name FROM table";
        $result = mysql_query($sql);
        $num_rows = mysql_num_rows($result);
        echo "";
        mysql_close($con);
</div>

<input type="button" value="+ Data" onClick="addInput('dynamicDiv');">

私が知っている唯一の方法は、スクリプトを書くことですが、私はスクリプト上でPHPスクリプトを行うことはできません（またはできますか？）。ドロップダウンリストを追加するためにクエリを行う必要があります。

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 = "whatever needs to be dynamically input on div";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

スクリプト内のドロップダウンリストを埋め込むための回避策がありますか？とても有難い！

0

追加された 06 2月 2012 〜で 04:11 著者 vinz

ビュー: 3

源

ru fr es pt de ar

あなたは実際に何を求めているのですか？私の試みは次のとおりです：サーバーからのajaxリクエストデータのトラバースは、必要に応じてdomに追加されたデータを返しました。もしそうなら実際の質問をしてください

追加された 06 2月 2012 〜で 04:19, 著者 T I, 源

jqueryの .ajax（）を使用すると、ロジックを実装して this 、それ以外の場合は ajax を onreadystatechange で処理できます

追加された 06 2月 2012 〜で 04:57, 著者 T I, 源

AJAXを使用してdivにデータを入力するにはどうすればよいですか？

追加された 06 2月 2012 〜で 04:45, 著者 vinz, 源

ご協力ありがとうございました！しかし、私はどのようにデータベースに行き、ajaxでデータを取得するのですか？スクリプトに渡すphpのsqlconnection、query、arrayがあるので、私のスクリプトではできません。

追加された 06 2月 2012 〜で 07:13, 著者 vinz, 源

2 答え

著者 Eugen Rieck · Answer 1 · 2012-02-06T04:18Z

基本的に2つのオプションがあります

ページを作成するときにドロップダウンリストのHTMLを作成し、

〜のように

<script type=...>
var selecthtml='<?php echo $selecthtml; ?>'
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = selecthtml;
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>

または、AJAXを見て選択内容を入力してください。

前者はより簡単で、後者はよりクリーンです。

著者 Sam T · Answer 2 · 2012-02-06T06:28Z

**This is the actual way the test goes and Change according to your table and use it . It will work as you expected**

"; echo 'countStud ='.count($arrayData).';'; echo 'stud = '.json_encode($arrayData).';'; echo ""; ?>



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    divCount =0;   
    function createDiv()
    {  

        var divTag  = document.createElement("div");
        var studList ="";
         studList += '';
         divTag.innerHTML  = studList;
        document.getElementById('dynamicElements').appendChild(divTag);
        divCount++;

    }

 </script>
</head>

<body>
<form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<div id="dynamicElements"></div>
 <input type="submit" value="Submit" />
 </form>
 <input type="button" onClick="createDiv()" value="Add"/>
</body>
</html>