javascript - 禁用输入表单，直到加载数据

Question

如何禁用表单的某些部分？我正在尝试在我的系统上创建一个更新代理。最初，用户可以输入的唯一字段是代理 ID。当用户点击LOAD按钮时，它应该加载禁用字段上的所有必要数据，并使其可编辑。我如何使用 PHP 做到这一点？

<div class="modal fade" id="updateAgent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
         <form role="form" action="php/updateAgent.php" method="POST">           

         <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Update Agent</h4>
         </div>
         <div class="modal-body">
            <div class="row">
            <div class="col-sm-12">

                        <div class="form-group">
                                <div class="col-sm-4">
                                    <label for="ag  entID">Agent ID</label>
                                </div>  
                                <div class="col-sm-4">  
                                    <input type="text" class="form-control" name="agentID" id="agentID">
                                </div>  
                                <div class="col-sm-4">
                                    <input type="button" id="loadAgent" name="loadAgent" value="LOAD" class="btn btn-primary">
                                </div>
                        </div>


                        <br>
                        <br>
                        <div class="form-group">
                            <label for="fullname">Full Name</label>
                            <div class="row">
                                <div class="col-sm-4">
                                <input type="text" class="form-control" placeholder="First Name"    name="fname">
                                </div>
                                <div class="col-sm-4">                                  
                                <input type="text" class="form-control" placeholder="Middle Name"   name="mname">
                                </div>
                                <div class="col-sm-4">
                                <input type="text" class="form-control" placeholder="Last Name"     name="lname">
                                </div>
                            </div>
                        </div><!--___________FORM GROUP_____________-->

                            <div class="form-group">
                            <div class="row">
                                <div class="col-sm-4">
                                    <label for="sel1">Type:</label>                                     
                                    <select class="form-control" name="agentType" id="sel1">
                                        <option value="1">Broker</option>
                                        <option value="2">Agent</option>
                                        <option value="3">Sub-Agent</option>
                                    </select> 
                                </div>

                                <div class="col-sm-4">
                                    <label for="sel1">Project:</label>                                      
                                    <select class="form-control" id="sel1">
                                        <option>Mezza</option>
                                            <option>Tivoli Gardens</option>
                                        <option>Verawoods Residences</option>
                                    </select> 
                                </div>
                            </div>
                            </div>

                            <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6">
                                <label for="email">Email Address</label>
                                <input type="email" class="form-control" name="email"   id="email">
                            </div>
                            <div class="col-sm-4">
                                <label for="contact">Contact Number</label>
                                <input type="text" class="form-control" name="contact" id="contact">
                            </div>
                            </div>
                            </div>

                            <div class="form-group">
                            <div class="row">
                            <div class="col-sm-12">
                                <label for="homeAdd">Home Address</label>
                                <input type="text" class="form-control" name="homeAdd" id="homeAdd">
                            </div>
                            </div>
                            </div>


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

             <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"> Close</button>
            <button type="button" class="btn btn-primary">                      Save changes</button>
         </div>
         </div>

Answer 1

在用户点击 LOAD 后隐藏您希望用户编辑的所有元素怎么样？按钮？

一旦用户输入 agent Id并点击Load ，您可以将该信息作为 AJAX 传递请求并获取详细信息:JSON来自PHP 。从客户端，您可以循环访问 JSON并更新字段

一旦您收到 JSON ，使用$.each() jQuery 函数循环遍历它并更新值并显示所有元素

注意:为了方便更新，请提供 element ID您的输入框作为您的 json 键，以便您可以轻松映射和更新值。

$.ajax({
   url: 'your PHP path',
   data: {
      agentId: input_your_agent_id
   },
   type: 'GET',
   success: function(data) {
    //Here get the response as JSON
      $.each(data,function(key,value){
        //Here based on the values you recieve as JSON, you have to update the values
     });
   },
   error: function() {
      $('#info').html('<p>An error has occurred</p>');
   },

});