submit()メソッドにおけるpreventDefault();の意味
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 1,066
現在、このcodepenに記載のあるコードを参考にしているのですが、Javascriptの以下のコードの意味がわからずにお尋ねさせてください。
$(".form-wrapper").submit(function(e) {
e.preventDefault();//この意味はあるのでしょうか?
});
submitをさせないコードであることはわかるのですが、
一旦このようなコードをおくことで、2重送信防止等の意味合いがあったりするのでしょうか?
ただ、実際にはこのコードを置いてしまうとそのあとに、
('.button').on('click',function(){
$(".form-wrapper").submit();
})
等を置いても、もはや送信できなくなるため(一度、preventDefaultを設定するともう何をしても送信できなくなる?)ため、なおさらこのコードの意味がわかりません。。。
ただのサンプルであるため、イベントをキャンセルするためだけに設定されているのであれば、気にしないのですが何か意味がありよく使用されるコーディング等であれば、どなたかアドバイスをいただけますでしょうか。
<div class="container">
<div class="wrapper">
<ul class="steps">
<li class="is-active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Your Details</h3>
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="Email">
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Account Type</h3>
<div class="row cf">
<div class="four col">
<input type="radio" name="r1" id="r1" checked>
<label for="r1">
<h4>Designer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r2"><label for="r2">
<h4>Developer</h4>
</label>
</div>
<div class="four col">
<input type="radio" name="r1" id="r3"><label for="r3">
<h4>Project Manager</h4>
</label>
</div>
</div>
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Choose a Password</h3>
<input type="password" name="password" id="password" placeholder="Password">
<input type="password" name="password2" id="password2" placeholder="Re-enter Password">
<input class="submit button" type="submit" value="Sign Up">
</fieldset>
<fieldset class="section">
<h3>Account Created!</h3>
<p>Your account has now been created.</p>
<div class="button">Reset Form</div>
</fieldset>
</form>
</div>
</div>
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
}
h1, h2, h3, h4, h5 ,h6{
font-weight: 200;
}
a{
text-decoration: none;
}
p, li, a{
font-size: 14px;
}
fieldset{
margin: 0;
padding: 0;
border: none;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
display: block;
float:left;
margin: 0 0 0 1.6%;
}
.col:first-of-type {
margin-left: 0;
}
.container{
width: 100%;
max-width: 700px;
margin: 0 auto;
position: relative;
}
.row{
padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper{
width: 100%;
margin: 30px 0;
}
/* STEPS */
.steps{
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
text-align: center;
}
.steps li{
display: inline-block;
margin: 20px;
color: #ccc;
padding-bottom: 5px;
}
.steps li.is-active{
border-bottom: 1px solid #3498db;
color: #3498db;
}
/* FORM */
.form-wrapper .section{
padding: 0px 20px 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
opacity: 0;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align: center;
position: absolute;
width: 100%;
min-height: 300px
}
.form-wrapper .section h3{
margin-bottom: 30px;
}
.form-wrapper .section.is-active{
opacity: 1;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.form-wrapper .button, .form-wrapper .submit{
background-color: #3498db;
display: inline-block;
padding: 8px 30px;
color: #fff;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
right: 20px;
bottom: 20px;
}
.form-wrapper .submit{
border: none;
outline: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"]{
display: block;
padding: 10px;
margin: 10px auto;
background-color: #f1f1f1;
border: none;
width: 50%;
outline: none;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
}
.form-wrapper input[type="radio"]{
display: none;
}
.form-wrapper input[type="radio"] + label{
display: block;
border: 1px solid #ccc;
width: 100%;
max-width: 100%;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: relative;
}
.form-wrapper input[type="radio"] + label:before{
content: "✔";
position: absolute;
right: -10px;
top: -10px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 100%;
background-color: #3498db;
color: #fff;
display: none;
}
.form-wrapper input[type="radio"]:checked + label:before{
display: block;
}
.form-wrapper input[type="radio"] + label h4{
margin: 15px;
color: #ccc;
}
.form-wrapper input[type="radio"]:checked + label{
border: 1px solid #3498db;
}
.form-wrapper input[type="radio"]:checked + label h4{
color: #3498db;
}
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();//この意味はあるのでしょうか?
});
if(currentSectionIndex === 3){
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.98%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/07/19 00:26
実装した事はないのですが、このコメント投稿のように、ページを遷移せずにサーバーに値をpostしたい場合のようなイメージでしょうか?
2018/07/19 05:52
2018/07/19 07:50