Clear Text Box on Selection and Delete Button appear on Selection

Question

I have a form that users use to save information to text files, then a drop-down list that pulls the names of their files and displays that information back into the text fields, however I am trying to figure out how I can clear the text fields when selecting one value. I have an < option value="0" >(Add New Code) aside from my php that is simply as a placeholder so they can use the form to save data. What I am trying to figure out is how to clear the text-boxes whenever they select that particular drop down. I would also like to add a delete button that appears whenever a file selection is made from the drop-down list. Below is my relevant coding.

thank you for the help on the display issue and css button am trying to figure out now the php script for the delete button to delete the currently selected file.

<input type="hidden" name="Action" value="EDIT" /><input type="hidden" name="Selection"  id="Selection" value="-1"><div>Below is the list of your saved codes. To edit your codes, select it from the list.</div>
<select size="1" name="CodeList" id="CodeList" onchange="CodeChange();"><option value="0">(Add New Code)</option>
<?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>
        <h3>Saved Codes</h3>
        <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%" border="0">
                <tr>
                    <td>Description:</td>
                    <td><input type="text" name="CodeDescription" size="40" maxlength="50" id="CodeName" value="" /></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" />
            </form>
<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" ).text( data );
    });
  });
 });

score 1 · Accepted Answer · edited May 23 '17 at 11:50

< option value="0" >(Add New Code)< /option >

I do not understand the purpose of value="0"

When an <option> is selected you retrieve the .selectedIndex from the <select id="id">

Then you use the selectedIndex to access the selected option with .options[selectedIndex].text

I do not do jQuery, but you can easily translate.

I am assuming you want to clear or change the option text.

This is the code to clear text in a Select Option:
add text to the empty string to change text value.

var ndx = document.getElementById('id').selectedIndex;

document.getElementById('id').options[ndx].text='';

jQuery (not mine)

(from get index of selected option with jQuery)

$("#id option:selected").index()

(from jQuery get specific option tag text)

$("#id[ndx]").text();

Delete Button HTML:

<button  type="button" id="b1" class="hide">Delete</button>

Delete Button CSS:

.hide{display:none;}

Delete Button JS

document.getElementById('b1').style.display='block';

This worked:

<!DOCTYPE html>
<html lang="en"><head><title>Unhide Delete</title>
<style type="text/css">
.hide{display:none;}
</style></head><body>
<button  type="button" id="b1" class="hide">Delete</button>
<script type="text/javascript">
//<![CDATA[
document.getElementById('b1').style.display='block';
//]]>
</script></body></html>

This one toggles the Delete Button

<!DOCTYPE html>
<html lang="en"><head><title>Unhide Delete</title>
<style type="text/css">
.hide{display:none;}
</style></head><body>
<button  type="button"  onclick="hideShow()">Show Hide Delete</button><br/> <br/>
<button  type="button" id="b1" class="hide">Delete</button>
<script type="text/javascript">
//<![CDATA[
var toggle = new Array();
toggle['none'] = 'block';
toggle['block'] = 'none';
var del = document.getElementById('b1');
del.style.display='block';
function hideShow(){
del.style.display=toggle[del.style.display];
}
//]]>
</script></body></html>

My version of your page:

