Javascriptで複数のデータをFORMから送信したい

前提

Javascriptで複数のデータをFORMから送信したいです。teratail既出の類似の問題でしたが、それを試してみても上手く動きません。PHPには自信がありますが、Javascriptにはほとんと知見がありません。おそらくJavascriptの記述がおかしいのだと思いますが、自己解決できません。

実現したいこと

HTMLのFORM要素のPOSTデータを複数Ajaxで送信したいです。PHP側で$_POST["message"]と$_POST["user"]を受けとりたいです。

発生している問題・エラーメッセージ

POSTデータがひとつ目の$_POST["message"]しか送信できません。

該当のソースコード

PHP

echo ' <form method="post" onsubmit="writeMessage(); return false;"> <input id="message" name="message" type="text" value="" /> <input id="user" name="user" type="text" value="'.$name.'" /> <input type="button" value="送信" onclick="writeMessage()"> </form> <div id="messageTextBox"></div> ';

Javascript

var dat = { message : $('#message').val() ,user : $('#user').val() }; $.ajax({ type: 'post', url: './main.php', data: dat }) .then( function (data) { readMessage(); }, function () { alert("書き込み失敗"); } );

試したこと

datをひとつにまとめるのではなく、２つに分けたものを合体させてみましたが、ひとつ目のものしか送信できません。

補足情報（FW/ツールのバージョンなど）

PHP7.2