jQuery:在preverDefault()之后提交表单不起作用

时间:2016-12-07 03:28:57

标签: javascript jquery html forms

<form class="signup nomargin sky-form boxed" id="signup_form" method="post" action="/accounts/signup/" autocomplete="off">
    <input type="hidden" name="csrfmiddlewaretoken" value="H0nDydQL7RNNAStNwIRRILxa4WAVLExq"> 
    <header> 
        <i class="fa fa-users"></i> 회원가입
    </header> 
    <fieldset class="nomargin "> 
        <div id="div_id_username" class="form-group"> 
            <div class="controls "> 
                <input class="textinput textInput form-control" id="id_username" maxlength="30" name="username" placeholder="아이디" type="text"> 
            </div> 
        </div> 
        <div id="div_id_email" class="form-group"> 
            <div class="controls "> 
                <input class="textinput textInput form-control" id="id_email" name="email" placeholder="이메일" type="email"> 
            </div> 
        </div> 
        <div id="div_id_password1" class="form-group"> 
            <div class="controls "> 
                <input class="textinput textInput form-control" id="id_password1" name="password1" placeholder="비밀번호" type="password"> 
            </div> 
        </div> 
        <div id="div_id_password2" class="form-group"> 
            <div class="controls "> 
                <input class="textinput textInput form-control" id="id_password2" name="password2" placeholder="비밀번호 확인" type="password"> 
            </div> 
        </div> 
        <div class="note clearfix text-center margin-top-20"> 
            <input type="checkbox" id="usage-agree"> <a href="/rule/" style="style=" color:#f07057;"=""> Spacegraphy 이용약관</a> 및 <a href="/privacy/" style="style=" color:#f07057;"="">개인정보 취급방침</a>에 동의합니다
        </div> 
        <div class="clearfix note margin-bottom-10 text-center"> <br> 
            <a href="/accounts/login/"> 이미 계정이 있으시다구요? </a> <br> 
        </div> 
    </fieldset>

    <div class=" text-center"> 
        <input type="submit" name="submit" value="가입하기" class="btn btn-primary btn btn-primary noradius" id="signup-btn" style="width:90%; margin:0px 0px 30px 0px;">
    </div> 
</form>

register.js

$(document).ready(function(){
    $("#signup-btn").click(function(event){
        event.preventDefault();
        if ($("#usage-agree").prop('checked') != true) {
            alert("이용약관에 동의해주세요");
        } else {
            $("#signup_form").submit();
        }
    });
});

如果我不检查#usage-agree复选框,则会显示警告。

但如果我愿意,它什么也没做。什么都没发生!

如果选中复选框,我想提交表单。

我不知道我的代码有什么问题。

1 个答案:

答案 0 :(得分:0)

这是因为您点击时会e.preventDefault()阻止表单提交。

$(document).ready(function(){
    $("#signup-btn").click(function(event){
        event.preventDefault(); // this prevent your form submit
        if ($("#usage-agree").prop('checked') != true) {
            alert("이용약관에 동의해주세요");
        } else {
            $("#signup_form").submit();
        }
    });
});

相反,你应该做如下,

$(document).ready(function(){
    $("#signup-btn").click(function(event){
        if ($("#usage-agree").prop('checked') != true) {
            event.preventDefault(); //only if unchecked prevent 
            alert("이용약관에 동의해주세요");
        } else {
            $("#signup_form").submit(); 
        }
    });
});