0

I create a textarea and then I want, with Javascript or what I need, to fill the textarea with a content of a file, when I clicked a button.

How can I do that, or what do I need?

Koen Hollander
  • 1,687
  • 6
  • 27
  • 42
Noel007
  • 13
  • 4
  • 3
    Welcome, to improve your experience on SO please read how to ask an [On Topic question](https://stackoverflow.com/help/on-topic), and the [Question Check list](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) and [the perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) and how to create a [Minimal, Complete and Verifiable Example](http://stackoverflow.com/help/mcve) and [TAKE THE TOUR](http://stackoverflow.com/tour) **We are very willing to help you fix your code, but we dont write it for you** – RiggsFolly Oct 11 '18 at 11:02
  • 3
    Make an ajax call, read the file with php, send it back to Jquery (or vanilla), change the content of textarea with the data received. What have you done for the moment ? – Jules R Oct 11 '18 at 11:03

2 Answers2

1

Is the text already loaded into the page and held in a Javascript variable? If not, as other have suggested then an AJAX call may be required to retrieve this data.

Changing the value of a textarea can be done with some simple javascript as below;

<textarea id="textarea"></textarea>

<input type="button" onclick="changeText()" value="button" />

<script>
function changeText() {
  var textarea = document.getElementById('textarea');
  textarea.value = "new Value";
}
</script>

If instead we're retrieving a file without jQuery the function can be as below;

function changeText() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'request_page.php');
    xhr.send(null);

    xhr.onreadystatechange = function () {
        var status = 4;
        var http_code = 200;
        if (xhr.readyState === status) {
            if (xhr.status === http_code)  {
                var textarea = document.getElementById('textarea');
                textarea.value = xhr.responseText;
            } else {
                // do something with an error here
            }
        } 
    }
};
Absorbing
  • 95
  • 7
  • How is this getting the contents of a file from the server into the text area? – RiggsFolly Oct 11 '18 at 11:21
  • @RiggsFolly Fixed my response. – Absorbing Oct 11 '18 at 11:24
  • First of all thanks for your help. But how i have to do it, when my page is located: "/html/...php" and the file i want to fill "/doc/file.log" – Noel007 Oct 11 '18 at 11:39
  • @Noel007 You can provide a full path to xhr.open() to correctly open your file. – Absorbing Oct 11 '18 at 11:42
  • Okay I did it, now when I open my page, and click, I get to "// do somtehing with an error here" how can I fix that? – Noel007 Oct 11 '18 at 11:47
  • @MagnusEriksson Thanks, I quickly put it together. I've edited it now with your suggestion. – Absorbing Oct 11 '18 at 11:59
  • Another thing to point out is that this will only work if the file you want to read is under the document root (and you need to enter the URI to that file (from the document root), and not the full file system path. – M. Eriksson Oct 11 '18 at 12:02
  • Can I use it also with a dropdownmenu? EDIT: the file.log cant get with a URL only per full file system path – Noel007 Oct 11 '18 at 12:03
0

Sounds like a job for an ajax call. Javascript can call a page on the server that can open a file, read its contents and return in a json string containing the contents of the file, which the javascript then puts into the textarea

Load text from local .txt file into html textarea using JavaScript

noid
  • 106
  • 6