javascript - 文本区域的输入清除按钮

Question

更新有效的内容和当前的问题:

每个字段旁边都有 1 个清除按钮。每个清除按钮都有效。问题是清除这两个字段后，当从下拉列表中选择另一个文件时，它仅使用文件名填充文本字段，并且在刷新页面之前不会显示第二个文本区域中的内容。

<input type="hidden" name="Action" value="EDIT" /><input type="hidden" name="Selection"  id="Selection" value="-1"><div><font color=#2F6054>Below is the list of your saved codes. To view or delete your codes, select it from the list.</font></font></div><p>
<select size="1" name="CodeList" id="CodeList">
<?php
   $directory = $directory = 'users/' . $_SESSION['username'];
   $filesContents = Array();
   $files = scandir( $directory ) ;

   foreach( $files as $file )
 {
   if ( ! is_dir( $file ) )
 {
   $filesContents[$file] = file_get_contents($directory , $file);
   echo "<option>" . $file . "</option>";
 }
 }
 ?>
</select><p>
        <font color=#2F6054><font size=4>Enter Codes Here</font></font>
        <form method="post" action="/evo/avsaveprocess.php">

            <input type="hidden" name="Action" value="SAVE" />
            <input type="hidden" name="CodeId" id="CodeId" value="0" />
            <table width="100%">
                <tr>
                    <td>Description:</td>
                    <td><input type="text" name="CodeDescription" size="40" maxlength="50" id="CodeName" value="" /></td>
                    <td><button type="reset" class="clear-tn" value="Clear"></button></td>
                </tr>
                <tr>
                    <td valign="top">Code:</td>
                    <td>
                        <textarea rows="10" style="width:99%" name="Code" id="CodeValue"></textarea>
                    </td>
                </tr>
            </table>
            <input type="submit" value="Save" />

函数代码:

<script>
 $(function(){
  $('.clear-btn').on('click',function(e){
    e.preventDefault(); 
    $(this).closest('tr').find('input[type="text"],textarea').val('');
   });
});
</script>

编辑以显示当前工作代码

编辑以在下拉列表的表单底部显示更改脚本

<script>
$(document).ready(function(){
// apply a change event
$('#CodeList').change(function() {
  // update input box with the currently selected value
    $('#CodeName').val($(this).val());
    $.get( '<? echo $directory ?>' + '/' + $('#CodeName').val(), function( data ) {
        $( "#CodeValue" ).val( data );
    });
  });
 });
</script>

Answer 1

您可以尝试下面的链接，它无需 JavaScript 或 jquery 即可工作。只是简单的 HTML

<form>
     <input type="reset" />
     <input type="submit" />
     <input type="text" />
   <textarea></textarea>
</form>

这是demo