Jqueryのアラートボックスが表示されない

Jqueryのアラートボックスが空の名前にのみ表示されず、父の名前やメールなどに表示されない [送信]ボタンをクリックすると、名前フィールドまたは電子メールフィールドが空です。Jqueryのアラートボックスが表示されない

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 

    <title>Registration Form</title> 
    <link href="style/bootstrap-3.3.7.min.css" rel="stylesheet" /> 
    <script src="script/jquery-1.12.4.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script type="text/javascript "> 
     var limit = 10; 
     var Name; 
     var FatherName; 
     var CellNo; 

     $(document).ready(function() { 
      $("#btnSubmit").click(function() { 
       $('#txtName').val(); 
       if (name == "") { 
        alert("please enter the name"); 
        return ; 
       } 
      }); 

       $('#txtFatherName').val(); 
       if (FatherName == "") { 
        alert("please enter ur father name"); 
        return; 
       } 
       $('#txtEmail').val(); 
       if (Email == "") { 
        alert("please enter email"); 
        return; 
       } 
       $('#txtAddress').val(); 
       if (Address == "") { 
        alert("please enter email"); 
        return; 
       } 
       $('#txtCellNo').val(); 
       if (CellNo == "") { 
        alert("please enter email"); 
        return; 
       } 

     }); 

</script> 


</head> 
<body> 
    <form id="form1" runat="server"> 
     <div id="personalInfo"> 
      <div> 
       <div class="container"> 
        <h1>Personal Information</h1> 

       </div> 
       <br /> 
       <div class="row"> 
        <div class="col-sm-2 text-right">Name :</div> 
        <div class="col-sm-4"> 
         <input type="text" id="txtName" class="cls1" name="txtName" size="20" /> 
        </div> 
       </div> 
       <br /> 
       <div class="row"> 
        <div class="col-sm-2 text-right">Father Name :</div> 
        <div class="col-sm-4"> 
         <input type="text" id="txtFatherName" class="cls1" name="txtFatherName" size="20" /> 
        </div> 
       </div> 
       <br /> 

      </div> 
      <div class=" row"> 
       <div class="col-sm-2 text-right">Email:</div> 
       <div class="col-sm-4"> 
        <input type="text" id="txtEmail " class="cls1" name="txtEmail" size="20" /> 
       </div> 
      </div> 

      <div> 
       <br /> 
       <div class="row"> 
        <div class="col-sm-2 text-right">Address</div> 
        <div class="col-sm-4"> 
         <input type="text" id="txtAddress" class="cls1" name="txtAddress" size="20" /> 
        </div> 
       </div> 
       <br /> 
       <div class="row"> 
        <div class="col-sm-2 text-right">Cell No:</div> 
        <div class="col-sm-4"> 
         <input type="text" id="txtCellNo" class="cls1" name="txtCellNo" size="20" /> 
        </div> 
       </div> 
       <br /> 

       <div class=" row"> 
        <div class=" col-sm-2 text-right"></div> 
        <div class="col-sm-2"> 
         <button type="button" id="btnSubmit" class="btn btn-primary">Submit</button> 
         <button type="button" id="btnCancel" class="btn btn-default">Cancel</button> 
        </div> 

       </div> 
      </div> 
     </div> 

    </form> 
</body> 
</html>

出典

2016-10-26 Jazib_Prince

、あなたは二回、ブートストラップCSSとjQueryをロードしています –

ここであなたが始めるためにです：ここでは

は、コードがあります。あなたの例に基づいて

$('#txtName').val(); 
if (name == "") { 
    alert("please enter the name"); 
    return ; 
}

"名前" が定義されていません。小切手は実際に何もしていません。

注：この例では、以前に入力したものが削除されたかどうかはチェックされません。無関係なノートで

$(document).ready(function() { 
 
    var limit = 10; 
 
    
 
    $("#btnSubmit").click(function() { 
 
    var Name = $('#txtName').val(); 
 
    var FatherName = $('#txtFatherName').val(); 
 
    var CellNo = $('#txtCellNo').val(); 
 
    var Email = $('#txtEmail').val(); 
 
    var Address = $('#txtAddress').val(); 
 
    
 
    if (Name == "") { 
 
     alert("please enter the name"); 
 
     return ; 
 
    } else if (FatherName == "") { 
 
     alert("please enter ur father name"); 
 
     return; 
 
    } else if (Email == "") { 
 
     alert("please enter email"); 
 
     return; 
 
    } else if (Address == "") { 
 
     alert("please enter address"); 
 
     return; 
 
    } else if (CellNo == "") { 
 
     alert("please enter cell"); 
 
     return; 
 
    } 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<form id="form1" runat="server"> 
 
    <div id="personalInfo"> 
 
    <div> 
 
     <div class="container"> 
 
     <h1>Personal Information</h1> 
 
     </div> 
 
     <br /> 
 
     <div class="row"> 
 
     <div class="col-sm-2 text-right">Name :</div> 
 
     <div class="col-sm-4"> 
 
      <input type="text" id="txtName" class="cls1" name="txtName" size="20" /> 
 
     </div> 
 
     </div> 
 
     <br /> 
 
     <div class="row"> 
 
     <div class="col-sm-2 text-right">Father Name :</div> 
 
     <div class="col-sm-4"> 
 
      <input type="text" id="txtFatherName" class="cls1" name="txtFatherName" size="20" /> 
 
     </div> 
 
     </div> 
 
     <br /> 
 
    </div> 
 
    <div class=" row"> 
 
     <div class="col-sm-2 text-right">Email:</div> 
 
     <div class="col-sm-4"> 
 
     <input type="text" id="txtEmail " class="cls1" name="txtEmail" size="20" /> 
 
     </div> 
 
    </div> 
 

 
    <div> 
 
     <br /> 
 
     <div class="row"> 
 
     <div class="col-sm-2 text-right">Address</div> 
 
     <div class="col-sm-4"> 
 
      <input type="text" id="txtAddress" class="cls1" name="txtAddress" size="20" /> 
 
     </div> 
 
     </div> 
 
     <br /> 
 
     <div class="row"> 
 
     <div class="col-sm-2 text-right">Cell No:</div> 
 
     <div class="col-sm-4"> 
 
      <input type="text" id="txtCellNo" class="cls1" name="txtCellNo" size="20" /> 
 
     </div> 
 
     </div> 
 
     <br /> 
 

 
     <div class=" row"> 
 
     <div class=" col-sm-2 text-right"></div> 
 
     <div class="col-sm-2"> 
 
      <button type="button" id="btnSubmit" class="btn btn-primary">Submit</button> 
 
      <button type="button" id="btnCancel" class="btn btn-default">Cancel</button> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

出典

2016-10-26 15:49:23

Jqueryのアラートボックスが表示されない

答えて

関連する問題