Getting data using jQuery AJAX without reloading the page in php

Question

I try to stop the refresh page when I click on the selection option, but when I stop refreshing the page, the data cannot receive.

here is the 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 the page stops to refresh but not change the data.

Answer 1

Change nameto idin 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

, , (AJAX) , .

. - -

• . "seldrp" .

• AJAX, submit() .

• AJAX , :

  $.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);
  
      }
  });
  

, : : 1. JQUERY 2. , AJAX . -

<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>";
?>

Hide result