Disable Input forms until data are loaded

Question

How do I disable some part of my form? I'm trying to create an Update Agent on my system. Initially, the only fields that the user can type into is the Agent ID. When the user hits the LOAD button, it should load all the necessary data on the disabled fields and also make them editable. How do I do that with 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>

you can hide them initially and when a person click on load more then you can show them using jquery . and if you wants to fill data also then you nedd ajax and you can fetch the data with html form and append it into your html — shubham715, Feb 24 '16 at 04:46
Possible duplicate of [How do you disable browser Autocomplete on web form field / input tag?](http://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag) — Rahul, Feb 24 '16 at 04:46

score 0 · Answer 1 · answered Feb 24 '16 at 05:05

How about you hide all the elements which you want the user to edit after the user hits the LOAD button?

Once you user enters agent Id and clicks on Load, you may pass that info as a AJAX request and get the details as JSON from PHP. From client end, you can just loop through the JSON and update the fields

Once you recieve the JSON, use $.each() function of jQuery to loop through it and update the values and display all the elements

NOTE: For your convenience in updating, give the element ID of your input boxes as your json key,so that you can easily map and update the values.

$.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>');
   },

});

score 0 · Answer 2 · answered Feb 24 '16 at 05:12

This can Be done in a few different ways. Here is 2 that i know of

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


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

After your AJAX call, easily re-enable it with

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

Alternatly, you can disable all with CSS, input[type="text"]:disabled Then re-enable with Javascript

Disable Input forms until data are loaded

2 Answers2