Запуск скрипта при выборе значения из выпадающего списка PHP JS

Как сделать чтоб при выборе из выпадающего списка исполнялся определеный PHP скрипт и результат отображался на этой же странице без ее перезагрузки?

<body>
  <div class="container mt-4">
    <h1>KOLICHESTVO</h1>
    <form action="a.php" method="post">
      <select id="templateId" name="templateId" onchange="refreshJournal()" >
        <option value=""></option>
        <option value="aa">aa</option>
        <?php include 'a.php';?>
      </select>
      <script

type="text/javascript" src="jquery-3.5.1.min.js"

      function refreshJournal() {
      var form = document.orders;
      var dataString = $(form).serialize();

    $.ajax({
            type : "POST",
            url: "a.php",
            cache: false,
            data: dataString,
            success: function(html){
              $("#divider").html(html);
            }
          });
          return false;
  };>

  </script>
 </form>
 </body>
 <div class="container mt-4">
    <h1>KOLICHESTVO</h1>
    <form action="a.php" method="post">
      <button>ddd</button>
 </form>
 </body>

Ответы (1 шт):

Автор решения: jooke

Вы уж если используете ajax, то используйте его правильно..судя по всему вы хотите сделать что то подобное.. Детально не разбирал, просто привел более менее читабельному виду

    <body>
      <div class="container mt-4">
        <h1>KOLICHESTVO</h1>
          <select id="templateId" name="templateId">
            <option value="1">1</option>
            <option value="2">2</option>
          </select>
       </div>   
        
    
    
    
     <script  src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
    var v;
    $('#templateId').on('change', function() {
v = this.value;
        refreshJournal(v);
        
        // console.log(v)
    });
    
    function refreshJournal(v) {
        var form = document.orders;
    
        $.ajax({
            url: 'path_to_ur_script',
            method: 'post',
            dataType: 'json',
            data: {
                'value':v
            },
            success: function(html){
                $("#divider").html(html);
                }
            });
        return false;
    }
    
    </script>
     </body>
→ Ссылка