Input Clear Button for Textareas

Question

Updating what has worked and the current issue:

I have 1 clear button beside each field. Each clear button works. The problem is after clearing both fields, when selecting another file from the dropdown, it only populates the text field with the file name and does not display the contents in the second textarea until refreshing the page.

<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" />

function code:

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

Edited to show current working code

Editing to show on change script at the bottom of my form for the dropdown

<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

Change type attribute "button" to "reset".

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

Try below working fiddle as per your requirement.

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

Answer 2

You can try the below link, it works without javascript or jquery. Just simple HTML

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

Here is the demo