如何禁用表单的某些部分？我正在尝试在我的系统上创建一个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">×</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>
在
用户点击LOAD按钮后，隐藏您希望用户编辑的所有元素怎么样？
用户输入agent Id并单击Load后，您可以将该信息作为AJAX请求传递，并从PHP JSON获取详细信息。从客户端，您只需遍历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>');
},
});
这可以通过几种不同的方式完成。这是我所知道的 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重新启用