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

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




実装

実装には、

・buttonを使う
・checkbox or radioを使う

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

buttonを使う

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

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

checkbox or radioを使う

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

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

ポイントは2つ。

1.<form>にname属性を持たせる。
2.ボタンをlabelで囲み、onClick=”document.{formのname}.submit();”をつける。

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

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

現場からは以上です。

シェアしてくだちい

フォローしてくだちい