从下拉列表中选择后，如何在不刷新页面的情况下进行onchange表单提交？

Question

My page keeps refreshing when I select an item from a listbox. I'm new to Ajax and still learning from it. Here's my code I want to make Ajax code for this one.

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