如何使用Javascript在PHP中插入新字段並執行while循環

Question

我有一個表單，可以選擇單擊按鈕添加另一行。 此新行將具有選擇列表作為其輸入類型。 選擇列表需要處理從頁面加載時檢索到的數據庫中的信息。

通過添加按鈕創建新選擇列表后，如何對數據庫中的數據執行while循環。

這是我到目前為止的代碼。

PHP：

echo "<div id=\"FieldGroup\">";

    echo "<select name=\"add_project_service_1\" class=\"project_details_service\" value=\"\" required >";
        while($result->fetch())
        {
            echo "<option value=\"".$item_number."\">".$item_number." - ".$description."</option>";
        }
    echo "</select>&nbsp;";

    echo "<label>Quantity: </label><input type=\"text\" name=\"add_project_quantity_1\" class=\"project_details_quantity\" placeholder=\"Quantity\" value=\"\" />&nbsp;";
    echo "<label>Value: </label><input type=\"text\" name=\"add_project_value\" class=\"project_details_value\" placeholder=\"Value\" value=\"\" /><br>";

echo "</div>";
echo "<input type=\"button\" value=\"Add Button\" id=\"addField\"><input type=\"button\" value=\"Remove Button\" id=\"removeField\">";

Javascript：

<script>

$(document).ready(function() {

var counter = 2;

$("#addField").click(function () {
if(counter>50){
        alert("Only 50 extra fields allowed.");
        return false;
}   
var newFieldDiv = $(document.createElement('div'))
     .attr("id", 'FieldDiv' + counter);

newFieldDiv.after().html('<select name="add_project_service_' + counter + '" class="project_details_service" value="" required >' + 
'while($result->fetch())
     {
         echo "<option value=\"".$item_number."\">".$item_number." - ".$description."</option>";
     }</select>&nbsp;' + 
'<label>Quantity: </label><input type=\"text\" name=\"add_project_quantity_' + counter + '\" class=\"project_details_quantity\" placeholder=\"Quantity\" value=\"".$quantity."\" />&nbsp;' + 
'<label>Value: </label><input type=\"text\" name=\"add_project_value_' + counter + '\" class=\"project_details_value\" placeholder=\"Value\" value=\"".$value."\" /><br>');

newFieldDiv.appendTo("#FieldGroup");

counter++;

 });

 $("#removeField").click(function () {
if(counter==2){
      alert("No more fields to remove.");
      return false;
   }   

counter--;

    $("#FieldDiv" + counter).remove();
 });
});
</script>

將while循環插入javascript不起作用。

如何完成此操作，以便在添加字段時列出選項並填充字段？

Answer 1

javascript是在客戶端執行的，而php是在服務器端執行的。

將頁面發送到客戶端后，無需重新加載新頁面即可編輯頁面的唯一方法是使用javascript和ajax調用（xmlhttprequest）。 客戶端不使用php，也不從服務器下載php頁面。

您可以使用jQuery對頁面進行ajax調用

$.ajax{
  url: "mypage.php",
  type: "GET",
  dataType: "jsonp",
  success: function( myObject ) {
    console.dir( myObject );
  }
}

// mypage.php
header('Content-type: application/json');
echo json_encode( $myObject ); 
// for you it will be
echo json_encode( $result->fetch() );