backbone.js 在表单提交时确定单击哪个提交按钮操作

h22fl7wq  于 2022-11-10  发布在  其他
关注(0)|答案(5)|浏览(174)

提交表单时,如何获得“提交按钮操作”?例如;

<form data-action="foo">

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

在我的 Backbone.js 视图中,我试图找出单击了哪个按钮:

,   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'*/}, ...);
    }
qlvxas9a

qlvxas9a1#

通过获取提交按钮的值。

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

yfjy0ee72#

您可以在单击事件时获取按钮值,使用防止默认值来停止表单提交
第一个

nsc4cvqm

nsc4cvqm3#

下面是如何获得通知。只需将id属性添加到元素中,然后从currentTarget中获得它。
第一个

jhdbpxl9

jhdbpxl94#

您可以通过以下方式在Vanilla JS中实现这一点:
第一个

**或:**如果您更喜欢jQuery:

第一个

rmbxnbpk

rmbxnbpk5#

最简单的方法是使用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'}, ...);
            }

        }

相关问题