消息发送表单二次提交后页面刷新并拼接URL参数问题

首次提交表单时页面未刷新，二次提交时页面刷新，且发送的数据以查询字符串形式拼接在URL中，示例URL如下：
http://unified-animal-shelter.test/chat/52?_token=idIOk5Dq1U5MVulDeGgQSztefVWmTHZlTjtCFkaq&message=helloworld&touserId=52&roomid=2

经调试确认问题出在HTML部分，已移除JavaScript，现将正常工作的旧HTML代码与引发问题的新UI代码附在下方：

正常工作的旧HTML代码 #

<div class="messages-chat" id="container-message">
        @foreach ($messages as $message)
        
        @if ($message->from->user_id == Auth::id())
       
                
                <div class="message text-only">
                    <div class="response">
                        <p class="text">{{$message->message}}</p>
                        
                    </div>
                </div>
                <p class="time my_time">{{$message->created_at->format('h:i:s A')}} </p>
                @else
                <div class="message">
                    <div class="photo" style="background-image: url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);">
                        <div class="online"></div>
                    </div>
                    <p class="text">{{$message->message}} </p>
                </div>
                    <p class="time">{{$message->created_at->format('h:i:s A')}}</p>
                @endif
            @endforeach
            
            
            
        </div>
       
           
        <div class="bottom-0 w-full" dir="rtl">
            <form class="w-100 bg-red-500" id="form">
                @csrf
                <input type="text" class="write-message" name="message" id="inputMessage" placeholder="Type your message here">
                <input type="text" id="touserId" name="touserId" value="{{$user->user_id}}" hidden>
                <input type="text" hidden id="room-id" name="roomid" value="{{$room_id}}">
                <input type="submit" class="w-full h-full bg-red-500">
            </form>
        </div>

引发问题的新UI代码 #

<div class="bg-white flex items-center">
        <div class="flex-col overflow-y-auto h-700">
    
            <div class="flex bg-primary p-4">
                <div class="bg-white rounded-l-lg p-3 flex flex-col justify-between relative">
                    <img src="https://api.dicebear.com/5.x/identicon/svg?seed={{rand()}}" class="w-16" alt="avatar">
                    <p class="bg-white absolute bottom-0">27/2/2002</p>
                </div>
                <div class="flex flex-col justify-center items-center bg-white p-4 space-y-4">
                    <h1 class="text-2xl">Abdulaziz</h1>
                    <p id="last-message">السلام عليكم القط هذا فيه امراض شي ؟</p>
                </div>
            </div>
        </div>
        
    
    @if ($selectedUser)
        
    
        <div class="w-full h-700 relative">
            <div class="text-center flex items-center text-3xl p-3 bg-primary">
                <img src="https://api.dicebear.com/5.x/identicon/svg?seed={{rand()}}" class="w-16 bg-white rounded" alt="">
                <h1 class="w-full text-white">{{$user->display_name}}</h1>
                <button class="text-red-500 bg-white p-3 rounded">بلغ</button>
                
            </div>
            <div class="h-600 overflow-y-auto pb-10" id="container-message">
                @foreach ($messages as $message)
                    
                @if ($message->from->user_id == auth()->id())
                <div dir="rtl" class="p-8">
                    <p class="bg-blue-200 w-60 text-center p-3 rounded break-words">{{$message->message}}</p>
                </div>
               @else
               <div dir="ltr" class="p-8">
                    <p class="bg-gray-300 w-60 text-center p-3 rounded break-words">{{$message->message}}</p>
                </div>
                @endif {{--$message->from->user_id if --}}
                @endforeach
                
                
                
                <div class="absolute bottom-0 w-full" dir="rtl">
                    <form id="form">
                        @csrf
                        <input type="text" placeholder="محتوى الرسالة" id="inputMessage" name="message" 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>
                </div>
            </div>
    
        </div>
        @endif {{--Selected User if --}}
       </div>

内容的提问来源于stack exchange，提问作者Aziz