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>

OR：（如果您更喜欢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属性添加到元素并从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，您可以获取按钮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'}, ...);
            }

        }

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

5 个答案: