質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1592閲覧

submit()メソッドにおけるpreventDefault();の意味

pegy

総合スコア243

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/07/18 11:53

現在、このcodepenに記載のあるコードを参考にしているのですが、Javascriptの以下のコードの意味がわからずにお尋ねさせてください。

$(".form-wrapper").submit(function(e) {
e.preventDefault();//この意味はあるのでしょうか?
});

submitをさせないコードであることはわかるのですが、
一旦このようなコードをおくことで、2重送信防止等の意味合いがあったりするのでしょうか?
ただ、実際にはこのコードを置いてしまうとそのあとに、

('.button').on('click',function(){
$(".form-wrapper").submit();
})

等を置いても、もはや送信できなくなるため(一度、preventDefaultを設定するともう何をしても送信できなくなる?)ため、なおさらこのコードの意味がわかりません。。。

ただのサンプルであるため、イベントをキャンセルするためだけに設定されているのであれば、気にしないのですが何か意味がありよく使用されるコーディング等であれば、どなたかアドバイスをいただけますでしょうか。

codePen

html

1 <div class="container"> 2 <div class="wrapper"> 3 <ul class="steps"> 4 <li class="is-active">Step 1</li> 5 <li>Step 2</li> 6 <li>Step 3</li> 7 </ul> 8 <form class="form-wrapper"> 9 <fieldset class="section is-active"> 10 <h3>Your Details</h3> 11 <input type="text" name="name" id="name" placeholder="Name"> 12 <input type="text" name="email" id="email" placeholder="Email"> 13 <div class="button">Next</div> 14 </fieldset> 15 <fieldset class="section"> 16 <h3>Account Type</h3> 17 <div class="row cf"> 18 <div class="four col"> 19 <input type="radio" name="r1" id="r1" checked> 20 <label for="r1"> 21 <h4>Designer</h4> 22 </label> 23 </div> 24 <div class="four col"> 25 <input type="radio" name="r1" id="r2"><label for="r2"> 26 <h4>Developer</h4> 27 </label> 28 </div> 29 <div class="four col"> 30 <input type="radio" name="r1" id="r3"><label for="r3"> 31 <h4>Project Manager</h4> 32 </label> 33 </div> 34 </div> 35 <div class="button">Next</div> 36 </fieldset> 37 <fieldset class="section"> 38 <h3>Choose a Password</h3> 39 <input type="password" name="password" id="password" placeholder="Password"> 40 <input type="password" name="password2" id="password2" placeholder="Re-enter Password"> 41 <input class="submit button" type="submit" value="Sign Up"> 42 </fieldset> 43 <fieldset class="section"> 44 <h3>Account Created!</h3> 45 <p>Your account has now been created.</p> 46 <div class="button">Reset Form</div> 47 </fieldset> 48 </form> 49 </div> 50 </div>

css

