最終更新日 2009年1月19日 up top

<a href タグで値を送信したい

ラジオボタンをクリックしたときに、フォームを送信するJavaScriptのページがあった。

1 2 3
<form action="" method="get"> <input type="hidden" name="view_mode" value=""> <input type="radio" name="page" value=1 onclick="submit();">1 <input type="radio" name="page" value=2 onclick="submit();">2 <input type="radio" name="page" value=3 onclick="submit();">3 </form>

ページ切り替えの処理だが、ラジオボタンが数個の時ならいいけど、100個も並んでると見栄えがよくない。

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 48 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

ので、リンクでできないものかと考えた。何も考えないと、

<form action="" method="get"> <input type="hidden" name="view_mode" value=""> <a href="javascript:void(0)" onclick="submit();">0</a> <a href="javascript:void(0)" onclick="submit();">1</a> <a href="javascript:void(0)" onclick="submit();">2</a> </form>

となるが、これだと変数で言うところの$_GET['page']の値が渡せない。ので、こうすればよい。

0 1 2
<form name="frm2" action="" method="get"> <input type="hidden" name="view_mode" value=""> <input type="hidden" name="page" value=""> <a href="javascript:void(0)" onclick="document.frm2.page.value='0'; document.frm2.submit(); return false;">0</a> <a href="javascript:void(0)" onclick="document.frm2.page.value='1'; document.frm2.submit(); return false;">1</a> <a href="javascript:void(0)" onclick="document.frm2.page.value='2'; document.frm2.submit(); return false;">2</a> </form>