2011-05-31 147 views
0

//employeeForm.html如何調用存儲在外部JavaScript文件從HTML文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
    <title>Employee Information</title> 
    <script src="jquery-1.4.4.js" type="text/javascript"></script> 
    <link href="EmployeeFormStyle.css" type="text/css" rel="stylesheet"/> 
    <script src="EmployeeModuleBase.js" type="text/javascript"></script> 

</head> 
<body class="body"> 
    <h3 class="header">Employee Information</h3> 
    <form class="form" method="post" id="employeeInfoForm" name="employeeInfo" action="ProcessEmployeeInfo.php"> 
     <table> 
      <tbody> 
       <tr> 
        <td><label for="fname">First Name:</label></td> 
        <td id="eftd_1"><input id="FirstName" name="FirstName" type="text"/></td> 
        <td id="validatortxt_1" class="red-text"></td> 
       </tr> 
       <tr> 
        <td><label for="surname">Surname:</label></td> 
        <td id="eftd_2"><input id="Surname" name="Surname" type="text"/></td> 
        <td id="validatortxt_2" class="red-text"></td> 
       </tr> 
       <tr> 
        <td><label for="gender">Gender:</label></td> 
        <td id="eftd_3"> 
         <select name="Gender" id="Gender"> 
          <option></option> 
          <option value="Male">Male</option> 
          <option value="Female">Female</option> 
         </select> 
        </td> 
        <td id="validatortxt_3" class="red-text"></td> 
       </tr> 
       <tr> 
        <td><label for="Title">Title:</label></td> 
        <td id="eftd_4"> 
         <select name="Title" id="Title"> 
          <option></option> 
          <option value="Mr">Mr</option> 
          <option value="Mrs">Mrs</option> 
          <option value="Miss">Miss</option> 
          <option value="Dr">Dr</option> 
          <option value="Prof">Prof</option> 
         </select> 
        </td> 
        <td id="validatortxt_4" class="red-text"></td> 
       </tr> 
       <tr> 
        <td><label for="ID No">ID No.:</label></td> 
        <td id="eftd_5"><input id="IDNo" name="IDNo" type="text" maxlength="13"/></td> 
        <td id="validatortxt_5" class="red-text"></td> 
       </tr> 
       <tr> 
        <td><label for="mobileNumber">Mobile Number:</label></td> 
        <td id="eftd_6"><input id="MobileNumber" name="MobileNumber" type="text" maxlength="12"/></td> 
        <td id="validatortxt_6" class="red-text"></td> 
       </tr> 
       <tr> 
        <td><label for="email">Email Address:</label></td> 
        <td id="eftd_7"><input id="EmailAddress" name="EmailAddress" type="text"/></td> 
        <td id="validatortxt_7" class="red-text"></td> 
       </tr> 
       <tr> 
        <td><label for= "address">Address:</label></td> 
        <td id="eftd_8"><input id="AddressLine1" name="AddressLine1" type="text"/></td> 
        <td id="validatortxt_8" class="red-text"></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td id="eftd_9"><input id="AddressLine2" name="AddressLine2" type="text" size=30/></td> 
        <td id="validatortxt_9" class="red-text"></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td id="eftd_10"><input id="AddressLine3" name="AddressLine3" type="text" size=30/></td> 
        <td id="validatortxt_10" class="red-text"></td> 
       </tr> 
       <tr> 
        <td><label for="location">Location:</label></td> 
        <td id="eftd_11"> 
         <select name="Location" id="Location"> 
          <option></option> 
          <option value="Sebokeng">Sebokeng</option> 
          <option value="Sharpville">Sharpville</option> 
          <option value="Evaton">Evaton</option> 
          <option value="Boipatong">Boipatong</option> 
          <option value="Bophelong">Bophelong</option> 
          <option value="Vanderbijlpark">Vanderbijlpark</option> 
          <option value="Vereeneging">Vereeneging</option> 
         </select> 
        </td> 
        <td id="validatortxt_11" class="red-text"></td> 
       </tr> 
       <tr> 
        <td><label for= "postalcode">Postal Code:</label></td> 
        <td id="eftd_12"><input id="PostalCode" name="PostalCode" type="text" maxlength="5"/></td> 
        <td id="validatortxt_12" class="red-text"></td> 
       </tr> 
       <tr> 
        <td>&nbsp;</td> 
        <td> 
         <input id="btnSubmit" class="butt" name="btnSubmit" value="Save" type="submit"/> 
         <input id="btnClear" class="butt" name="btnClear" value="Clear" type="submit"/> 
        </td> 
        <td>&nbsp;</td> 
       </tr> 
      </tbody> 
     </table> 
    </form> 
</body> 
</html> 


EmployeeModuleBase.js 
jQuery().ready(function() 
{ 
    $('#employeeInfoForm').submit(function() 
     { 
     var postForm = true; 
     $(':input').each(function(index) 
     { 
      if ($(this).val() == "") 
      { 
       if ($(this).attr("id")!="EmailAddress") 
       { 
       $('#validatortxt_' + (index + 1).toString()).text(" *"); 
       } 

       postForm = false; 
       } 
       else 
       { 
       $('#validatortxt_' + (index + 1).toString()).text(""); 
       postForm = true; 
       } 
     }); 

     return postForm; 
     }); 
}; 

基本上什麼M試圖實現的是,以驗證使用jQuery代碼在外部JS file.but形式如何的jQuery表單調用js外部文件中的jquery代碼...?

回答

0

你準備好方法附加到jQuery的

jQuery().ready(function() 
加載,你應該事件附加到文件,而不僅僅是jQuery的本身。那麼它應該在文檔準備就緒時加載,並且DOM在那裏以便處理程序追加。

jQuery(document).ready(function() 
0

在你的外部文件中,只需要一個普通的'舊時尚'功能。然後你可以根據需要調用它(該函數可以使用jQuery):

$(document).ready(DocReady); 

function DocReady() 
{  
    AssignClickToToggleButtons(); 
    ColorCodeTextBoxes(); 
    DoValidation(); 
} 
相關問題