javascript - commit()函数是否优先于onSubmit？

Question

我正在开发一个Web项目，我编写了一些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 步说:

If the submitted from submit() method flag is not set, then fire a simple event that bubbles and is cancelable named submit, at form.

而 form.submit() 的规范说:

The submit() method, when invoked, must submit the form element from the form element itself, with the submitted from submit() method flag set.

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