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

Question

I want them to fill out the StudentID call the file data.cfm and fill in the first name, last name, and Middle Name.

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

I am trying to bind to a CFC and pass the StudentID and a variable.

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

I thought this might be a better way to do this.

Answer 1

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

解决后，将其更改为cfinput并用于绑定到cfc以拉回结果。