Loading .txt file into textarea Javascript?

Question

I was trying to get the text file into textarea. The result is "http://mywebsite.com/textfile/(txtinput).txt and the text file doesn't load into textarea.

<html>
   <head>
      <title>textbox</title>
      <script type="text/javascript">
         function readBOX() {
            var txtinput = document.getElementById('txtinput').value;
            document.forms[0].text.value = ("http://mywebsite.com/textfile/") + txtinput +(".txt");
         }
      </script>
   </head>
   <body>
      <p> Type</p>
      <input type="text" id="txtinput" />
      <input id="open" type="button" value="READ" onClick="readBOX()" />
      <form>
         <textarea name="text" rows="20" cols="70">loaded text here</textarea>
      </form>
   </body>
</html>

See AJAX - en.wikipedia.org/wiki/Ajax_(programming)

Phil
– Phil

2013-09-26 06:02:10 +00:00
Commented Sep 26, 2013 at 6:02 — Phil
– Phil, Commented Sep 26, 2013 at 6:02
You need to get it using XMLHttpRequest.

Joe Simmons
– Joe Simmons

2013-09-26 06:05:54 +00:00
Commented Sep 26, 2013 at 6:05 — Joe Simmons
– Joe Simmons, Commented Sep 26, 2013 at 6:05

Community · Accepted Answer · 2017-05-23 12:16:58Z

11

You have to use something like its posted in this Answer

jQuery

$(document).ready(function() {
   $("#open").click(function() {
       $.ajax({
           url : "helloworld.txt",
           dataType: "text",
           success : function (data) {
               $("#text").text(data);
           }
       });
   });
});

Read more on the jQuery Documentation of .ajax()

Non jQuery

I you do not want to use jQuery you have to use the XMLHttpRequest-Object something like that:

var xmlhttp, text;
xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', 'http://www.example.com/file.txt', false);
xmlhttp.send();
text = xmlhttp.responseText;

But this can be read on the SO-Answer here or the complete and understandable documentation on Wikipedia

Note: But this is not cross browser compatible, for older IE version you have to use the ActiveXObject("Microsoft.XMLHTTP") object

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Sep 26, 2013 at 6:05

Martin

3,3461 gold badge29 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Martin Over a year ago

Please do not downvote without comment. Additional information about fileaccess from JS can be found on this page

Joe Simmons Over a year ago

I downvote people who answer with jQuery when the asker wasn't using jQuery. It's true he needs to look into ajax, but I dislike suggesting jQuery solely for that.

Martin Over a year ago

Then write in you question that you do not want to use jQuery. I think the jQuery way is the most common and the first approach.

Joe Simmons Over a year ago

I disagree. I think jQuery is only acceptable if you're already using it, or planning to. And I think you should only recommend it when you know the asker is using it.

Reto Gmür Over a year ago

using $("#text").val(data) instead of $("#text").text(data) has the advanatge that the text is set even if the user already modified the text in the textarea.

|

Gwa Si · Accepted Answer · 2013-10-23 22:27:53Z

4

Thanks everyone. Javascript didn't work for me. I changed to PHP and it's working very well.

<!DOCTYPE HTML>
<html>
   <head>
      <title>textbox</title>
   </head>
   <body>
<form action="process.php" method="post">
      <input type="text" name="name" />
      <input type="submit" />
</form>
   </body>
</html>

Process.php

<textarea name="text" rows="20" cols="70"> 
<?php $name =  $_POST["name"]; echo file_get_contents("$name");?>
</textarea>

edited Oct 23, 2013 at 22:27

answered Oct 23, 2013 at 22:18

Gwa Si

3351 gold badge3 silver badges13 bronze badges

Comments

Sha1962 Development · Accepted Answer · 2016-02-02 08:25:05Z

3

This is how I load text into a textarea

Main.css

.textbox{
         font-size: 12px;
         float  : left;
         height : 197px;
         width : 650px; }


