form button not working after checkbox select using jquery

user_11653799 0
Viewed 74

I have added a jQuery script to check if checkbox is checked or not. If checked doing something and If not doing something else. Here is my jQuery code:

jQuery('#mybtn').click(function (e) {
    e.preventDefault();                                         
    if (jQuery('#mytc').is(':checked')) {

        jQuery('#myfrm').attr('action', 'http://test.php');
                
        jQuery('#checkerror').html('');

    } else {
        jQuery('#checkerror').html('Please agree to the Terms and Conditions.');
    }

 });
<form id="myfrm">
  <p>Lorem ipsum dolor</p>
  <input type="checkbox" id="mytc" value=""/>
    <label class="yogatctxt">I agree to the <a href="#" target="_blank">Terms and Conditions</a>.</label><br>
  <span id="checkerror" style="color: red;font-size: 12px;"></span>
  <br>
   <br>
  <input type="submit" id="mybtn" value="Proceed to Checkout"/> 
</form>


<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

So when I submit Process to Checkout button it still shows same page. Where is the problem?

html jquery javascript
3 Answers

use prevent default in the case where the checkbox is not checked.

jQuery('#mybtn').click(function (e) {
                                            
    if (jQuery('#mytc').is(':checked')) {
        jQuery('#myfrm').attr('action', 'http://test.php');
            
        jQuery('#checkerror').html('');
        return true
    } else {
        e.preventDefault(); 
        jQuery('#checkerror').html('Please agree to the Terms and Conditions.');
        return false;
    }
});
user_40042180

You just need e.preventDefault in else

jQuery('#mybtn').click(function (e) {
                    
    if (jQuery('#mytc').is(':checked')) {

        jQuery('#myfrm').attr('action', 'http://test.php');
                
        jQuery('#checkerror').html('');

    } else {
        e.preventDefault();                 
        jQuery('#checkerror').html('Please agree to the Terms and Conditions.');
    }

 });
<form id="myfrm">
  <p>Lorem ipsum dolor</p>
  <input type="checkbox" id="mytc" value=""/>
    <label class="yogatctxt">I agree to the <a href="#" target="_blank">Terms and Conditions</a>.</label><br>
  <span id="checkerror" style="color: red;font-size: 12px;"></span>
  <br>
   <br>
  <input type="submit" id="mybtn" value="Proceed to Checkout"/> 
</form>


<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

user_139572830 

jQuery('#mybtn').click(function (e) {
    e.preventDefault();                                         
    if (jQuery('#mytc').is(':checked')) {
        jQuery('#checkerror').html('');
        jQuery('#myfrm').attr('action', 'http://test.php');
        jQuery('#myfrm').submit();
    } else {
        jQuery('#checkerror').html('Please agree to the Terms and Conditions.');
    }
    
 });
<form id="myfrm">
  <p>Lorem ipsum dolor</p>
  <input type="checkbox" id="mytc" value=""/>
    <label class="yogatctxt">I agree to the <a href="#" target="_blank">Terms and Conditions</a>.</label><br>
  <span id="checkerror" style="color: red;font-size: 12px;"></span>
  <br>
   <br>
  <input type="submit" id="mybtn" value="Proceed to Checkout"/> 
</form>


<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

You have to submit the form after setting "action" attribute in the form.

user_95145860
Related