流星：帶有兩個提交按鈕的表單（在事件處理程序中單擊確定按鈕）

Question

我有一個簡單的表單，帶有兩個輸入：“ 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，是否可以確定按鈕（或者是一種更智能的方式來實現此目的？）？

Answer 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();}
});

Answer 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所示：

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

並在函數中通過執行以下操作獲取ID：

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

完整代碼：

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

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

Answer 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 click .plus5也可以。

流星：帶有兩個提交按鈕的表單（在事件處理程序中單擊確定按鈕）

問題描述

3 個解決方案

解決方案1
3 已采納 2015-02-13 22:19:25

解決方案2
1 2015-02-13 21:49:50

解決方案3
1 2015-10-04 04:21:42

流星：帶有兩個提交按鈕的表單（在事件處理程序中單擊確定按鈕）

問題描述

3 個解決方案

解決方案1 3 已采納 2015-02-13 22:19:25

解決方案2 1 2015-02-13 21:49:50

解決方案3 1 2015-10-04 04:21:42

解決方案1
3 已采納 2015-02-13 22:19:25

解決方案2
1 2015-02-13 21:49:50

解決方案3
1 2015-10-04 04:21:42