Проверить ввод текста и показать div соответственно

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

Если я использую оповещение чтобы проверить его, он работает, но не с divs.

Также jsfiddle дает мне некоторые ошибки: http://jsfiddle.net/c0anytrj/

Я просто хочу, чтобы проверить значение, а затем показать один DIV или другой.

Answer 1

Просто добавьте строку: e.preventDefault(); для предотвращения по умолчанию submition формы

$(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