我有一个表单,其中包含7个输入字段,单独显示“next-button”以显示下一个输入并隐藏当前和“后退按钮”以隐藏当前和显示上一个。问题是当我点击“后退按钮”时,最后一个输入的提交功能会运行,并且它会在数据库中保存未完成的字段。我不知道为什么以及如何预防它。以下是“后退按钮”的示例代码:
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>
...
答案 0 :(得分:1)
您应始终为<button>
元素指定type属性,因为不同的浏览器可能会为<button>
元素使用不同的默认类型。在您的情况下,您需要更新后退按钮以使其具有类型按钮,以便它不会提交。
<button type="button" class="btn back1 back-btn"><i class="fa fa-arrow-left fa-3x"></i></button>