Javascript 检查文本输入并相应地显示div

我想根据文本输入显示不同的div。以下是HTML标记：

<form>
<input type="text" name="sesam" id="sesam">
<input id="submit" class="btn btn-primary" type="submit" value="Knacken">
<div class="richtig box">Genau! Und jetzt en guete!</div>
<div class="falsch box">Naja, denk doch nochmal scharf nach!</div>
</form>

如果我使用警报来测试它，它可以工作，但不适用于div

JSFIDLE也给了我一些错误：

我只想检查值，然后显示一个div或另一个div。

只需添加一行：用于防止表单的默认提交

$(document).ready(function () {
        $('form').submit(function (e) {
          e.preventDefault();
          var code = $('#sesam').val();
          if (code === 'respect') {
          $(".box").hide(1000);
          $(".richtig").show("slow");
          }
          else
          {
          $(".box").hide(1000);
          $(".falsch").show("slow");
          }
        });
    });

---

谢谢，您能再解释一下吗，或者给我指一些文档？它工作得很好，完美@Felix我已经在答案中添加了一个链接。看见您的代码的问题是，如果您按“提交”按钮，表单正在提交。啊，对不起，我没有意识到这一点！如果您不想使用“提交”，请使用“类型”按钮并单击类似的功能

$(document).ready(function () {
        $('form').submit(function (e) {
          e.preventDefault();
          var code = $('#sesam').val();
          if (code === 'respect') {
          $(".box").hide(1000);
          $(".richtig").show("slow");
          }
          else
          {
          $(".box").hide(1000);
          $(".falsch").show("slow");
          }
        });
    });