PHPで受け取った内容をJSのinnerhtmlで表示したい

Question

タイトルの通りなのですが、実装方法がわかりません。

        <form id="magazine" method="post" action="send.php">　//send.phpはデータの受け取り＆チェック＆メール送信処理
            <div>
                <div id="inner">
                    <input type="text" name="name" placeholder="お名前" required/><br />
                    <input  type="email" name="email" placeholder="メールアドレス" required/><br />
                    <input id="submit" type="submit" value ="送信" onclick=submit()>
                </div>
            </div>
        </form>    

上記のフォームに入力された内容をチェックし、「送信完了」の文字を

<div ="inner"></div>

の部分に差し替えたいです。
ページ変遷にしないのは、このフォームはモーダルウィンドウのため、送信完了までをモーダルウィンドウの中で済ませたいからです。

function submit() {
    var elem = document.getElementById("#inner");
    elem.innerHTML = "送信完了";
}

上記JSでは動かず、send.phpの空白のページに変遷してしまいました。

以上について、ご教示いただけますと幸いです。

Answer 1

ページ変遷にしないのは、このフォームはモーダルウィンドウのため、送信完了までをモーダルウィンドウの中で済ませたいからです。

となれば、デフォルトの<form>送信は使わずに、自力でAjax送信する必要があります。<form>をそのままsubmitするのは、ページ遷移専用です。

Comments

[begginer_class]

Ajax送信ですね、、お恥ずかしながら初耳ですので、そちらについて調べてみます。

Answer 2

submit動作はページ移動を伴います。ページを書き換えず（移動せず）送信だけしたいなら、Ajaxなど非同期で処理する必要があります。

Comments

[begginer_class]

ありがとうございます。Ajaxというものがあることを前の回答者様に教えていただきました。
Ajaxについて勉強するところから始めたいと思います。