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

Answer 2

将类型属性“按钮”更改为“重置”。

<button type="reset" class="clear-btn">Clear</button>

根据您的要求尝试以下工作小提琴。

http://fiddle.jshell.net/t7gkr8rk/1/

为Textareas输入清除按钮

2 个答案: