CODEWITHSUNDEEP
javascriptphpjqueryhtml
Dragonsnap
Dragonsnap

Reputation: 953

How to reflect changes of PHP variable in JQuery / HTML

I have a $return in php that changes according to what was posted on the form. Here's the JQuery & HTML Code:

$(function() {
           $('#query_sort').on('change', function(event) {
               var query_sort = $(this).val();
               alert(query_sort);

               if(query_sort) {
                   $.ajax({
                       method: "POST",
                       url: "/_php/nds/return_criteria_checkbox.php",
                       data: {query_sort: query_sort}
                   })
                       .done(function(data){
                           alert(<?php echo $query; ?>);
                           $('#dashboard_table_tbody').html(<?php echo $return; ?>);
                   });
               }
            });
        });

And for my tbody, 

<tbody id = "dashboard_table_tbody" style = "height: 10px;">
    <?php echo $return; ?>
</tbody>

Even when I change my form, which gets auto-submitted when it is changed (without refreshing the webpage) the $return changes too, but the HTML page doesn't reflect that change. What Can I do to have it update?

Upvotes: 0

Views: 348

Answers (2)

Shubham Developer
Shubham Developer

Reputation: 91

You will need to return data in json form from the URL you are posting data through Ajax and slight changes in JQuery function as the way I have done below and you are set to go. Below Lines of code is for taking input from Html and submitting it without refreshing the page with the help of JQuery and Ajax. We will also need to create a php file called 'return_criteria_checkbox.php' and sending back JSON data to this page.

<input type="text" id="query_sort">
<p id="dashboard_table_tbody" style="height: 10px;"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#query_sort').change(function(event) {
    var query_sort = $(this).val();
    // alert(query_sort);
    if(query_sort) 
    {
        $.ajax({
            type: "POST",
            url: "return_criteria_checkbox.php",
            data: {query_sort: query_sort},
            cache: false,
            success: function(data)
                {
                    var replaced_Data = data.replace(/\"/g, "");
                    $('#dashboard_table_tbody').html(replaced_Data);
                    $('#query_sort').val('');
                }
            });
    }
});

Below are the lines of code for return_criteria_checkbox.php file:

<?php
// Fetching Values From Ajax URL
$posted_data = $_POST['query_sort'];
echo json_encode($posted_data);
// You can also insert data to database using below lines of code
// $connection = mysql_connect("localhost", "root", "");
// $db = mysql_select_db("mydba", $connection);
// if (isset($_POST['name1'])) {
// $query = mysql_query("insert into form_element(posted_data) values('$posted_data')"); //Insert Query
// echo "Form Submitted succesfully";
// }
// mysql_close($connection); // Connection Closed
?>

Use the Above code and you are good to go.

Upvotes: 0

Giacomo M
Giacomo M

Reputation: 4711

You are confusing client-side and server-side technologies.
PHP is a server side language, JS is (also) a client-side language.

To do what you need you have to use javascript.
Your return_criteria_checkbox.php file should return something like that:

return_criteria_checkbox.php

echo json_encode(['return_from_php' => 'something you want to return']);

You HTML file becomes:

$(function() {
       $('#query_sort').on('change', function(event) {
           var query_sort = $(this).val();
           alert(query_sort);

           if(query_sort) {
               $.ajax({
                   method: "POST",
                   url: "/_php/nds/return_criteria_checkbox.php",
                   data: {query_sort: query_sort}
               })
                   .done(function(data){
                       $('#dashboard_table_tbody').html(data.return_from_php);
               });
           }
        });
    });

Upvotes: 1

Related Questions