表单提交后如何在html中使文本字段不可编辑

Posted 2023-03-05

【中文标题】表单提交后如何在html中使文本字段不可编辑

【英文标题】：how to make text field non editable in html after form submit

【发布时间】：2019-03-26 12:29:44

【问题描述】：

在提交表单之前提交的文本将是可编辑的，在提交表单之后它将是不可编辑的？

<div class="container">
  <form method="POST" name="requests" id="signup">
    <input type="text" id="txtTitle" name="txtTitle" placeholder="Enter Your Description" required="" value="<?php if (isset($_POST['txtTitle']))  echo $_POST['txtTitle'];?>" >
    <button type="submit" value='Submit'  class="sendButton" name="submit" id='submitme'>Submit</button>
  </form>
</div>

【问题讨论】：

在表单的submit 事件处理程序中将readonly 属性设置为true。如果您需要更具体的帮助，请将您自己尝试过的代码添加到问题中

How do I make a text input non-editable?的可能重复

感谢您的回复，但之前提交的输入在提交表单后是可编辑的。

@bhavani，提问前你可以先在***中搜索，这样你会得到更多相关的答案，你会得到更多的好处。

html form readonly SELECT tag/input的可能重复

【参考方案1】：

只需使用readonly。

<div class="container">
  <form method="POST" name="requests" id="signup">
    <input type="text" id="txtTitle" name="txtTitle" placeholder="Enter Your Description" required="" value="<?php if (isset($_POST['txtTitle']))  echo $_POST['txtTitle'];?>" <?php echo isset($_POST['txtTitle']) ? "readonly" : "" ?> >
    <button type="submit" value='Submit'  class="sendButton" name="submit" id='submitme'>Submit</button>
  </form>
</div>

【讨论】：

OP 明确询问如何提交表单时，而不是纯 HTML。

【参考方案2】：

试试这个：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <form method="POST" name="requests" id="signup">
  <input type="hidden" value="yes" name="send">
    <input type="text" id="txtTitle" name="txtTitle" placeholder="Enter Your Description" required="" value="<?php if (isset($_POST['txtTitle']))  echo $_POST['txtTitle'];?>" <?php echo isset($_POST['txtTitle']) ? "readonly" : "" ?> >
    <button type="submit" value='Submit'  class="sendButton" name="submit" id='submitme'>Submit</button>
  </form>
</div>

<script type="application/javascript">
$(document).ready(function()
 <?
 //
 echo "var send='". $_POST['send']."';";
 ?>
 if(send=="yes")
 $('#txtTitle').attr('disabled','disabled');
 ;


);

</script>

【讨论】：

我在您的表单中添加了隐藏输入。当用户提交表单时，重新加载页面脚本检查隐藏字段的值是否等于“是”然后禁用或没有 txtTitle。