CODEWITHSUNDEEP
phpjqueryhtmlfile-io
Robert Ettinger
Robert Ettinger

Reputation: 329

Jquery populate textarea from dropdown list

I have created a form where users can submit data that saves as .txt files in a user folder. Then there is a dropdown on the same page that displays the file names they can select later. I am trying to populate two fields with the file name in one, and the file contents in another.

Using jQuery i can now populate the first textfield with the file name based on the selection, but cannot figure out how to display the file contents in the second text area.

jQuery code to populate the first textbox based on selection:

<script>
  $(document).ready(function(){
    // apply a change event
    $('#CodeList').change(function() {
      // update input box with the currently selected value
        $('#CodeName').val($(this).val());
  });
 });
</script>

PHP and HTML running the form:

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

Upvotes: 1

Views: 855

Answers (2)

barbarity
barbarity

Reputation: 2488

Have you tried? $.get( "DIRECTORY/FILE.EXT" );

<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 );
        });
  });
 });
</script>

I don't know if it works, please let me know the behaviour and we'll try to fix if there is a problem.

Upvotes: 2

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

You need to do file operations for this and you cannot directly write $('#CodeName').val($(this).val());

There is a HTML5 API of interest.

The File APIwhich allows you to read files (of a users choice). Most modern browsers implement this.

I presume you can also use IE only ActiveXcontrols to do file manipulation on windows, only if it's relevant to you.

Source

Upvotes: 0

Related Questions