*

-jQuery-送信ボタン1度しか押せないようにする方法

公開日: : css3, html5, jquery

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。

PAK85_lalakakudaikyouOL20140321500

問い合わせフォームの「送信」ボタンなどの連続投稿(送信の連打)を防ぐ方法として使用する際にとても便利だと思います。

まずは、デモを用意いたしましので、見てください。
demo

このように一度クリックしたら、押せないようにして、連続投稿(連続送信)を防ぐということをしております。

設置方法は、ものすごく簡単です。
早速下記にソースを記載致します。

今回使用する、スタイルシートは、
index.css
以上の1つです。

scriptは、
index.html
の中に記載いたします。(とても短いので・・)

index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>jQuery-送信ボタン1度しか押せないようにする方法</title>
		<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>  
<div id="wrapper">

<form method="post" action="#">
	<div class="table_line">
		<div class="table_left"><label for="name">お名前</label></div>
		<div class="table_right"><input type="text" id="name" name="お名前" value="" title="お名前"/></div>
	</div>
	<div class="table_line">
		<div class="table_left"><label for="tel">電話番号</label></div>
		<div class="table_right"><input type="text" id="tel" name="電話番号" value="" title="電話番号"/></div>
	</div>
	<div class="table_line">
		<div class="table_left"><label for="mail">メールアドレス</label></div>
		<div class="table_right"><input type="text" id="mail" name="メールアドレス" value="" title="メールアドレス"/></div>
	</div>
	<div><input type="button" value="  -送信-  " onclick="this.disabled = true;"/><input type="reset" value="  -クリア-  " /></div>
</form>

</div>
<script type="text/javascript">
function send(btn) {
	btn.disabled = true;//ボタンを無効にする
	btn.form.submit();//送信
}
</script>

</body>
</html>

次に、スタイルシートです。

index.css

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #fff;
	margin:0 auto;
	font-size: 16px;
	width: 100%;
}

#wrapper{
	width:1000px;
	position:relative;
	margin:0 auto;
	background-color: #ccc;
}



div.table_line{
	width:100%;
	display:table;
        margin-top:20px;
}

div.table_left{
	display:table-cell;
	width:20%;
}

div.table_right{
	display:table-cell;
	width:80%;
}
div.table_right input{
	width: 80%;
}

以上で完成します。

とても簡単ですね!
これだけで、送信ボタンを一度しか押せないようにできます。

まとめ

送信ボタンのソース部分(index.htmlファイル)

<input type="button" value="  -送信-  " onclick="this.disabled = true;"/><input type="reset" value="  -クリア-  " />

この部分のonclick=”this.disabled = true;”こちらを追加するだけです。

そして、scriptを記載すれば完成です。

<script type="text/javascript">
function send(btn) {
	btn.disabled = true;//ボタンを無効にする
	btn.form.submit();//送信
}
</script>

こちらを記載するだけです。

また、

<input type="button" value="  -送信-  " onclick="this.disabled = true;"/><input type="reset" value="  -クリア-  " />

この部分は、type=”button”となっておりますが、type=”submit”にしても使用できますので、使用する際は、変更してください。
(今回は、わかりやすい用にわざとtype=”button”にしております。)

今回参考にしたサイトがありますのでこちらも参考にしてみてください。
1度しか押せないボタンを作る – JavaScript TIPSふぁくとりー

今回デモで使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
download

今回の記事がもし参考になりましたら、ブログランキングにご協力ください。
よろしくお願いします。


関連記事

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