formでボタンを押したらその値を送信しつつ即画面遷移

formって、textとかcheckboxで入力した値を「送信」ボタンを押したら送信しながら画面遷移…という感じが多いと思うんですが、そうではなくボタン自体に値を持たせておき、それをクリックしたらその値を送信しながら即画面遷移したい場合もあると思います。

実装

実装には、

の２パターンでいけます。「りんご」「みかん」「ブドウ」の３つのボタンをクリックする想定でやってみましょう。

buttonを使う

buttonにはnameもvalueも使えるので、シンプルに書けます。

<form>
  <button name="fruit" value="りんご" type="submit">りんご</button>
  <button name="fruit" value="みかん" type="submit">みかん</button>
  <button name="fruit" value="ブドウ" type="submit">ブドウ</button>
</form>

type=”submit”を持たせておけば、formを動かすボタンとなります。これだけで、値を送信できます。

checkbox or radioを使う

だいたいbuttonでいいんですが、checkboxやradioを使わなければいけない場合もあるでしょう。

そんなときはjsで補助してやらなければいけないのですが、onClickを使えばわざわざ別途jsを書く必要もありません。

<form name="fruitSelect">
  <label onClick="document.fruitSelect.submit();">
    <input type="checkbox" name="fruit" value="りんご">りんご
  </label>
  <label onClick="document.fruitSelect.submit();">
    <input type="checkbox" name="fruit" value="みかん">みかん
  </label>
  <label onClick="document.fruitSelect.submit();">
    <input type="checkbox" name="fruit" value="ブドウ">ブドウ
  </label>
</form>

ポイントは２つ。

こうすることで、checkboxをクリックしたときにformが動き、同時にvalueを送信することができます。

radioも同じ要領でできると思います。

現場からは以上です。