Default.html

<!DOCTYPE html>
<html> 
    <head>
        <!-- Charactor set allowed to use -->
        <meta charset="utf-8"/>

        <title>Text from .txt file to TextArea</title>

        <!-- External stylesheet -->
        <link rel="stylesheet" href="main.css" />

        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

    </head>
    <body>
       <textarea class="textbox" id="Brief" readonly></textarea>

       <script> $( "#Brief" ).load( "text.txt" ); </script>
    </body> 
</html>

google textarea to find format of text area

edited Feb 2, 2016 at 8:25

answered Feb 2, 2016 at 7:54

Sha1962 Development

313 bronze badges

Comments

Frederik.L · Accepted Answer · 2013-09-26 16:55:50Z

One of the easiest way is to request the server to return the pre-filled textarea (Here's an example using PHP):

<textarea name="text" rows="20" cols="70">
<?php
echo file_get_contents('yourFile.txt');
?>
</textarea>

Note: Something similar can be done with any server-side scripting language.

In the meantime, if you need to load it dynamically, your best bet is using an AJAX approach. Choose which approach is the best for you to code and maintain. While jQuery is a popular approach, you are free to use anything you feel confortable with and probably want to know about XmlHttpRequest first.

Dynamic AJAX requests with Pure JavaScript can be tricky so make sure that your solution is cross-browser. A common mistake is using XmlHtpRequest directly and failing to make it compatible with older IE versions, which leads to random bugs depending on which browser / version you use. For example, it could look like this (would need to be tested on all targeted browser so you can add fallbacks if needed):

Pure JS:

if (typeof XMLHttpRequest === "undefined") {
    XMLHttpRequest = function () {
        try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
        catch (e) {}
        try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
        catch (e) {}
        try { return new ActiveXObject("Microsoft.XMLHTTP"); }
        catch (e) {}
        throw new Error("This browser does not support XMLHttpRequest.");
    };
}

function readBOX() {
    function reqListener () {
        document.forms[0].text.value = this.responseText;
    }

    var txtinput = document.getElementById("txtinput").value;
    var filePath = "http://mywebsite.com/textfile/" + txtinput + ".txt";

    var oReq = new XMLHttpRequest();
    oReq.onload = reqListener;
    oReq.open("get", filePath, true);
    oReq.send();
}

But if you don't mind to sacrifice some performances to ensure maximum support, you should use jQuery's implementation:

jQuery:

function readBOX() {
    var txtinput = document.getElementById("txtinput").value;
    var filePath = "http://mywebsite.com/textfile/" + txtinput + ".txt";

    $.ajax({
        url: filePath
    }).done(function(data){
        document.forms[0].text.value = data;
    });
}

Note: jQuery's library is kind of huge, but keep in mind that if you include it directly from google servers, your user more likely has it already in cache.

Hope this helps :)

Do we still have to go through ActiveXObject hell? Aren't all modern browser support XMLHttpRequest?
For older IE versions on XP and prior, I'm afraid so. On modern browsers that is not any concern.

RedDragonWebDesign · Accepted Answer · 2021-02-05 23:51:26Z

0

window.addEventListener('DOMContentLoaded', (e) => {
    let input = document.getElementById('input');
    
    // load default.txt into input box
    try {
        let fileToLoad = './default.txt';
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open('GET', fileToLoad, false);
        xmlhttp.send();
        input.innerHTML = xmlhttp.responseText;
    } catch(DOMException) {
        input.innerHTML = "Error loading file. Maybe related to filepath or CORS?";
    }
});

edited Feb 5, 2021 at 23:51

answered Feb 5, 2021 at 21:24

RedDragonWebDesign

2,7672 gold badges27 silver badges26 bronze badges

Collectives™ on Stack Overflow

Loading .txt file into textarea Javascript?

5 Answers 5

jQuery

Non jQuery

11 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

jQuery

Non jQuery

11 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related