3

JavaScript を使用して別の項目を追加するフォームに取り組んでいます。目的は、明細項目を請求書に追加することです。フォームでテキスト ボックスを使用しているときに問題なく動作するようになりましたが、mysql を呼び出してドロップダウン ボックスのデータを取得するドロップダウン ボックスでこれを動作させる方法に行き詰まっています。

これが私が持っているものです。

 <?php
     include $_SERVER['DOCUMENT_ROOT']."/connect.php";
     include $_SERVER['DOCUMENT_ROOT']."/includes/header.php";
 ?>

 <script type="text/javascript">
     var counter = 1;
     function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><select name='myInputs[]'><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>";
          document.getElementById(divName).appendChild(newdiv);
     }
 </script>

 <form method="POST">
     <div id="dynamicInput">
          Entry 1<br><select name="myInputs[]"><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>
     </div>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
 </form>

そこで、何が起こっているのかについての情報をここに示します。現在、上記の JavaScript コードは MySQL クエリを示しています。これにより、広告申込情報の追加機能が無効になります。単純にクエリを削除して他の php をそのままにしておくと、行項目の追加が再び機能し始めますが、もちろんドロップダウンにはデータがありません。

フォーム自体では、javascript を使用せずにデータベースから最初の項目を取得しますが、これは正常に機能しています。

近づいている気がするが、ここからどこへ行けばいいのかわからない。

前もって感謝します。

編集：ニックのおかげで、私はこれを機能させました。これがコードです。

 <?php
 include $_SERVER['DOCUMENT_ROOT']."/connect.php";
 include $_SERVER['DOCUMENT_ROOT']."/includes/header.php";
 ?>

 <script type="text/javascript">
 var counter = 1;
 function addInput(div){
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Entry " + (++counter) + " <br><select name='myInputs[]'>" + xmlhttp.responseText + "</select>";
     }
      document.getElementById(div).appendChild(newdiv);
   }

 xmlhttp.open("GET", "update_text.php", false);
 xmlhttp.send();
 }
 </script>

 <form method="POST">
 <div id="dynamicInput">
      Entry 1<br><select name="myInputs[]"><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>
 </div>
 <input type="button" value="Add" onClick="addInput('dynamicInput');">
 </form>

次に update_text.php

 <?php
 include $_SERVER['DOCUMENT_ROOT']."/connect.php";
 $result = mysql_query("SELECT * FROM salesitem");
 while($row = mysql_fetch_array($result)) {
 echo "<option value=\"".$row['name']."\">".$row['name']."</option>";
 }
 ?>

そして、これは、フォームから作成された元のエントリに対してのみ、javascript add line item に対して機能しないデータベースへの私の php 投稿です。（ドロップダウン以外のフィールドがあります）。

 <?php

 include $_SERVER['DOCUMENT_ROOT']."/connect.php";

 $company = mysql_real_escape_string($_POST['company']);

 foreach($_POST['item'] as $i => $item)
 {
   $item = mysql_real_escape_string($item);
 $quantity = mysql_real_escape_string($_POST['quantity'][$i]);

 mysql_query("INSERT INTO invoice (company, item, quantity) VALUES ('$company', '".$item."', '".$quantity."') ") or die(mysql_error());
 }
 echo "<br><font color=\"green\"><b>Invoice added</b></font>";

 ?>

ありがとう、これをもっときれいにできるかどうか教えてください。

4

3 に答える 3

2

悲しいことに、あなたがやろうとしている方法は、PHP の性質上うまくいきません。

クライアントがサーバーからページをリクエストすると、すべてのphpが実行されます。

したがって、JavaScript 関数内の php ブロックは、実際には php の静的な結果にすぎません。

サーバーから新しいデータを要求するには、XMLHttpRequests/Ajax を使用する必要があります。

簡単な (そしておそらくかなり悪い) 例を次に示します。

JavaScript 関数の変更:

var counter = 1;
function addInput(div) {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var d = document.getElementById(div);
                    d.innerHTML=d.innerHTML  +"<div>Entry " + (++counter) + " <br><select name='myInputs[]'>" + xmlhttp.responseText + "</select></div>";
        }
    }
    xmlhttp.open("GET", "updated_list.php", false);
    xmlhttp.send();
}

サーバー上の新しい php ファイル: (updated_list.php)

<?php 
// you'll need to include stuff to connect to your database here
$result = mysql_query("SELECT * FROM salesitem"); 
while($row = mysql_fetch_array($result)) { 
    echo "<option value=\"".$row['name']."\">".$row['name']."</option>";
} 
?>

アップデート

私はそれが悪い例だと言いました:)私の元のコードは、更新されたdivに追加するのではなく、divの内容を上書きしました。これは単なる例であり、AJAX とサーバーからデータを要求する方法を読む必要があります。

于 2013-03-24T23:32:03.247 に答える
0

ページがロードされた後は、JavaScript 関数内でサーバー コードを使用することはできません。サーバー側コードは、その名前のように、サーバー上で実行されるコードです。そのため、ページの読み込みが完了すると、クライアントに「戻り」、クライアント コード (javascript) のみが実行できるようになります。だからあなたのライン

newdiv.innerHTML = "Entry " + (counter + 1) + " <br><select name='myInputs[]'><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select>";

は少し間違いです。

あなたができることは、データベースからjavascriptにデータを返し（jsonを使用するのが最良のオプションです）、現在javascriptデータであるサーバーからの生データを使用して選択ボックスを動的に構築することです。

あなたのデータが

var data = [{name:'n1'},{name:'n2'},{name:'n3'}];

JavaScript を使用してこのデータを実行し、コンボを作成できます。

var newSelect = document.createElement('select');
for(var i=0;i<data.length;i++){
  var name = data[i].name;
  newSelect.options[newSelect.options.length] = new Option(name,name);
}
于 2013-03-24T23:20:19.310 に答える
0

これはAJAX (Asynchronous Javascript And XML) の古典的な例です。基本的な概念は、アクションが実行されると (たとえば、ボタンをクリックしてコンテンツを表示する)、一部の JavaScript が PHP を (非同期的に) 呼び出し、PHP が実行され、 XML ファイル (これは実際には任意のファイル形式にすることができますが、解析が容易なため、JSON を使用することを好む人もいます)、この XML / JSON の内容は JavaScript を使用して表示されます。

上記の例ではコンテンツを表示していますが、サーバー上で実行する必要があるアクション (データベースへのデータの挿入など) を非同期で実行できない理由はありません。

SO は、人々のためにコードを書くための場所ではありません。そのため、どこから始めればよいかについてのヒントを提供しました。また、読者 ( / 質問者!) の演習として、いくつかの AJAX チュートリアルを見てください。コンセプトを理解し、コードを書いて、それでも動かない場合は戻ってきてください!

幸運を ：）

于 2013-03-24T23:32:33.473 に答える