如何在单击“提交”按钮后使文本区域和 IMG 标签只读

how to make text area and img tags read only after clicking submit button

本文关键字：区域 文本 IMG 只读 标签 按钮 单击 提交      更新时间：2023-09-26
<form method="post" enctype="multipart/form-data" action="">
<div class="prp_div">   
<div id="img_div1"> 
<?php
include_once('config.php');

$disp=mysql_query("select * from pop") ;
$out = mysql_fetch_array($disp);
?>
<img src="<?php echo $out[3];?>" style="width:100%; height:100%" />
</div>

<div id="comment_left">
<b>Graphic Text:</b><br/>
<textarea rows="4" cols="50" id="gtext" name="gtext" placeholder="Enter Graphic Text..." class="input" >
<?php echo $out['gtext']; ?>
</textarea><br/>

<b>Caption:</b><br/>
<textarea rows="4" cols="50" id="caption" name="caption" placeholder="Enter Caption..." class="input">
 <?php echo $out['caption']; ?>
</textarea>

<input type="file" name="file">
<input type="submit" name="submit" value="save">

我有一个表单，其中包含一个div 中的图像标签和两个文本区域。输入数据并按提交按钮后，我希望这些字段是只读的。谁能帮我完成这项任务。

使用PHP变量。

<?php
    $isSubmitted = false;
   if (!empty($_POST))//checks request
        $isSubmitted = true;
?>
<!--on your textarea-->
<textarea rows="4" cols="50" id="caption" name="caption" placeholder="Enter Caption..." class="input" 
<?php
    echo $isSubmitted== true? 'disabled' : '' //add 'disabled' tag in element if isSubmitted is true
 ?>
><?php echo $out['caption']; ?></textarea>

抱歉，如果我的代码有点脏。

编辑

仅此一项就可能起作用。

<!--on your textarea-->
<textarea rows="4" cols="50" id="caption" name="caption" placeholder="Enter Caption..." class="input" 
<?php
    echo !empty($out['caption'])? 'disabled' : '' //add 'disabled' tag in element if $out['caption'] is not empty
 ?>
><?php echo $out['caption']; ?></textarea>

这将按钮：

<button onclick = "disableFields()" type="submit" name="submit" value="SAVE"> </button>

这将是你的javascript：

   function disableFields(){
   document.getElementById('gtext').disable;
   document.getElementById('caption').disable;
 }

试试这个....

<input type="button" class="buttonclass" name="submit" value="save">  
    $(".buttonclass").click(function(){
    $(".input").attr('readonly', true);
    });

一种更人性化的方式：

$(".buttonclass").click(function(){
    $(".input").attr('disabled', true);
    });

你可以按照以下方式做到这一点

<form method="post" enctype="multipart/form-data" action="" onSubmit="makeReadOnly();">
 ......
 ......
 ......
</form>
<script>
function makeReadOnly()
{
   $('#gtext').attr('readOnly', true);
   $('#caption').attr('readOnly', true);
}
</script>

对您想要的元素使用禁用功能。我的建议是给这些特定元素提供一个像"toReadOnly"这样的类名，然后getElementsByClassName并禁用这些元素。

<script>
function onyourRequirement()
{
var elements = document.getElementsByClassName("toReadOnly")
for(element : elements)
      element.disable
}
</script>

<form method="post" enctype="multipart/form-data" action="" onSubmit="dsiableAllInputs();">

在提交表单时调用以下代码

function dsiableAllInputs(){
    jQuery(":input").prop('disabled', true);
    jQuery(":textarea").prop('disabled', true);
}

我的错，使用这个

    <form action="demo_form.asp" onsubmit="myFunction()">
     <textarea rows="4" cols="50" id="gtext" name="gtext"  
           placeholder="Enter Graphic Text..." class="input" >
              aaass
     </textarea><br/>
      <textarea rows="4" cols="50" id="caption" name="caption" 
         placeholder="Enter Caption..." class="input"> </textarea>
       <input type="submit" value="Submit">
     </form>
     <script>
      function myFunction() {
        alert("The form was submitted");
        document.getElementById('gtext').disabled = true;
        document.getElementById('caption').disabled = true;
         }
      </script>
相关文章：