How to use Javascript to insert new field in PHP and perform while loop

Question

I have a form with the option to add another row at the click of a button. This new row will have a select list as it's input type. The select list needs to process information from a database that was retrieved on page load.

How can I have the new select list perform a while loop on the data from the database once it is created via the add button.

Here is the code I have so far.

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>

Inserting the while loop into the javascript doesn't work.

How can this be accomplished so when I add a field the options are listed and fields are populated?

Answer 1

javascript is exectued on client side while php interpreted on the server side.

Once you've send the page to the client, the only way to edit the page without reloading a new one is with javascript and ajax call (xmlhttprequest). The client doesn't use php neither download php page from the server.

You could do an ajax call to your page with jquery

$.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() );