如何使用JavaScript，Ajax和/或jQuery填写学生信息

Question

我希望他们填写StudentID调用文件data.cfm并填写名，姓和中间名。

<script language="Javascript"> 
    $(function() { 

     $('#effective_date').datepicker(); 

     jQuery.validator.addMethod("phoneUS", function(phone_number, element) { 
      phone_number = phone_number.replace(/\s+/g, ""); 
      return this.optional(element) || phone_number.length > 9 && 
       phone_number.match(/^(\+?1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
      }, "Please specify a valid phone number"); 

     $("#retro_registration").validate({ 

      // Specify the validation rules 
      rules: {    
       studentID: { 
        required: true, 
        maxlength: 8 
       }, 
       term: { 
        required: true, 
        maxlength: 6 
       }, 
       effective_date: { 
        required: true, 
        date: true 
       },    
       class_action: { 
        required: true 
       }, 
       CRN: { 
        required: true, 
        maxlength: 5 
       }, 
       subj_abbr: { 
        required: true, 
        maxlength: 4 
       }, 
       course_number: { 
        required: true, 
        maxlength: 5 
       }, 
       credit_hours: { 
        number: true, 
        minlength: 4, 
        maxlength: 5 
       }, 
       another: { 
        required: true 
       },      
      }, 

      submitHandler: function(form) { 
       form.submit(); 
      } 
     }); 

    }); 

</script> 
<CFIF findNoCase("MSIE 7.0", cgi.http_user_agent)> 
    It appears you are using an outdated browser. If you are using IE 9, please change your compatibility mode settings, use another browser, or update IE to a new version. 
    <cfabort> 
</CFIF> 

<h2 class="content_title">Retro Registration Request</h2> 
<cfoutput> 

<cfform action="act_retro_registration.cfm" name="retro_registration" id="retro_registration" method="post"> 
<fieldset> 

    <legend>Student Information</legend> 
      <div class="form-group"> 
       <label>Student ID:<em>*</em></label> 
       <input type="text" name="studentID" id="studentID" tabindex="1" onblur=""> 
      </div> 

     <!---Populated based on Banner ID; cannot override---> 
     <div class="form-group"> 
      <label>First Name:<em>*</em></label> 
      <input type="text" name="fname" readonly="true"> 
     </div> 
     <!---Populated based on Banner ID; cannot override---> 
     <div class="form-group"> 
      <label>Last Name:<em>*</em></label> 
      <input name="lname" type="text" readonly="true"> 
     </div> 
     <!---Populated based on Banner ID; cannot override---> 
     <div class="form-group"> 
      <label>Middle Name:<em>*</em></label> 
      <input name="middlename" type="text" readonly="true"> 
     </div> 
</fieldset> 

<fieldset> 
    <legend>Course Information</legend> 

     <div class="form-group"> 
      <label>Term:<em>*</em></label> 
      <input name="term" type="text" tabindex="2"> 
     </div> 

     <div class="form-group"> 
      <label>Effective Date:<em>*</em></label> 
      <input name="effective_date" id="effective_date" type="text" tabindex="3"> 
     </div> 

     <div class="form-group"> 
      <label>Action:</label> 
      <select name="class_action"> 
       <option value=""> </option> 
       <option value="AC">Add Course (AC) </option> 
       <option value="AU">Audit Course (AU)</option> 
       <option value="DC">Drop Course (DC)</option> 
       <option value="DD">Drop/Delete Course (DD)</option> 
       <option value="DG">Drop Grad Course (DG)</option> 
       <option value="W">Withdraw Course (W)</option> 
       <option value="WP">Withdraw/Pass Course (WP)</option> 
       <option value="WF">Withdraw/Fail Course (WF)</option> 
      </select> 
     </div> 

     <!---5 varchar limit---> 
     <div class="form-group"> 
      <label>Course Reference Number (CRN):<em>*</em></label> 
      <input name="CRN" type="text" tabindex="12" maxlength="5"> 
     </div> 

     <!---4 varchar limit---> 
     <div class="form-group"> 
      <label>Subject Abbreviation:<em>*</em></label> 
      <input name="subj_abbr" type="text" tabindex="13" maxlength="4"> 
     </div> 

     <!---5 varchar limit---> 
     <div class="form-group"> 
      <label>Course Number:<em>*</em></label> 
      <input name="course_number" type="text" tabindex="14" maxlength="5"> 
     </div> 

     <!---5 digit number, allow two decimal places (e.g., 1.50, 2.00, 3.25, 0.50, etc.)---> 
     <div class="form-group"> 
      <label>Credit Hours:<em>*</em></label> 
      <input name="credit_hours" type="text" tabindex="15" maxlength="5"> 
     </div> 

     <div class="form-group"> 
      <label>Save as Draft?:<em>*</em></label> 
      Yes<input name="draft" value="yes" type="radio" tabindex="16">&nbsp;&nbsp; 
     No <input name="draft" value="no" type="radio" tabindex="17" checked="checked"> 
     </div> 

     <div class="form-group"> 
      <label>Perform another registration action for this same student and term?:<em>*</em></label> 
      Yes<input name="another" value="yes" type="radio" tabindex="18">&nbsp;&nbsp; 
     No <input name="another" value="no" type="radio" tabindex="19" checked="checked"> 
     </div> 

</fieldset>  

    <div class="form-group"> 
     <label></label> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </div> 

    </cfform> 
</cfoutput> 

我想绑定到一个CFC并传递StudentID和一个变量。

<legend>Student Information</legend> 
      <div class="form-group"> 
       <label>Student ID:<em>*</em></label> 
       <input type="text" name="studentID" id="studentID" tabindex="1"> 
      </div> 

     <!---Populated based on Banner ID; cannot override---> 
     <div class="form-group"> 
      <label>First Name:<em>*</em></label> 
      <input type="text" name="fname" readonly="true" bind='cfc:student_data.getFirstName(studentID={studentID},password="#pwd#"))'> 
     </div> 

我认为这可能是一个更好的方法来做到这一点。

Answer 1

<cfinput type="text" name="fname" readonly="true" bind="cfc:student_data.getFirstName(studentID={studentID},passw={pw})"> 

解决了它将其更改为cfinput并使用绑定到一个CFC拉回结果。