*

-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

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

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

記事を読む

no image

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

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

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

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

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

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