JavaScriptを使って複数のbuttonで違う値を送信する

2020年5月3日2021年1月24日

調べても意外とやり方なかったので、簡単なサンプルコードを書きます。
参考に是非。

html側

<body>の中に書いてください

<body>
　<form name="fruit" action="#" method="post">
　<div>
　　<input type="button" onclick='selectFruit("apple")' value="りんご" />
　</div>
　<div>
　　<input type="button" onclick='selectFruit("banana")' value="ばなな" />
　</div>
　<div>
　　<input type="button" onclick='selectFruit("grapes")' value="ぶどう" />
　</div>
　<input type="hidden" name="action" value=""/>
　</form>
</body>

・「りんご」押下→「apple」送信
・「ばなな」押下→「banana」送信
・「ぶどう」押下→「grapes」送信

script側

次はscript側を<head>の中に書きます。

<script type="text/javascript">
　function selectFruit(selectFruit) {
　　var fluit = document.getElementsByName('action');
　　fluit[0].value = selectFruit;
　　alert(fluit[0].value)
　　document.fruit.submit();
　}
</script>

html側にある「onclick」でscript側にある「selectFruit()」関数を呼びます。

()に送りたい値を入れればscript側に引き継がれ、最後の行「document.fruit.submit();」でデータをsubmit送信することができます。

alertはどんな値が入っているのか確認するためだけに入れています。

formのactionとnameはそれぞれの環境によって変えてください。

全体コード

<!DOCTYPE html>
<html>
　<head>
　　<meta charset="UTF-8">
　　<title>ボタンたち</title>
　　<script type="text/javascript">
　　　function selectFruit(selectFruit) {
　　　　var fluit = document.getElementsByName('action');
　　　　fluit[0].value = selectFruit;
　　　　alert(fluit[0].value)
　　　　document.fruit.submit();
　　　}
　　</script>
　</head>
　<body>
　　<form name="fruit" action="Servlet" method="post">
　　<div>
　　　<input type="button" onclick='selectFruit("apple")' value="りんご" />
　　</div>
　　<div>
　　　<input type="button" onclick='selectFruit("banana")' value="ばなな" />
　　</div>
　　<div>
　　　<input type="button" onclick='selectFruit("grapes")' value="ぶどう" />
　　</div>
　　<input type="hidden" name="action" value=""/>
　　</form>
　</body>
</html>

参考になれば嬉しいです。

ではまた。