Функция отправки Jquery не проверяется

Question

Итак, я работал над простым скриптом для проекта класса. Я новый студент javascript, поэтому я очень затрудняюсь, хотя думаю, что это легко решить. Мы представляем форму, я ввожу 7 и получаю «неправильный ответ», который хорош, но затем я вводил 8 (правильный ответ), и он по-прежнему выводит неправильный ответ. Я не знаю, почему она не может дифференцировать любое другое число от 8. Пожалуйста, помогите

$("#story").submit(function (e) { 
var answer = document.getElementById('human-story'); 


if (answer != 8) { 
    console.log(answer); 
    e.preventDefault();   
}else { 
    alert("right answer"); 
    e.preventDefault(); 
} 
}) 


<form class="form-horizontal contact" name="contact" method="post" action="" id="story"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4>We are excited to hear your story!</h4> 

     </div> 
     <div class="modal-body"> 
     <div class="form-group"> 
      <label for="contact-name" class="col-lg-2 control-label">Name:</label> 
      <div class="col-lg-10"> 
      <input type="text" name="first_name" class="form-control" id="contact-name" placeholder="First & Last Name" required="" > 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="contact-email" class="col-lg-2 control-label">Email:</label> 
      <div class="col-lg-10"> 
      <input type="email" name="email" class="form-control" id="contact-email" placeholder="you@example.com" required=""> 

      </div> 
     </div> 
     <div class="form-group"> 
      <label for="contact-message" class="col-lg-2 control-label">Story:</label> 
      <div class="col-lg-10"> 
      <textarea name="message" rows="8" class="form-control" style="resize:none;" required=""></textarea> 

      </div> 
     </div> 
     <div class="form-group"> 
     <label for="human" class="col-sm-2 control-label">5 + 3 = ?</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="human-story" name="human-story" placeholder="Your Answer" required=""> 
     </div> 
    </div> 

     </div> 
     <div class="modal-footer"> 
     <a href="#" class="btn btn-default" data-dismiss="modal">Close</a> 
     <button class="btn btn-success" name="submit-story" type="submit-story" value="Send!">Send</button> 
     </div> 
    </form> 

Answer 1

У вас есть более чем одно поле с .form-controll класса. Используйте id атрибут, чтобы определить, какое поле должно быть проверена на правильный ответ:

$("#story").submit(function (e) { 
    e.preventDefault();  
    if ($("#human-story").val() == '8') { 
     alert("right answer"); 
    } else { 
     alert("wrong answer"); 
    } 
}); 

Наличия нескольких элементов с form-controll классом, используя $(".form-controll").val(), JQuery возвращает значение первого элемента с данным классом (в вашем случае это "name" значение поля).

Answer 2

использовать как этот

$("#story").submit(function (e) { 

    if ($(".form-control").val() == '8') { 
     alert("right answer");  

    }else { 
     alert("wrong answer"); 

    } 
    e.preventDefault();  
}); 

Answer 3

первый вы можете положить e.preventDefault(); непосредственно перед установкой переменной. , так что вам просто нужно написать его один раз.

и у вас не просто включить, если условие для

$("#story").submit(function (e) { 
    e.preventDefault();  
    var answer = parseInt($(".form-control").val(), 10); 

    if (answer == 8) { 
     alert("right answer"); 
    } else { 
     alert("wrong answer"); 
    } 
}); 

рассматривают работу скрипку:

$("#story").submit(function(e) { 
 
    e.preventDefault(); 
 
    var answer = parseInt($(".form-control").val(), 10); 
 

 
    if (answer == 8) { 
 
    alert("right answer"); 
 
    } else { 
 
    alert("wrong answer"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" id="story"> 
 
    <input name="form--control" type="text" class="form-control" /> 
 
    <input name="submit" type="submit" class="form--submit" /> 
 

 
</form>