1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Quick[select]でフォームを自動送信させない

Posted at

Quick[select]ってすごく秀逸なアイデアですよね。
プルダウンとラジオボタンだと後者のほうが「ちゃんと選ばれる」率が高いのですが、項目数が増えると表示領域をとっちゃうので、Quick[select]が提案してる「よく使われる項目だけ外出しにする」というのはすばらしい。

さっそく「まんがseek」の管理画面でも使ってみました。
これが以前の画面です。ある人物が当該マンガ作品にどんな役割を担っているかを選択するところです。

old.png

Quick[select]を使用するとこうなります。
よく選択される項目だけボタン化しています。

new.png

「それ以外」をクリックするとすべての項目が表示されます。

new2.png

こりゃいいなと思ったんですが、プルダウンをボタンにする副作用で、クリックするとフォームを送信してしまう現象が起きました。
なので、クリックしても送信しないように対策。

<script type="text/javascript">
	$('#roleselect').quickselect({
		activeButtonClass: 'btn-primary active',
		//breakOutAll: true,
		breakOutValues: ['0', '1', '2', '3'],
		buttonClass: 'btn btn-default',
		selectDefaultText: '<i class="fa fa-bars"></i> それ以外',
		wrapperClass: 'btn-group'
	});
	$('.quickselect__btn').click(function () {
        return false;
    });
</script>

じっさいには以下の部分になります。

	$('.quickselect__btn').click(function () {
        return false;
    });
1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?