the form refresh the page after the second submit

I’m having trouble with the send message form, but the issue is strange since when I initially submitted it, the page didn’t refresh; yet, when I submitted it again, the form refreshed and the sent data was added to the url as a querystring.

Form

 <form id="form">
                    @csrf
                    <input type="text" id="inputMessage" class="w-full bg-gray-300 p-4 outline-none border border-t-2 focus:bg-white">
                    <input type="text" id="touserId" name="touserId" value="{{$user->user_id}}" hidden>
                    <input type="text" hidden id="room-id" name="roomid" value="{{$room_id}}">
                    <button type="submit" id="submit-button" class="absolute left-0 ml-3 mt-3 bg-blue-400 text-white rounded-full text-center w-10 h-10"><i class="fa-solid fa-paper-plane mt-2 mr-1"></i></button>
                </form>

javascript

    let form = document.getElementById('form');

form.addEventListener('submit',function(event){
    event.preventDefault();
    const userInput = inputMessage.value;
    

        $.ajax({
            method: "POST",
            url: "/send",
            data: {
            message: userInput,
            roomid:roomId,
            touserId:toUserId,
            _token: token
            },
        });
      
        let message = {
            id:{{auth()->id()}},
            name:"{{auth()->user()->display_name}}",
            message:userInput
        };
        create_message(message)

        inputMessage.value="";
       
})