在表单提交上，确定单击了哪个提交按钮动作

Question

提交表单后如何获得“提交按钮动作”？ 例如;

<form data-action="foo">

  <button type="submit" name="action" value="update">Update</button>
  <button type="submit" name="action" value="cancel">Cancel</button>
</form>

在我的主干视图中，我试图确定单击了哪个按钮：

,   events: {
        'submit form[data-action="foo"]': 'editSubscription'
    }

,   editSubscription: function(e) 
    {
        e.preventDefault();
        // How can I determine the submit action is 'update' or 'cancel'

        // Save the model, ie, implicitly do a POST with action UPDATE or CANCEL
        this.model.save({action: 'update' /*or 'cancel'*/}, ...);
    }

Answer 1

通过获取提交按钮的价值。

$(document).on("click", ":submit", function(e){
    alert($(this).val());
});

Answer 2

您可以通过以下方式在Vanilla JS中实现该目标：

 document.querySelectorAll('button[type=submit]').forEach(function(btn){ btn.addEventListener('click', function(e){ console.log('You have clicked the button:', this.value); e.preventDefault(); }) }); 

 <form data-action="foo"> <button type="submit" name="action" value="update">Update</button> <button type="submit" name="action" value="cancel">Cancel</button> </form> 

或：如果您更喜欢jQuery：

 $('button[type=submit]').on('click', function(e){ console.log('You have clicked the button:', this.value); e.preventDefault(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form data-action="foo"> <button type="submit" id="update" name="action" value="update">Update</button> <button type="submit" id="cancel" name="action" value="cancel">Cancel</button> </form> 

Answer 3

您可以在点击事件中获取按钮值，使用“阻止默认值”来停止表单提交

 var el = document.querySelectorAll('button'); el.forEach(item => { item.addEventListener('click', function(e){ e.preventDefault(); console.log(e.target.value); }) }) 

 <form data-action="foo"> <button type="submit" name="action" value="update">Update</button> <button type="submit" name="action" value="cancel">Cancel</button> </form> 

Answer 4

这是获取通知的方法。 只需将id属性添加到element并从currentTarget中获取它。

 var eventType = ''; $("button").on("click",function(e){ alert($(e.currentTarget).attr('id')+' clicked'); eventType = $(e.currentTarget).attr('id'); //this.model.save({action: eventType}, ...); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form data-action="foo"> <button type="submit" id="update" name="action" value="update">Update</button> <button type="submit" id="cancel" name="action" value="cancel">Cancel</button> </form> 

Answer 5

最简单的方法是使用event.target您可以获取button的value并将条件放在该按钮上

    // you can determine by e.target.value that action is 'update' or 'cancel'
   if(e.target.value=='update'){
          // Save the model, ie, implicitly do a POST with action UPDATE
           this.model.save({action: 'update'}, ...);
   }
   if(e.target.value=='cancel'){
      // Save the model, ie, implicitly do a POST with action CANCEL
       this.model.save({action: 'cancel'}, ...);
   }

您更新的代码：

 ,   events: {
            'submit form[data-action="foo"]': 'editSubscription'
        }

    ,   editSubscription: function(e) 
        {
            e.preventDefault();
            // you can determine by e.target.value that action is 'update' or 'cancel'
            if(e.target.value=='update'){
            // Save the model, ie, implicitly do a POST with action UPDATE
            this.model.save({action: 'update'}, ...);
            }
            if(e.target.value=='cancel'){
            // Save the model, ie, implicitly do a POST with action CANCEL
            this.model.save({action: 'cancel'}, ...);
            }

        }