javascript - 使用 ajax 和 jQuery 自动填写表单，但有时只能工作

Question

我试图让“添加注册”表单在单击编辑按钮时自动填写，它有时有效，有时无效，获取注册总是返回正确的结果，但 javascript 文件未设置每次表单中的值。

HTML:

<p><input type="button" id="addEnrolment" value="Add" class="button-add"></p> 
<div id="dialog" style="display:none;" title="Enrolment Form">
    <form id="addEnrolmentForm" name="myform" method="post" action="" >
    <input type="hidden" name="id" value="" >
    <table>
    <tr>
    <td> School </td>
    <td><select name="school"  id="school" onchange='change_category2(this.value);'>
        <option value="--" >Select An Option: </option>
        <option value="Moosomin">Moosomin</option>
        <option value="Wapella">Wapella</option>
    </select></td>              
    </tr>
    <tr>
        <td> Age Group </td>
        <td><div class="selectbox" id="responce_event0">
        <select name="agegrp" id="agegrp" disabled="disabled" >
        <option value="--" >Select An Option:</option>
        </select>
        </div></td> 
    </tr>
    <tr>
        <td> Events </td>
        <td><div class="selectbox" id="responce_event">
        <select name="event" id="event" disabled="disabled" >
        <option value="--" >Select An Option:</option>
        </select>
        </div></td> 
    </tr>
        <tr>
        <td>Athlete Name:</td>
        <td><div class="selectbox" id="responce_event2">
        <select name="athlete" id="athlete" disabled="disabled" >
        <option value="--" >Select An Option:</option>
        <option value="anOption"> An Option </option>
        </select>
        </div></td>
    </tr>
    </table>
    <br>
    <div class="center"><button type="submit" id='enter'> Submit </button></div>
    </form>
</div>

<div id="enrolment">
<table align="left">
    <tr>
        <th>Edit</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>School</th>
        <th>AgeGroup</th>
        <th>Event</th>
    </tr>     
    <tr id="enrolment7">
        <td>
            <form  style='display:inline;' id="editEnrolment7" method="post" action="">
            <input type="hidden" name="enrolment_id" value="7" >
            <input type="submit" id="button7" name="submit" value="Edit" class="button-edit">
            </form>
            <form  style='display:inline;'id="deleteEnrolment7" method="post" action="">
            <input type="hidden" name="enrolment_id" value="7" >
            <input type="submit" id="button7" name="submit" value="Delete" class="button-delete">
            </form>
        <td>Mark</td>
        <td>Edwards</td>
        <td>Moosomin</td>
        <td>Bantam Boys</td>
        <td>1000 Meter</td>
    </tr>
   </table></div>

JavaScript:

$(function() {
    $("#dialog").dialog({
    autoOpen:false,
    maxWidth:600,
    maxHeight: 500,
    width: 500,
    height: 450,
    close: function(){ 
    $('#addEnrolmentForm').trigger("reset");

    $.ajax({
            type: "GET",
            url: "/Ajax/ajax_reset_event.php",
            success: function(html){
                $("#responce_event").html(html);
        }
    });
    $.ajax({
        type: "GET",
        url: "/Ajax/ajax_reset_athlete.php",
        success: function(html){
            $("#responce_event2").html(html);
        }
    });
    $.ajax({
        type: "GET",
        url: "/Ajax/ajax_reset_age_group.php",
        success: function(html){
            $("#responce_event0").html(html);
        }
    });
    }

    });
    $("#addEnrolment").on("click", function() 
    {

    $("#dialog").dialog("open");
    });



    $("#addEnrolmentForm").submit(function(e)
    { 
    e.preventDefault();
    var postData = jQuery(this).serialize();
    $("#dialog").dialog("close")
    $.ajax({
    type: "POST",
    url: "AddEnrolment.php",
    dataType: 'json',
    data: postData,
    success: function(data){
     alert(data); 
     //alert("success");
    }



    });   
    }); 


    $('[id^="editEnrolment"]').submit(function(e)
    { 
    e.preventDefault();
    var editData = jQuery(this).serialize();
    $.ajax({
    type: "POST",
    url: "/Get/GetEnrolment.php",
    dataType: 'json',
    data: editData,
    success: function(data){

    var form = document.forms['addEnrolmentForm'];
    form.id.value=data.id;
    form.school.value=data.school;
    //alert(data.school);
    //alert(form.school.value);
    change_category2(data.school);
    $.ajax({
        type: "POST",
        url: "/Get/GetEnrolment.php",
        dataType: 'json',
        data: editData,
        success: function(data){
            form.agegrp.value=data.agegrp;
    //      alert(data.agegrp);
    //      alert(form.agegrp.value);
            change_category(data.agegrp);
            $.ajax({
                type: "POST",
                url: "/Get/GetEnrolment.php",
                dataType: 'json',
                data: editData,
                success: function(data){
                    form.event.value=data.event;
    //              alert(data.event);
    //              alert(form.event.value);
                    form.athlete.value=data.athlete;
    //              alert(data.athlete);    
    //              alert(form.athlete.value);
    }});        
    }});

    }
    });





    $("#dialog").dialog("open");

    });
    })

function change_category(id)
{
    $.ajax({
        type: "GET",
        url: "/Ajax/ajax_get_event.php?age_group_name="+id,
        data:   id,
        success: function(html){
            $("#responce_event").html(html);
        }
    });
    var school = document.getElementById("school").value;
    $.ajax({
        type: "GET",
        url: "/Ajax/ajax_get_athlete.php?age_group_name="+id+"&school_name="+school,
        data:   id,
        success: function(html){
            $("#responce_event2").html(html);
        }
    });
}
function change_category2(id)
{

    $.ajax({
        type: "GET",
        url: "/Ajax/ajax_get_age_group.php",
        success: function(html){
            $("#responce_event0").html(html);
        }
    });
    $.ajax({
            type: "GET",
            url: "/Ajax/ajax_reset_event.php",
            success: function(html){
                $("#responce_event").html(html);
        }
    });
    $.ajax({
        type: "GET",
        url: "/Ajax/ajax_reset_athlete.php",
        success: function(html){
            $("#responce_event2").html(html);
        }
    });
}

Get Enrollment 返回这个:

{"id":9,"school":"Moosomin","agegrp":"Bantam Boys","event":"1000 Meter","athlete":"81"}

ajax_get_athlete

<select name="athlete">
   <option value='--' >Select An Option:</option>
   <option value="81">Mark Edwards </option>
<select/>

ajax_get_age_group

<select name='agegrp' onchange='change_category(this.value);'>
    <option value='--' >Select An Option:</option> 
    <option value='Bantam Boys' > Bantam Boys</option>
    <option value='Bantam Girls' > Bantam Girls</option>
</select>

ajax_get_events

<select name='event' >
    <option value='--' >Select An Option:</option>
    <option value='1000 Meter'>1000 Meter </option>
<select/>

Answer 1

我认为您在文档就绪处理程序中应该包含的代码中犯了一个错误。

你用过

$(function() {
   // Code
});

据我所知，还没有准备好绑定(bind)文档。

尝试

$(document).ready(function() {
   // Code
});

相反。这会在加载所有 HTML 之后执行绑定(bind)，应该可以让您开展业务