Как я могу отправить форму onchange без обновления страницы после выбора из выпадающего списка?

Question

Моя страница продолжает обновляться, когда я выбираю элемент из списка. Я новичок в Ajax и все еще учусь на нем. Вот мой код, я хочу сделать Ajax-код для этого.

<form id="myform" action="home_log.php" method="post">
    <label1>Room Type:*</label1> 
    <select name="roomtype" onchange="this.form.submit();"> 
        <option value="Standard Room A">Standard Room A</option>
        <option value="Standard Room B">Standard Room B</option>
        <option value="Deluxe Room">Deluxe Room</option>
    </select>
</form><br>
<label1>Room Number:*</label1>
<div id="form_output">
<?php
    $roomtype = isset($_POST['roomtype']) ? $_POST['roomtype'] : '';
    echo "<select>";
    include_once 'includes/dbh-inc.php';
    $result = $conn->query("select RoomName from tblroom_sample where RoomType='".$roomtype."'");
    while ($row = $result->fetch_assoc()) {

          unset($roomtype);
          $RoomName = $row['RoomName']; 
          echo '<option value="'.$RoomName.'">'.$RoomName.'</option>';
    }
    echo "</select>";
?>
</div>

Ajax:

$(document).ready(function () {
        $('#myform').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url : $(this).attr('action') || window.location.pathname,
                type: "GET",
                data: $(this).serialize(),
                success: function (data) {
                    $("#form_output").html(data);
                },
                error: function (jXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        });
    });