Retrieving Data with jQuery AJAX Without Reloading Page in php

Question

I have try to stop refresh page on click on select option but when I stop refresh page then data can not get.

here code

echo "<form name='frmtopdevotees' method='post' action='topuser_load.php'>
                <h4>select month  <select id='seldrp' name='themonth' OnChange ='document.frmtopdevotees.submit()'>     


                        $optionsmonths
                </select> 
                <select name='topdevotees' id='seldrp' OnChange ='document.frmtopdevotees.submit()'>
                        <option value=10 $M10>Top 10</option>
                        <option value=20 $M20>Top 20</option>
                        <option value=50 $M50>Top 50</option>
                        <option value=100 $M100>Top 100</option>
                </select>   </h4>               
        </form>";
?>

<script>
    $('frmtopdevotees').submit(function (e) {
        e.preventDefault();
        return false;
    });

    $('themonth').onchange(function () {
        $.ajax({
            var value = $('themonth').val();
                    type: 'post',
            data: {
                topdevotees: topdevotees,
                themonth: themonth
            },
            url: "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth,
            success: function (response) {
                $('themonth').append(response);

            }
        });
    });

</script>

when I remove Onchange = 'document.frmtopdevotees.submit()' then page stop to refresh but not data change.

Answer 1

Change name to id in ajax,

$('#seldrp').onchange(function(){
   ^     ^
// ajax here                          
});

And you have syntax errors in ajax.

   var themonth = $('#seldrp').val();
   var topdevotee = $('#topdevotees').val();//topdevotess should be the id of 2nd select box.
   $.ajax({            
        type: 'post',
        data: {
            topdevotees: topdevotees,
            themonth: themonth
        },
        async:false,// this line for waiting for the ajax response.
        url: "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth,
        success: function (response) {
            $('themonth').append(response);
            $('#frmtopdevotees').submit();

        }
    });

Answer 2

From your code what I can understand is you want to trigger a server call without refreshing the page (AJAX) whenever your any one the select option changes.

There are errors in the code posted. Following is my observation -

1. There can be only one ID in entire page. You have used 'seldrp' in couple of places.

2. If you want the AJAX functionality, you should avoid calling submit() function of the form.

3. The AJAX syntax is wrong which should be as follows -

    $.ajax({ url : "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth, method: "post", data: { topdevotees: topdevotees, themonth: themonth }, // can even put this in variable and JSON stringify it success: function (response) { $('themonth').append(response); } }); 

Now coming to the solution part of it: I would do this as follows - 1. Will just listen on the select change in JQUERY 2. Once a select change is triggered, AJAX call is made and which returns the response. The modified code is -

 <script> $('select').on('change', function (e) { var month = $('#seldrp1').val(); var topdevotee = $('#seldrp2').val(); // call ajax here - $.ajax({ url: "topuser_load.php?topdevotees=" + topdevotee + "&themonth=" + month, method: "post", data : JSON.stringify({ topdevotees: topdevotee, themonth: month }), success : function(response){ $('themonth').append(response); }, error : function(err){ // handle error here } }); }); </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> echo "<form name='frmtopdevotees'> <h4>select month <select id='seldrp1' name='themonth'> $optionsmonths </select> <select name='topdevotees' id='seldrp2'> <option value=10 $M10>Top 10</option> <option value=20 $M20>Top 20</option> <option value=50 $M50>Top 50</option> <option value=100 $M100>Top 100</option> </select> </h4> </form>"; ?>