submit() 函数是否优先于 onSubmit？

Question

我正在做一个网络项目，我写了一些 JS 函数，但是在我通过按钮更改提交后，我用来确认是否要删除数据的函数不再起作用了。

我想问问题-标题-

如果您想在这里查看代码（仅 html / js）=

<style>
  .tableau_objectif { 
  width: 80%; 
  border-collapse: collapse; 
  }

th { 
  background: #386795; 
  color: white; 
  font-weight: bold; 
  text-align:center !important;
}
.tableau_objectif th { 
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 


    word-wrap: break-word;
}

td{
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 


    word-wrap: break-word;
}
</style>

<div class="col-md-12" style="text-align:center">
<form method="post" action="<?= site_url('admin/Gestion_abonnes/search'); ?>"></br>
    Nom : <input type='text' name="recherche_nom" /></br>
    Prénom : <input type='text' name="recherche_prenom" style="margin-top:10px;"/></br>
    Email : <input type='text' name="recherche_mail" style="margin-top:10px;"/></br>
    Option SMS : <input type="checkbox" name="recherche_sms" style="margin-top:10px;"/></br>
    Rechercher : <input type="submit" style="margin-top:10px;" class="tn btn-primary">
</form>
</div>

<table class="tableau-objectif col-md-12" style="margin-top:30px;margin-bottom: 30px;">
    <tr>
        <th>Customer Id</th>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Email</th>
        <th>Prochain renouvellement</th>
        <th>SMS</th>
        <th>Annuler le renouvellement</th>
        <th>Annuler l'option SMS</th>

    </tr>

<?php 
    $cpt=0;
    foreach($test as $row){



        $sms_test = $row->autoRenew;
            ?>
                <form method="post" action="<?= site_url('admin/Gestion_abonnes/change_renew'); ?>" onsubmit="return confirmation()" id="f_<?php echo $cpt; ?>" >
                    <tr>
                        <td><?php echo $row->customerId; ?><input type="hidden" name="id" value="<?php echo $row->customerId; ?>"/></td>
                        <td><?php echo $row->customer_lastname; ?><input type="hidden" name="nom" value="<?php echo $row->customer_lastname; ?>"/></td>
                        <td><?php echo $row->customer_firstname; ?><input type="hidden" name="prenom" value="<?php echo $row->customer_firstname; ?>"/></td>
                        <td><?php echo $row->customer_email; ?></td>
                        <td><?php echo $row->fin; ?><input type="hidden" name="fin" value="<?php echo $row->fin;?>" /></td>

                        <td><?php if(isset($row->customerAbo) && $sms_test == 1){ ?>
                            <span style="color:green">Oui</span>
                            <input type="hidden" name="idsms" value="<?php echo $row->customerAbo; ?>" />
                            <input type="hidden" name="datesms" value="<?php echo $row->fin_sms; ?>" />
                        <?php } 
                        else{ ?>
                            <span style="color:red">Non</span>
                        <?php }?></td>

                        <td><input type="button" value="Désactiver le renouvellement automatique" id="renb_<?php echo $cpt; ?>" onClick="myClick(this)"/></td>

                        <?php if(!empty($sms_test)){ ?>
                        <td><input type="button" value="Désactiver l'option SMS" id="smsb_<?php echo $cpt; ?>" onclick="myClick(this)"/></td>
                        <?php }
                        else{ ?>
                        <td></td>
                        <?php } ?>
                    </tr>
                </form>

         <?php  

         $cpt++;
    }
?>

还有 JS

    <script>

    var urltest = <?= json_encode(site_url('admin/Gestion_abonnes')); ?>;  


            function confirmation(){

               var action = this.getAttribute('action');

                alert(action);

                return false;

                if(action === urltest+'/change_renew'){
                    return confirm("Voulez-vous vraiment désactiver le renouvellement automatique ?\n"+action);
                }

                else{
                    return confirm("Voulez-vous vraiment désactiver l'option SMS ?\n"+action);
                }


            }

            function myClick(button){

                var e = button;
                var id = e.getAttribute('id');

                var part = id.split('_');


                if(part[0] === "smsb"){
                    document.getElementById('f_'+part[1]).action = urltest+'/change_sms';
                }

                else{
                    document.getElementById('f_'+part[1]).action = urltest+'/change_renew';
                }


                confirmation();
                document.getElementById('f_'+part[1]).submit();

                console.log(document.getElementById('f_'+part[1]).getAttribute('action'));
            }




    </script>  

嗯，主要问题是我应该在提交之前有一个弹出窗口，但是由于 submit() 优先级肯定没有弹出窗口（我可能错了）。

Answer 1

来自HTML spec for the form submission algorithm，第5步说：

如果从 submit() 方法提交的标志未设置，则触发 冒泡且可取消的简单事件，名为 submit，在表单中。

而 form.submit() 的规范说：

submit() 方法在调用时必须从 表单元素本身，带有从 submit() 方法标志提交 设置。

因此，当您调用form.submit() 时，浏览器会故意忽略触发提交事件，该事件由onSubmit 处理程序处理，因此不会调用您的确认代码。