【html】inputのhidden属性が、毎回同じ値を出す？【218日目】

こんなコードがあったそうです。

<form>
    <input type="hidden" name="fruits" value="apple">
    <button type="submit" value="送信">

    <input type="hidden" name="fruits" value="orange">
    <button type="submit" value="送信">

    <input type="hidden" name="fruits" value="grape">
    <button type="submit" value="送信">
</form>

これで、どのボタンを押してもfruits=grapeしか帰ってこない！なぜだ！！！

inputのhiddenは必ず送る

今、formタグには、hiddenが3つ、submitが3つあります。

この時、ボタンは押したものだけのデータが送られますが、
hiddenは3つとも送ります。

すると、上から順に

fruits=apple
fruits=orange
fruits=grape

を代入していきます。

すると、最後に入れたfruitsの代入だけが残り、
fruits=grapeのデータだけが送られます。

どうすればいいか

いくつか方法がありますが、今回のようなボタンを選ぶ形式で、かつhiddenを使うのであれば、

<form>
    <input type="hidden" name="fruits" value="apple">
    <button type="submit" value="送信">
</form>
<form>
    <input type="hidden" name="fruits" value="orange">
    <button type="submit" value="送信">
</form>
<form>
    <input type="hidden" name="fruits" value="grape">
    <button type="submit" value="送信">
</form>

これで、押したところのhiddenだけが送れます。