Question

如何停用表单的某些部分？我正在尝试在我的系统上创建Update Agent。最初，用户可以键入的唯一字段是Agent 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后，使用jQuery的$.each()函数循环遍历它并更新值并显示所有元素

注意：为了方便您进行更新，请将输入框的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>');
   },

});

Answer 2

这可以通过几种不同的方式完成。这是我知道的2

HTML
<input type="text" id="yourInputId" name="yourInputName" disabled>


Javascript
 document.getElementById("yourInputId").disabled = true;

在您调用AJAX后，可以使用

轻松重新启用它

  document.getElementById("yourInputId").disabled = false;

另外，您可以使用CSS禁用所有内容，input[type="text"]:disabled然后使用Javascript重新启用

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

2 个答案: