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

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

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>

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

ではまた。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次