Javascriptを用いてポスト送信をしたい。

Question

プログラミング初学者です。
お力添えをいただければ幸いです。

現在、MVC形式でのPHP及びJavascriptを用いた
基礎的なプログラミングを練習で書いています。

流れとしまして、
"最初に名前を入力し、ボタンに応じた挨拶をする" というものです。

今回やりたいことは、

<form>タグ内で　<input type="submit" ~> を使わず、 buttonで (Jacascriptで) 画面遷移をさせたいです。

<script>   
    function sample() {
        document.getElementById("flag").value = "1"; //hiddenで渡すflagをここで変えて、Controller側で遷移先を変えてます。
        //Postで送る処理をここに書きたい
    }
    function sample2() {
        document.getElementById("flag").value = "2";
        //Postで送る処理をここに書きたい
    }
</script>

<form action="nameController.php" method="post" name="nameform">
    名前:<input type="text" name="namae" value="<?= $_POST["namae"]; ?>"><br>
    <input type="hidden" name="flag" id="flag" value="">

    <input type="button" onclick="sample();" value="朝">　//～さん、おはよう
    <input type="button" onclick="sample2();" value="昼"><br> //～さん、こんにちは
</form>

button でなく submit にすれば問題なく動きます。

調べてみて、
submit() や XMLHttpRequest() や fetch() 等
自分なりに書いてみましたが、付け焼刃では歯が立たず困っております。

間違った使い方をしている部分もあるかもしれませんが、
今回の場合、どの方法を用いるのが適切なのか ご指導いただければ幸いです。

Answer 1

buttonのdom.closest('form').submit()

すればいいでしょう
formのエレメントはformプロパティに自分のformを持つので

buttonのdom.form.submit()

でもいけそうですね

Comments

[yambejp]

> submit() や XMLHttpRequest() や fetch() 等

XMLHttpRequest() や fetch()はページ遷移させないための
機能なので今回は関係ないと思います

[yambejp]

たとえば

<input type="button" onclick="sample(this.form);" value="朝">
として

function sample(f) {
document.getElementById("flag").value = "1";
f.submit();
}

としてもよいかも

[nnn_kkk]

細かく書いていただきありがとうございます。
おかげで無事解決することができました。

まだ理解はできていないので、噛み砕いていき
自分のものにできるように頑張ります。ありがとうございました。