1html, body{ 2 width: 100%; 3 height: 100%; 4 margin: 0; 5 padding: 0; 6 font-family: 'Open Sans', sans-serif; 7 background-color: #3498db; 8} 9 10h1, h2, h3, h4, h5 ,h6{ 11 font-weight: 200; 12} 13 14a{ 15 text-decoration: none; 16} 17 18p, li, a{ 19 font-size: 14px; 20} 21 22fieldset{ 23 margin: 0; 24 padding: 0; 25 border: none; 26} 27 28/* GRID */ 29 30.twelve { width: 100%; } 31.eleven { width: 91.53%; } 32.ten { width: 83.06%; } 33.nine { width: 74.6%; } 34.eight { width: 66.13%; } 35.seven { width: 57.66%; } 36.six { width: 49.2%; } 37.five { width: 40.73%; } 38.four { width: 32.26%; } 39.three { width: 23.8%; } 40.two { width: 15.33%; } 41.one { width: 6.866%; } 42 43/* COLUMNS */ 44 45.col { 46 display: block; 47 float:left; 48 margin: 0 0 0 1.6%; 49} 50 51.col:first-of-type { 52 margin-left: 0; 53} 54 55.container{ 56 width: 100%; 57 max-width: 700px; 58 margin: 0 auto; 59 position: relative; 60} 61 62.row{ 63 padding: 20px 0; 64} 65 66/* CLEARFIX */ 67 68.cf:before, 69.cf:after { 70 content: " "; 71 display: table; 72} 73 74.cf:after { 75 clear: both; 76} 77 78.cf { 79 *zoom: 1; 80} 81 82.wrapper{ 83 width: 100%; 84 margin: 30px 0; 85} 86 87/* STEPS */ 88 89.steps{ 90 list-style-type: none; 91 margin: 0; 92 padding: 0; 93 background-color: #fff; 94 text-align: center; 95} 96 97 98.steps li{ 99 display: inline-block; 100 margin: 20px; 101 color: #ccc; 102 padding-bottom: 5px; 103} 104 105.steps li.is-active{ 106 border-bottom: 1px solid #3498db; 107 color: #3498db; 108} 109 110/* FORM */ 111 112.form-wrapper .section{ 113 padding: 0px 20px 30px 20px; 114 -webkit-box-sizing: border-box; 115 -moz-box-sizing: border-box; 116 box-sizing: border-box; 117 background-color: #fff; 118 opacity: 0; 119 -webkit-transform: scale(1, 0); 120 -ms-transform: scale(1, 0); 121 -o-transform: scale(1, 0); 122 transform: scale(1, 0); 123 -webkit-transform-origin: top center; 124 -moz-transform-origin: top center; 125 -ms-transform-origin: top center; 126 -o-transform-origin: top center; 127 transform-origin: top center; 128 -webkit-transition: all 0.5s ease-in-out; 129 -o-transition: all 0.5s ease-in-out; 130 transition: all 0.5s ease-in-out; 131 text-align: center; 132 position: absolute; 133 width: 100%; 134 min-height: 300px 135} 136 137.form-wrapper .section h3{ 138 margin-bottom: 30px; 139} 140 141.form-wrapper .section.is-active{ 142 opacity: 1; 143 -webkit-transform: scale(1, 1); 144 -ms-transform: scale(1, 1); 145 -o-transform: scale(1, 1); 146 transform: scale(1, 1); 147} 148 149.form-wrapper .button, .form-wrapper .submit{ 150 background-color: #3498db; 151 display: inline-block; 152 padding: 8px 30px; 153 color: #fff; 154 cursor: pointer; 155 font-size: 14px !important; 156 font-family: 'Open Sans', sans-serif !important; 157 position: absolute; 158 right: 20px; 159 bottom: 20px; 160} 161 162.form-wrapper .submit{ 163 border: none; 164 outline: none; 165 -webkit-box-sizing: content-box; 166 -moz-box-sizing: content-box; 167 box-sizing: content-box; 168 -webkit-appearance: none; 169 -moz-appearance: none; 170 appearance: none; 171} 172 173.form-wrapper input[type="text"], 174.form-wrapper input[type="password"]{ 175 display: block; 176 padding: 10px; 177 margin: 10px auto; 178 background-color: #f1f1f1; 179 border: none; 180 width: 50%; 181 outline: none; 182 font-size: 14px !important; 183 font-family: 'Open Sans', sans-serif !important; 184} 185 186.form-wrapper input[type="radio"]{ 187 display: none; 188} 189 190.form-wrapper input[type="radio"] + label{ 191 display: block; 192 border: 1px solid #ccc; 193 width: 100%; 194 max-width: 100%; 195 padding: 10px; 196 -webkit-box-sizing: border-box; 197 -moz-box-sizing: border-box; 198 box-sizing: border-box; 199 cursor: pointer; 200 position: relative; 201} 202 203.form-wrapper input[type="radio"] + label:before{ 204 content: "✔"; 205 position: absolute; 206 right: -10px; 207 top: -10px; 208 width: 30px; 209 height: 30px; 210 line-height: 30px; 211 border-radius: 100%; 212 background-color: #3498db; 213 color: #fff; 214 display: none; 215} 216 217.form-wrapper input[type="radio"]:checked + label:before{ 218 display: block; 219} 220 221.form-wrapper input[type="radio"] + label h4{ 222 margin: 15px; 223 color: #ccc; 224} 225 226.form-wrapper input[type="radio"]:checked + label{ 227 border: 1px solid #3498db; 228} 229 230.form-wrapper input[type="radio"]:checked + label h4{ 231 color: #3498db; 232} 233

javascript

1$(document).ready(function(){ 2 $(".form-wrapper .button").click(function(){ 3 var button = $(this); 4 var currentSection = button.parents(".section"); 5 var currentSectionIndex = currentSection.index(); 6 var headerSection = $('.steps li').eq(currentSectionIndex); 7 currentSection.removeClass("is-active").next().addClass("is-active"); 8 headerSection.removeClass("is-active").next().addClass("is-active"); 9 10 $(".form-wrapper").submit(function(e) { 11 e.preventDefault();//この意味はあるのでしょうか? 12 }); 13 14 if(currentSectionIndex === 3){ 15 $(document).find(".form-wrapper .section").first().addClass("is-active"); 16 $(document).find(".steps li").first().addClass("is-active"); 17 } 18 }); 19}); 20

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

clickイベントのハンドラー内でajaxでpostするようなときに使ったりしますね。

投稿2018/07/18 14:11

euledge

総合スコア2404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pegy

2018/07/18 15:26

コメントいただき、有難うございます。すみません、考えても思い浮かばないのですが、非同期でpostを実行するようなケースが実務的にあるのでしょうか? 実装した事はないのですが、このコメント投稿のように、ページを遷移せずにサーバーに値をpostしたい場合のようなイメージでしょうか?
euledge

2018/07/18 20:52

そうですね、コメントやチャットなどの投稿などは画面遷移しないほうが良いと思いますし、検索時のクエリフォームでもクエリストリングに載せたくない場合はGETでなくPOST使う時もありますね。
pegy

2018/07/18 22:50

承知をいたしました、ご教示いただき誠にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問