单击按钮可使表单域可编辑

时间:2013-08-22 16:51:07

标签: php jquery html

我想知道如何在PHP中按钮单击时显示表单字段可编辑。我的视图文件的一部分:

<?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>

在页面加载字段中应为disabled

如果用户点击“编辑”按钮,则隐藏字段应转为可编辑。

2 个答案:

答案 0 :(得分:2)

您可以使用jquery将disabled属性设置为false

jQuery("input[name=edit]").click(function(){
   jQuery("input[name=email],input[name=description]").attr("disabled",false);
});

input[name=email]选择电子邮件输入字段

input[name=description]选择说明输入字段

答案 1 :(得分:1)

模拟表格

<form>
    <input id="inp" type="text" disabled>
    <input id="edit" type="button" value="Edit">
</form>

<强>的Javascript

var el = document.getElementById('edit');
el.addEventListener('click', function(){
    document.getElementById('inp').disabled = false;
});

<强> DEMO

但是,为了便于使用,我建议:

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
});

编辑: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
});

<强> Another Demo