如何使用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() );