Ajax call to fill HTML table

JAX (Asynchronous JavaScript and XML) is the art of exchanging data with a server, and updating parts of a web page – without reloading the whole page.

Our earlier blog post already explained about form submission without page refresh, but it was done by using ajax, PHP and jQuery.

Now you will learn same functionality using ajax, PHP and Javascript through this blog post . Just follow our post or download it to use.

For this you must have a database in MY-SQL . Here, we have database named “mydba” which consists of table named “form_element” with 5 fields.

next we create a php page named “ajaxsubmit.php” where following steps were performed:

We first establish connection with server . Selects database. Executes query. Closing connection with server. Multi vendor marketplace platform

Here some of suggests for you :

Using jquery for triggering select tag, ex

$(document).on('change', '#cup', function(){
    // variable from select can be retrive using this.value
});

Create some function for retrieving data you want to collect, this function will be called by ajax in jquery function above.
For reminder, you can create function in Controller, and make route in routes/web.php or routes/api.php, it's up to you for this route you want to use POST or GET.
In function Controller, for result you can use this as example,

return Response::json(array('data' => $your_variable_output));

create ajax function using jquery, like this example,

$.ajax({
   url: "your_url_for_getting_data",
   method: "post/get",
   data: "optional for post methode",
   success: function(data){
    // data is variable result from url,
    // for debug purpose, use console.log for knowing result structure
    // to generate table create variable for necessary tag
    var resulttag = "";
     resulttag += "<tr><td>result</td></tr>";
    // use $.each(data.data, function(datas){}); to looping result per row and show in tag td or tr using 
    // variable resulttag
    
   // then finally
   $("#table tbody").append(resulttag);
   },
   error: function(e){
     console.log(e);
   }
});

This is not exact example for your question, but learn by your self how to do.

Moderators