調べても意外とやり方なかったので、簡単なサンプルコードを書きます。
参考に是非。
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>参考になれば嬉しいです。
ではまた。