submit form check if checkbox is checked

Question

I use a form for signup with a checkbox with 'terms of use'

 <form action="/signup/signup_success.html" id="regform" class="form-horizontal" novalidate="novalidate" autocomplete="off">
  <fieldset>
  <div class="checkbox">
                        <label for="agb" id="checkbox_validate" class="hide success">Please accept Terms of Use</label>
                        <label>
                            <input type="checkbox" name="agbcheckbox" id="agbcheckbox">
                            Yes <a target="_blank" href="http://example.de">Datenschutzbestimmungen</a>. </label>
                    </div>
                    <div class="buttonWrapper">
                        <button type="submit" class="try-button" >
                            Register
                        </button>
                    </div>
    </fieldset>
</form>

<script>
 //check if checkbox for terms of use is checked or not
 $("#regform").submit(function(event) {
if ($('#agbcheckbox').prop('checked')) {
    $('#checkbox_validate').removeClass('show').addClass('hide');
    //checkbox for terms of use is checked
} else {
    //checkbox for terms of use is NOT checked
    $('#checkbox_validate').removeClass('hide').addClass('show');
}
  });
</script>

if I add "action="/signup/signup_success.html" to my form, the checkbox validation do not work anymore. If I set the action to action="" the validation works correctly. I don´t find the problem. Thank you for your help!

Answer 1

This is what you need

event.preventDefault();

http://jsfiddle.net/ergec/L8Y8s/

Also suggest to read this to better understand the difference between event.preventDefault and return false

event.preventDefault() vs. return false

Answer 2

found the problem - my function missed a return false;

Answer 3

Your validate still works regardless of action='...' exists or not. The difference is that when you have action='...' defined, the browser will post your form as directed. To prevent this happening in the event of validation failure, you call e.preventDefault()

eg) $("#regform").submit(function(e){ if (.. validation failes ...) { .. do your error msg here e.preventDefault() // prevent browser to perform default action (in this case submit the form) } });