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

我有一个简单的表单，有两个输入：“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>

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

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

"submit #newScenarioForm": function(event) { 

---

但是，我不知道如何确定单击的按钮，因为我无法确定事件属性。如果我想在事件处理程序中使用表单ID而不是每个按钮的ID，是否有一种方法来确定按钮（或者有一种更聪明的方法来实现这一点？）

为什么不像

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" />

在函数中，通过执行以下操作获取id：

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

完整代码：

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

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

---

为什么不给他们两个相同的类，比如

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" />

在函数中，通过执行以下操作获取id：

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

完整代码：

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

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

---

您可以使用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();}
});

---

您可以使用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();}
});

---

我这样做是为了使用

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>

---

单击。plus5

，

单击#plus1

也起作用。

我这样做是为了使用

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>

---

click.plus5

，

click#plus1

也可以工作。

这是一个流星问题，这是一种jQuery处理它的方法。Meteor有自己声明事件处理程序的方法。jQuery可以工作，但不是正确的方法。为两个按钮提供一个公共类的方法是可以接受的。这是一个Meteor问题，这是一种jQuery处理方法。Meteor有自己声明事件处理程序的方法。jQuery可以工作，但不是正确的方法。为两个按钮提供一个公共类的方法是可以接受的。我最初使用“#saveScenarioButton，submitScenarioButton”作为CSS选择器的方法不起作用。它与实际的CSS和jQuery一起工作，所以我想这是Meteor的一个bug，这是一个非常好和优雅的解决方案。比我为每个可能的输入复制方法的方法要好得多。请注意，在尝试时，为我定义了$（e.target），但没有定义$（e.target）.id（），因此我最终只使用event.target.id。也谢谢你的额外代码。随着我的应用程序的发展，它会变得非常方便。对。。。我没有测试它，并且忘记了您需要使用$（e.target）.prop（“id”）。现在编辑它。使用e.target.id没有错，尽管我最初的方法是使用“#saveScenarioButton，submitScenarioButton”，因为CSS选择器不起作用。它与实际的CSS和jQuery一起工作，所以我想这是Meteor的一个bug，这是一个非常好和优雅的解决方案。比我为每个可能的输入复制方法的方法要好得多。请注意，在尝试时，为我定义了$（e.target），但没有定义$（e.target）.id（），因此我最终只使用event.target.id。也谢谢你的额外代码。随着我的应用程序的发展，它会变得非常方便。对。。。我没有测试它，并且忘记了您需要使用$（e.target）.prop（“id”）。现在编辑它。不过，使用e.target.id并没有错