Question

我想根据文本输入显示不同的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>

我创建了一个jquery函数来触发不同的div框，但它不起作用：

这是JS代码：

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

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

jsfiddle也给了我一些错误：http://jsfiddle.net/c0anytrj/

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

Answer 1

只需添加一行：e.preventDefault();即可阻止默认提交表单

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

Updated demo

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

1 个答案: