Question

I got confused at some point in my project.
The thing I am trying to make here is as following:

Get data from the database
Create a new select box with the button – create
Populate this select box with values from the database
Option to delete that select box through the button – delete

The code I have so far PHP/HTML:

   <button type="button" name="add" onclick="return false;" id="addField" class="nice_button">Добавить(ADD)</button>


   <button type="button" name="remove" onclick="return false;" id="remove" class="nice_button">Удалить(DELETE)</button>


 <tbody id="documentFields">
 <tr>
    <td>
        <select size="1" name="hardware[]" style='width:400px;'>
        <option value=""></option>
        <?php   while($hardware = $get_hardware->fetch_array()){
          echo "<option  value='".$hardware['st_id']."'>".$hardware['st_name']." ".$hardware['st_producer']." ".$hardware['st_model']."</option>";
        }
        ?>
        </select>
    </td>
</tr>
</tbody>

JS script I have so far looks like that:

var g = 1;
var id = [ <? php echo $js_id; ?> ];
$(document).ready(function Product_add() {
    $("#addField").click(function () {
        $("#documentFields").append('<tr id="fieldset_p' + g + '"><td><select size="1" name="hardware[]" style="width:400px;"><option value=""></option></select></td></tr>');
        g++;
    });
});
$(document).ready(function Product_add() {
    $('#remove').click(function () { // similar to the previous, when you click remove link
        if (g > 1) { // if you have at least 1 input on the form
            g--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
            $('#fieldset_p' + g + '').remove(); //remove the last fieldset  
        }
    });
});

The thing is that I cannot append php function: while, so I cannot populate this select box as the one before.

Answer 1

In this case you could use Ajax.

What’s ajax:

http://en.wikipedia.org/wiki/Ajax_(programming)

It’s providing a page with just your information in a specific format. Then call it with your javascript and then parse it into the page.

Documentation how to do this in jquery:

http://api.jquery.com/jQuery.ajax/

---

Update:

Code example:

$.get('ajax/test.html', function(data) {

    // read in data = = [{'option':'option 1'},{'option':'option 2'}]

      $.each(data, function(index, itemData) {
       /// do stuff
         $('<option>' + itemData.option + '</option>').appendTo('#myselectbox');
      });

});