我寫的JQuery代碼停止了工作，有沒有我忽略的錯誤？

Question

對於下面的代碼，我希望將帶有.btn-primary屬性的提交按鈕的內容更改爲「成功！」。只有在輸入字段全部不爲空的情況下。

在預設情況下，當按鈕按下時，代碼會直接成功，無論字段是否有內容。

我認爲這可能是因爲這些字段可能已經有一個非空的值，所以我運行這個代碼：alert($('#Comment').attr("value"));它在警報消息中返回undefined。未定義與js/jquery中的null相同，不是嗎？

我得到了這個代碼更早的工作，它只是幾個改變幾乎相同的方式鍵入。我解開了這些變化，但它仍然無法正常工作。

任何幫助將不勝感激。 （如果有人知道這一點）是否有相同的代碼不能在不同時間工作的情況，所有事情都是平等的？

<script src="~/Scripts/jquery-2.1.1.min.js"></script> 

    $(document).ready(function() { 
    var Fname = $('#FirstName').attr("value"); 
    var Lname = $('#LastName').attr("value"); 
    var Email = $('#Email').attr("value"); 
    var Comment = $('#Comment').attr("value"); 
    $(".btn-primary").click(function() //This block should say, if all fields are not null changed the content of button to "Success!" and change the content of <h1> to "THANKS, I'VE GOT YOUR MESSAGE." 
    { 

     if (Fname != null && Lname != null && Email != null && Comment != null) 
     { 
      $("button").html("Success!");   
      $("h1").html("THANKS, I'VE GOT YOUR MESSAGE"); 
     } 

    }) 
}); 
</script> 

而且這是在同一個頁面

<form class="form-horizontal" role="form" action="/Home/Contact" method="post">  

<div class="form-group"> 

    <div class="col-lg-10"> 

    <input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName"/> 

    </div> 
</div> 

<div class="form-group"> 
    <div class="col-lg-10"> 
    <input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName"/> 
    <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span> 
    </div> 
</div> 

<div class="form-group"> 
    <div class="col-md-10"> 

    <input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email@Address.com"/> 
    <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span> 
    </div> 
</div> 

<div class="form-group"> 
    <div class="col-lg-10"> 

    <textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea> 
    <span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-lg-10"> 
    <button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button> 
    <input type="reset" class="btn btn-default btn-sm active" value="reset"> 
    </div> 
</div> 
</form> 

Answer 1

當你的文檔載入你存儲FNAME，LNAME的值在HTML .....等等。問題是你在條件測試中使用這些值，但這些值不會改變，因爲它們只是第一次加載頁面時的原始值。一個快速解決方案是將這些內部點擊進去，以便每點擊一次他們就可以重新評估

此外，當檢查你只是檢查null，但這些不會等於null。更好的方式是完全驗證它們或只是測試通用truthy去掉了falsy值，如null，未定義，空字符串

$(document).ready(function() { 
 

 
     $(".btn-primary").click(function (e) 
 
     { 
 
      var Fname = $('#FirstName').val(); 
 
      var Lname = $('#LastName').val(); 
 
      var Email = $('#Email').val(); 
 
      var Comment = $('#Comment').val(); 
 
      //ADDED JUST TO STOP THE FORM SUBMITTING 
 
      e.preventDefault(); 
 
      //very quick test but this could be a lot more detailed for true validation on each field 
 
      if (Fname && Lname && Email && Comment) { 
 
       $("button").html("Success!"); 
 
       $("h1").html("THANKS, I'VE GOT YOUR MESSAGE"); 
 
      } 
 

 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1></h1> 
 
<form class="form-horizontal" role="form" action="#" method="post"> 
 
    <div class="form-group"> 
 
     <div class="col-lg-10"> 
 
      <input class="form-control" data-val="true" data-val-required="Please enter your first name" id="FirstName" type="text" placeholder="First Name" name="FirstName" /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-lg-10"> 
 
      <input class="form-control" required data-val="true" data-val-required="Please enter your last name" id="LastName" type="text" placeholder="Last Name" name="LastName" /> <span class="field-validation-valid text-danger" data-valmsg-for="LastName" data-valmsg-replace="true" data-></span> 
 

 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-md-10"> 
 
      <input class="form-control" required data-val="true" data-val-required="Please enter your email" id="Email" name="Email" type="email" placeholder="Email@Address.com" /> <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span> 
 

 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-lg-10"> 
 
      <textarea class="form-control" required data-val="true" data-val-required="Please enter a brief detailed message" id="Comment" name="Comment" placeholder="A Short but detailed message"></textarea> <span class="field-validation-valid text-danger" data-valmsg-for="Comment" data-valmsg-replace="true"></span> 
 

 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-lg-10"> 
 
      <button type="submit" class="btn btn-primary btn-sm active" value="submit">Submit</button> 
 
      <input type="reset" class="btn btn-default btn-sm active" value="reset"> 
 
     </div> 
 
    </div> 
 
</form>