And I filtered the files to include only those with an extension of .php for my testing
if(pathinfo($file,PATHINFO_EXTENSION) == 'php' ){
Problems and solutions:
Contents of file could not be stored in variable.
Converted newlines to
preg_replace('/\n/','
',$contents);
converted < to < preg_replace('/</','<',$contents);
converted > to > preg_replace('/>/','>',$contents);');
Then when setting the text to the contents of the contents array the >,> and
had to be converted back to their original characters.
var temp = contents[ndx].replace(/</g,'<');
temp = temp.replace(/>/g,'>');
txt.value= temp.replace(/<br>/g,"\\n");
textarea needed to be resized to show contents
added scrollbars
CSS:overflow:scroll;
set to height of content
txt.style.height= txt.scrollHeight;
When content very large textarea was too big.
Limited textarea height to fit in Browser window.
var maxHeight = (window.innerHeight - txt.offsetTop) - 40;
var h = txt.scrollHeight;
if(h > maxHeight){h = maxHeight;}
txt.style.height = h + 'px';
The + 'px' is important
When smaller file followed lage file the text area height had to be reduced
txt.style.height = '100px';
First option need to be blank other wise first option could not easily be selected because there would be no change event.
Made first array element blank
\ncontents[0] = '';\n
set $ndx = 1 rather than zero
file needed directory for file_get_contents without adding directory to options
Changed comma to dot
file_get_contents($directory , $file);
file_get_contents($directory . $file);

Now I am fairly satisfied with this page:

<?php ob_start("ob_gzhandler");
header('Content-Type: text/html; charset=utf-8');
header('Connection: Keep-Alive');
header('Keep-Alive: timeout=5, max=100');
header('Cache-Control: max-age=120');
echo <<<EOT
<!DOCTYPE html>
<html lang="en"><head><title>Code</title>
<style type="text/css">
#CodeValue{width:50%;background:#eff; width:80%;font:400 1em "Courier New", Courier, monospace;overflow:scroll;} 
.btn{width:50%;margin:0 0 .5em 0;border-radius: 3px 3px 3px 3px;font: 700 1.2em Arial,Helvetica,Calibri,sans-serif;overflow: visible;border:1px solid #00f;color: #fff;padding: .1em;
background-image: -o-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -moz-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -webkit-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: -ms-linear-gradient(bottom, #2ef 0%, #02f 100%);
background-image: linear-gradient(to bottom, #2ef 0%, #02f 100%);}
</style>
</head><body>
EOT;
ob_flush();
$ndx = 1;
$js = "var contents=new Array();\ncontents[0] = '';\n";
$directory = 'users/';
$files = scandir($directory) ;
$options = "<option></option>\n";
foreach( $files as $file ){
  if ( !is_dir($file) ){

    if(pathinfo($file,PATHINFO_EXTENSION) == 'php' ){
      $options .= "<option>$file</option>\n";
      $contents = file_get_contents($directory . $file);
      $contents = preg_replace('/</','&lt;',$contents);
      $contents = preg_replace('/>/','&gt;',$contents);
      $contents = preg_replace('/\n/','<br>',$contents);
      $contents = addslashes( $contents);
      $js .= "contents[$ndx] = \"$contents\"\n";
      $ndx++;
    }
  }
}
echo <<<EOT
<input type="hidden" name="Action" value="EDIT" /><input type="hidden" name="Selection"  id="Selection" value="-1"><div>Below is the list of your saved codes. To edit your codes, select it from the list.</div>
<select size="1" name="CodeList" id="CodeList" onchange="CodeChange();">
$options
</select> 
<h3>Saved Codes</h3>
<form method="post" action="/evo/avsaveprocess.php"><div>
<input type="hidden" name="Action" value="SAVE" />
<input type="hidden" name="CodeId" id="CodeId" value="0" />
<label>Description:</label>
<input type="text" name="CodeDescription" size="40" maxlength="50" id="CodeName" value="" /><br/>
<textarea rows="10" name="Code" id="CodeValue" onload="resize()">
</textarea><br/>
<input class="btn" type="submit" value="Save" />
</div></form>
<script type="text/javascript">
//<![CDATA[
$js
sel = document.getElementById('CodeList');
txt = document.getElementById('CodeValue');
var maxHeight = (window.innerHeight - txt.offsetTop) - 40;
function CodeChange(){
txt.style.height =  '100px';
var ndx = sel.selectedIndex; 
var temp = contents[ndx].replace(/&lt;/g,'<');
temp = temp.replace(/&gt;/g,'>');
txt.value= temp.replace(/<br>/g,"\\n");
var h = txt.scrollHeight;
if(h > maxHeight){h = maxHeight;}
txt.style.height = h + 'px';
}
//]]>
</script></body></html>
EOT;
ob_end_flush();

thank you Misunderstood I forgot the .hide css and can work to figure that part out. The issue I'm having is more in the jquery to try and make the text areas empty when selecting the dropdown selection (Add New Code) which I've set to the option value = 0 — Robert Ettinger, Mar 10 '15 at 02:59
Yes, correct, when they select the other dropdown items they display properly pulled from the php, when they choose < option value="0" >(Add New Code)< /option > I want the text boxes to just be blank. — Robert Ettinger, Mar 10 '15 at 03:16
Thank you for the explanation. Basically, I was just trying to have an option where the fields would be blank so they could use the form to save data, and then look at the data when they selected it from the dropdown button. I suppose a simple jquery button to clear the form would work just fine and then I don't have to worry about that button. — Robert Ettinger, Mar 10 '15 at 03:31
Misunderstood I input the coding as you have it and the button shows and of course dissappears when I put in the .hide{display:none}; but when I put in the JS it says cannot read property of null and of course nothing happens on dropdown selection to make the delete button appear. Javascript i entered is — Robert Ettinger, Mar 10 '15 at 04:15
thanks misunderstood. It goes beneath it, which I missed. However since I believe the dropdown list loads and populates automatically, the delete button is always there, it never hides. Is there a way to make it hide until something is selected, or perhaps even hide the entire dropdown list (and the delete button subsequently) until the initial form is saved? — Robert Ettinger, Mar 10 '15 at 04:35
That is a perfect solution and will work, thank you misunderstood I really appreciate the help and didn't think about using a show/hide button. Awesome outside the box solution. — Robert Ettinger, Mar 10 '15 at 04:43