Question

我正在尝试使用按钮点击输入类型文本字段，但它无法正常工作。请尝试所有可能的建议

<html><body>
    <script>
    $(document).ready(function()
    {
     $('#btnEdit').click(function()
     {
       $("input[name='name']").removeAttr("readonly");  
     });

     });

     </script>
    <?php
    require_once ('connectdb.php');

    $sql = "SELECT * FROM general_information";
    $result = $dbhandle->query($sql);
    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {

    ?>
    <form>
    <input type = "text" name = "name" value = <?php echo $row["email"];?> readonly>
    <button class="btn btn-primary" id="btnEdit" > edit </button>
    <?php } } ?>
    </form>
    </body></html>

Answer 1

我在代码中看到了两个问题，

按钮正在提交表单并重新加载页面。使用preventDefault()覆盖表单提交。

使用prop代替removeAttr。

 $(document).ready(function(){

     $('#btnEdit').click(function(e){
       e.preventDefault();
      $("input[name='name']").prop("readonly", false);  
     });
 });

来自@cmorrissey评论的更新。

在文本框中，value属性

中缺少引号

<input type = "text" name = "name" value = "<?php echo $row["email"];?>" readonly>

Answer 2

您的按钮正在发布表单，因此重新加载页面，因此更改您的按钮并给它一个onclick事件函数，如onclick =“editInputField（）”：

<a href="#" class="btn btn-primary" role="button"  onclick="editInputField()">Edit</a>

输入输入和id：

<input type = "text" id = "name" name = "name" value = <?php echo $row["email"];?> readonly>

然后你的javascript函数使输入可编辑：

<script type="text/javascript">
function editInputField(){
   document.getElementById("name").readOnly = false;
}
</script>

修改

我注意到你使用jquery，即使问题是用javascript标记的。您的代码无法正常工作的原因与：

1：前面提到的按钮，所以将其改为：

<a href="#" class="btn btn-primary" id="btnEdit" role="button">Edit</a>

2：如何定位输入字段，请使用以下字段ID：

$("#fieldID").removeAttr("readonly");

Answer 3

您可以使用停用或 readOnly 属性。这里有两个例子。

<input type="text" id="name"  disabled="disabled" value="Example"/>
<input type="text" id="name2"  readonly="readonly" value="Example2"/>
<button onclick="myFunction()">Click me</button>

function myFunction() {

    document.getElementById("name").disabled = false;
    document.getElementById("name2").readOnly = false;

}

如何使用按钮编辑内容

3 个答案: