为什么我的表单在“返回”按钮上提交？

Question

我有一个由 7 个输入字段组成的表单，分别显示“下一个按钮”以显示下一个输入并隐藏当前输入和“后退按钮”以隐藏当前并显示上一个。问题是当我单击“后退按钮”时，最后一个输入的提交功能会运行，它会将未完成的字段保存在数据库中。我不知道为什么以及如何防止它。以下是“后退按钮”的示例代码：

Template.submitProblem.events({
  'click .back1':function() {
    //show/hide items with removeClass()/addClass()
    $('#submit-why1').addClass('hidden');
    $('#submit-problem').removeClass('hidden');
  }
});

以及最后一个输入字段的提交功能：

Template.submitProblem.events({
  'submit form':function(event) {
    event.preventDefault();
    var problem = $(event.target).find('[name=problem]').val();
    var why1 = $(event.target).find('[name=why1]').val();
    var why2 = $(event.target).find('[name=why2]').val();
    var why3 = $(event.target).find('[name=why3]').val();
    var why4 = $(event.target).find('[name=why4]').val();
    var why5 = $(event.target).find('[name=why5]').val();
    var solution = $(event.target).find('[name=solution]').val();

   Problems.insert({
      problem: problem,
      why1: why1,
      why2: why2,
      why3: why3,
      why4: why4,
      why5: why5,
      solution: solution,
      submitdate: new Date()
    });

    Router.go('submitted');
  }
});

<template name="submitProblem">
  <div class="container">
    <div class="main-page">
      <form class="form text-center">
        <div id="submit-problem">
          <input autofocus="autofocus" type="text" name="problem" id="problem" placeholder="What's the problem ?"/>
          <input type="button" id="route" value="Find Its Route" class="route btn btn-sample">
        </div>

        <div id="submit-why1" class="hidden">
          <input autofocus="autofocus" type="text" name="why1" id="why1" placeholder="This problem exists, because..."/>
          <input type="button" value="Answer" class="btn-success btn answer1">
          <div>
          <button class="btn back1 back-btn"><i class="fa fa-arrow-left fa-3x"></i></button>
          </div>
        </div>
        ...

Answer 1

您应该始终为<button> 元素指定类型属性，因为不同的浏览器可能对<button> 元素使用不同的默认类型。在您的情况下，您需要将后退按钮更新为具有类型按钮，以便它不会提交。

<button type="button" class="btn back1 back-btn"><i class="fa fa-arrow-left fa-3x"></i></button>