Meteor：带有两个提交按钮的表单（确定在事件处理程序中单击的按钮）答案

【问题标题】：Meteor: form with two submit buttons (determine button clicked in event handler)Meteor：带有两个提交按钮的表单（确定在事件处理程序中单击的按钮）
【发布时间】：2015-10-04 12:21:42
【问题描述】：

我有一个简单的表单，有两个输入：“title”和_“description”，还有两个按钮：“save”（稍后保存）和“submit”。对于两者，我都想获取表单字段的值并相应地插入/更新我的集合。

<template name="NewScenarioForm">
  <form id="newScenarioForm" >
    <textarea type="text" id="title" name="title" rows="1" cols="75" placeholder="Type to add a title"></textarea><br/>
    <textarea type="text" id="description" name="description" rows="4" cols="100" placeholder="Type to add a description" ></textarea><br/>

    <input type="submit" id="saveScenarioButton" name="action" title="Save Scenario" value="Save" />
    <input type="submit" id="submitScenarioButton" name="action" title="Submit for approval" value="Submit" />       
 </form>
</template>

现在我正在检测这样的事件：

"click #saveScenarioButton": function(event, template) {
    event.preventDefault(); 
    var title = template.find("#title").value;
    var description = template.find("#description").value;
    ...
   //Do stuff with this information to persist information
   Meteor.call("saveScenario", title, description);
   ....
 }

我需要为另一个按钮重复整个功能。我想检测事件并确定按下了哪个按钮。

我一直在努力处理如下事件处理程序：

"submit #newScenarioForm": function(event) {

但是我不知道如何确定单击的按钮，因为我无法确定事件属性。如果我想在我的事件处理程序中使用表单 ID 而不是每个按钮的 ID（或者更聪明的方法来完全解决这个问题？），有没有办法确定按钮？

【问题讨论】：

标签： javascript forms meteor

【解决方案1】：

您可以使用 submit 类型输入事件目标：

Template.NewScenarioForm.events({
    "click input[type=submit]": function(e) {
        if ($(e.target).prop("id") == "saveScenarioButton") {
            // Save the scenario
        } else if ($(e.target).prop("id") == "submitScenarioButton") {
            // Submit the scenario
        }
    }
});

你也可以让它检查点击按钮的值，并删除 ID 字段

请注意，这不会处理其他提交表单的方式，例如用户在输入字段中按 Enter。处理这个问题的方法也可以是定义一些函数：

function scrapeForm() {
    // Collects data from the form into an object
}

function saveData() {
    var formData = scrapeForm();
    // More logic to save the data
}

function submitData() {
    var formData = scrapeForm();
    // More logic to submit the data
}

Template.NewScenarioForm.events({
    "click input[type=submit]": function(e) {
        if ($(e.target).prop("id") == "saveScenarioButton") {
            saveData();
        } else if ($(e.target).prop("id") == "submitScenarioButton") {
            submitData();
        }
    },
    "submit #NewScenarioForm":
        // Default action on submit.
        // Either save the data
        saveData
        // or submit the data
        submitData
        // or nothing, requiring the user to actually click one of the buttons
        function(e) {e.preventDefault();}
});

【讨论】：

我原来使用“#saveScenarioButton, submitScenarioButton”作为 CSS 选择器的方法不起作用。它适用于实际的 CSS 和 jQuery，所以我猜这是 Meteor 的一个错误
这是一个美妙而优雅的解决方案。比我为每个可能的输入使用重复方法的方法要好得多。只需注意一点，在尝试时 $(e.target) 是为我定义的，但不是 $(e.target) .id()，所以我最终只是改为使用 event.target.id。也感谢额外的代码。随着我的应用程序的发展，它会派上用场。
对...我没有测试它，忘记了你需要使用$(e.target).prop("id")。现在编辑进去了。不过，使用 e.target.id 并没有什么问题

【解决方案2】：

为什么不给他们两个像submitForm一样的类

<input class="submitForm"** type="submit" id="saveScenarioButton" name="action" title="Save Scenario" value="Save" />
<input class="submitForm" type="submit" id="submitScenarioButton" name="action" title="Submit for approval" value="Submit" />

然后对.submitForm 进行 onClick，如下所示：

$('.submitForm').on('click', function () {...});

并在函数内部通过以下方式获取 id：

var id = $(this).attr('id');

完整代码：

$('.submitForm').on('click', function () {
    var id = $(this).attr('id');

    ... the rest of your code ...
});

【讨论】：

这是一个 Meteor 问题，这是一个 jQuery 处理它的方式。 Meteor 有自己的声明事件处理程序的方式。 jQuery 可以工作，但不是正确的方法。给两个按钮一个公共类的方法是可以接受的。

【解决方案3】：

我这样做是为了正确识别使用 class 或 id 的按钮。

helloWorld.html

<head>
  <title>helloWorld</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button class="plus5">+5</button>
  <button class="minu5">-5</button>
  <button id="plus1">+1</button>
  <button id="minu1">-1</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

helloWorld.js

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button.plus5': function () { 
      Session.set('counter', Session.get('counter') + 5);
    },
    'click button.minu5': function () {
      Session.set('counter', Session.get('counter') - 5);
    },
    'click button#plus1': function () {
      Session.set('counter', Session.get('counter') + 1);
    },
    'click button#minu1': function () {
      Session.set('counter', Session.get('counter') - 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

click .plus5、click #plus1 也可以。

【讨论】：