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

像这样使用

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

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

    }else {
         alert("wrong answer"); 

    }
    e.preventDefault();     
 });

Answer 2

首先你可以把e.preventDefault（）;在您重新设置变量之前。所以你只需要写一次。

而且你不能将if子句转为

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

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

看工作小提琴：

＆＃13;

$("#story").submit(function(e) {
  e.preventDefault();
  var answer = parseInt($(".form-control").val(), 10);

  if (answer == 8) {
    alert("right answer");
  } else {
    alert("wrong answer");
  }
});

＆＃13;

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

＆＃13;

Answer 3

您有多个.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返回给定类的第一个元素的值（在您的情况下，它是＆＃39; s ＆＃34; name＆＃ 34; 字段值）。

Jquery提交函数未验证

3 个答案: