jQuery：preverDefault（）之后提交表单不起作用

Question

<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();
        }
    });
});

If I would not check the #usage-agree checkbox, it shows alert.

But If I would, it didn't do anything. Nothing happened!

I want to submit the form if checkbox is checked.

I don't know what is wrong with my code.

Answer 1

It is because your have e.preventDefault() on click which prevent form submit.

$(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();
        }
    });
});

Instead you should do as follows,

$(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(); 
        }
    });
});