[英]Make form fields editable on button click
I want to know how to show form field editable on button click in PHP. 我想知道如何在PHP中单击按钮时显示可编辑的表单字段。 Part of my view file:
我的视图文件的一部分:
<?php echo Form::label("email", "Email"); ?>
<?php echo Form::input("email", $userdetails->email,array('disabled' => 'disabled')); ?>
<br/>
<?php echo Form::label("description", "Description"); ?>
<?php echo Form::textarea("description", $userdetails->description,array('disabled' => 'disabled')); ?>
<br/>
<?php echo Form::submit("submit", "Submit"); ?>
<?php echo Form::close(); ?>
<a href="../index"><input type="button" name="edit" value="Edit" ></a>
In the page load field should be disabled
. 在页面加载字段中应
disabled
。
If the user clicks the Edit button the hidden field should turn to editable. 如果用户单击“编辑”按钮,则隐藏字段应变为“可编辑”。
You can use jquery to set the disabled
attribute to false 您可以使用jquery将
disabled
属性设置为false
jQuery("input[name=edit]").click(function(){
jQuery("input[name=email],input[name=description]").attr("disabled",false);
});
input[name=email]
selects the email input field input[name=email]
选择电子邮件输入字段
input[name=description]
selects the description input field input[name=description]
选择描述输入字段
Mock Form 模拟形式
<form>
<input id="inp" type="text" disabled>
<input id="edit" type="button" value="Edit">
</form>
Javascript Java脚本
var el = document.getElementById('edit');
el.addEventListener('click', function(){
document.getElementById('inp').disabled = false;
});
For usability sake, however, I suggest this: 但是出于可用性考虑,我建议这样做:
var el = document.getElementById('edit');
var inp = document.getElementById('inp');
el.addEventListener('click', function(){
inp.disabled = false;
inp.focus(); // set the focus on the editable field
});
Edited: OP commented that several elements will need to be enabled on click. 编辑:OP评论说,单击时需要启用几个元素。
var el = document.getElementById('edit');
var frm = document.getElementById('myform');
el.addEventListener('click', function(){
for(var i=0; i < frm.length; i++) {
frm.elements[i].disabled = false;
}
frm.elements[0].focus(); // put focus on the first element
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.