How to prevent submission of form

Question

I have a form with ajax calls:

<form method="post" action="?slt=Sbmt" onsubmit="return validateForm()" id="reportform" enctype="multipart/form-data">

<div id="evaluation1">
<h2>Rate Technical Skills</h2>
    <table class="quartz-table" id="techskills_table">   
        <thead>
            <tr>
              <th>Driver</th>
              <th>Sub-Driver</th>
              <th class="sorter-false">Skill</th>  
              <th class="sorter-false">Marks</th>  
            </tr>
      </thead>
    <?php
    foreach( $subdriver as $sbdriver => $sbd ) 
    {
        $skillsResult = getTechSkills($yes, $role, $sbd);
        $countTech = 0;

        while($row = mysqli_fetch_array($skillsResult))
        {    
            $id = $row['id'];
            $driver = $row['driver'];
            $subdriver = $row['subdriver'];
            $dep = $row['department'];
            $skill = $row['skills'];
            $vrgood = $row['4'];
            $good = $row['3'];
            $middle = $row['2'];
            $low = $row['1'];
    ?>
        <tbody>
            <tr class="full_qst">
                <td><?php echo $driver; ?></td>
                <td><?php echo $subdriver; ?></td>
                <td><?php echo $skill; ?></td>
                <td> <img alt="" src="imagesAssessment/check.png" class="check">
                    <div class="mrk">
                        <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
                        <label class="choice" for="q1_b" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
                        <label class="choice" for="q1_c" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
                        <label class="choice" for="q1_d" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
                    </div>   
                    <input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" /> 
                    <input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />    
                </td>
            </tr>
        </tbody>
    <?php
    $countTech++;
        }
    }    
    ?>            
    </table>
<button type='button' class='ev_quest2' data-id3="<?php echo $yes.'|'.$role.'|'.$quarter.'|'.$username.'|'.$staffid; ?>">Performance Skills</button>
</div>
<div id="evaluation3"></div>

<br/><br/><br/>
</form>  

I call ajax to display in evaluation3 . Here is code to display data:

$(document).on('click', '.ev_quest3', function(){
    var row_number2 = "<?php echo $countPerf; ?>"; 
    var checked_number2 = $("#evaluation2 :checkbox:checked").length;
    if(row_number2 == checked_number2){
        var evaluation3 = $(this).data("id3");
        $.ajax({
            url: "comAssessment/scoreboard_evaluation_closed.php",
            method: "POST",
            data: {evaluation3: evaluation3},
            dataType:"text",
            success: function (data) {
                $('.quest3').hide();
                $("#evaluation3").hide().html(data).show("slide", { direction: "up" }, 1500);
            }
        });
    }else{ alert('Please Rate all Performance Skills first!'); }
});

So I check sum of checked checkboxes and sum of checkboxes from the database. If its not equal then system wont upload data. In the end I want to check if all checkboxes of id evaluation3 are checked. If yes then submit the form if not just give alert and stay on the page.

And here is scoreboard_evaluation_closed.php:

<table id="closedquest_table" class="quartz-table">   
    <thead>
        <tr>
          <th class="sorter-false">Skill</th>  
          <th class="sorter-false">Marks</th>  
        </tr>
    </thead>    
<?php   
    while($row = mysqli_fetch_array($closedResult))
    {
        $id = $row['id'];
        $dep = $row['department'];
        $skill = $row['question'];
        $vrgood = $row['4'];
        $good = $row['3'];
        $middle = $row['2'];
        $low = $row['1'];
?>
    <tbody>
    <tr class="full_qst">
        <td><?php echo $skill; ?></td>
        <td> <img alt="" src="imagesAssessment/check.png" class="check">
            <div class="mrk">
                <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
                <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
                <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
                <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
            </div>   
            <input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" /> 
            <input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />    
        </td>      
    </tr>
    </tbody>
<?php
    $countClosed++;
    }
?>
</table>

And function to prevent submission if not all checkboxes are checked:

$(function () {
    $('form').on('submit', function (e) {
        var row_number3 = "<?php echo $countClosed; ?>"; 
        var checked_number3 = $("#evaluation3 :checkbox:checked").length;    

        if(row_number3 != checked_number3){
            e.preventDefault();
            alert(/*'Please Rate all Closed Questions'*/ row_number3+' a / b '+checked_number3);
        }  
    });
});

So the problem is it gets me alert message but it also submit the form after giving first alert message. How can I prevent form from submission if not all checkboxes are checked?

Answer 1

I think this should work.

$("#reportform").submit(function(e){
        e.preventDefault();
        // your code here
});