如何防止提交表单[重复]

Question

我有一个带有 ajax 调用的表单：

<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>  

我调用 ajax 来显示在 evaluation3 中。这是显示数据的代码：

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

所以我检查了数据库中选中复选框的总和和复选框的总和。如果不相等，则系统不会上传数据。最后，我想检查是否选中了 id evaluation3 的所有复选框。如果是，则提交表单，如果不只是发出警报并留在页面上。

这里是 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>

如果没有选中所有复选框，则可以防止提交：

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

所以问题是它让我收到警报消息，但它也在发出第一条警报消息后提交表单。如果未选中所有复选框，如何防止表单提交？

Answer 1

我认为这应该可行。

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