how to execute PHP inside a jQuery function

Question

I try to get some data from my database using PHP to insert it on a jQuery code after a submitting. I didn't get the result. I know that PHP runs on the server side and JS on the client side.

I try the use load method but I didn't get any result after generating some fields with jQuery. I should get some data in the select tag from my database, however, after clicking on the add (button) fields are generated dynamically without the results from the database.

$(document).ready(function() {
  var i = 1;

  $('#add').click(function() {
    i++;
    $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /><td><input type="text" name="prenom[]" placeholder="Enter your prenom" class="form-control name_list" /></td></td><td><input type="text" name="cin[]" placeholder="Enter your cin" class="form-control name_list" /></td><td><input type="number" name="cnss[]" placeholder="Enter your cnss" class="form-control name_list" /></td><td><input type="email" name="email[]" placeholder="Enter your email" class="form-control name_list"/></td><td><select name="theme[]" class="form-control select_list" >
        <?php       
        while ($tab = mysqli_fetch_assoc($exe)) {
          echo "<option>{$tab['libelle']}</option>";
        } ?></select></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove"> X </button></td></tr>');
  });
});
$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
  $('#row' + button_id + '').remove();
});

<button id="add">Add</button>
<div id="dynamic_field"></div>

be precise. It is not very clear that exactly issue you want to discuss here. Looks like your html page is not updating after the data you get. Welcome to web dev, 1000 ways to do that. — afr0, May 20 '19 at 02:32
You can try ajax to load the table you need, or use the template engine smary to achieve — colin, May 20 '19 at 02:55
AJAX will do it for you, checkout the answers of the question. https://stackoverflow.com/questions/5298401/basic-php-and-ajax — Murad Hasan, May 20 '19 at 03:13

score 0 · Accepted Answer · answered May 20 '19 at 03:41

You need to use ajax to execute php and sql query properly. To use ajax you need to create another php scripts and create function on your situation it should be like this.

$row = $_POST['row'];
$html =  "<tr id='row" .$row ."'><td>";
$html .=  "<input type='text' name='name[]' placeholder='Enter your Name' class='form-control name_list' /><td>";
$html .=  "<input type='text' name='prenom[]' placeholder='Enter your prenom' class='form-control name_list' /></td>";
$html .=  "</td><td><input type='text' name='cin[]' placeholder='Enter your cin' class='form-control name_list' /></td>";
$html .=  "<td><input type='number' name='cnss[]' placeholder='Enter your cnss' class='form-control name_list' /></td>";
$html .=  "<td><input type='email' name='email[]' placeholder='Enter your email' class='form-control name_list' /></td>";
$html .=  "<td><select name='theme[]' class='form-control select_list'>";

     WHILE($tab=mysqli_fetch_assoc($exe)){
    $html .=  "<option>{$tab['libelle']}</option>";
     }  
$html .=  "</select></td><td><button type='button' name='remove' id='row$row' class='btn btn-danger btn_remove'>X</button></td></tr>";
echo json_encode(array("success"=>$html));

And after you need to create ajax function on your html scripts or java script It should be like this.

$(document).ready(function(){
        var i=1;

        $('#add').click(function(){
            i++;
            $.ajax({  
                url:"newCreatedScript.php",   
                type: "POST",
                data: {row:i},
                success:function(data){
                    var $response = $.parseJSON(data);
                    $('#dynamic_field').append(data.success);
                }
            });

        });

        $(document).on('click', '.btn_remove', function(){
            var button_id = $(this).attr("id"); 
            $('#row'+button_id+'').remove();
        });
    });

how to execute PHP inside a jQuery function

1 Answers1