Geek Answers Handbook

Loading .txt file in textarea javascript?

I tried to get a text file in textarea. The result is " http://mywebsite.com/textfile/(txtinput).txt , and the text file does not load into the text box.

<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>
+7
javascript html
source share
4 answers

Thanks to everyone. Javascript did not work for me. I switched to PHP and it works 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>
+1
source share

You should use something like your published in this answer

JQuery

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

More on jQuery Documentation .ajax ()

Not jQuery

I don't want to use jQuery, you need to use XMLHttpRequest -Object something like this:

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

But it can be read on the SO-Answer here or the full and understandable documentation on Wikipedia

Note. But this is not browser compatible, for an older version of IE you need to use an ActiveXObject("Microsoft.XMLHTTP")

+12
source share

One of the easiest ways is to ask the server to return a pre-filled text area (Here is an example of 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, it is best to use AJAX . Choose which approach is best for coding and support. While jQuery is a popular approach, you can use whatever is convenient for you, and you might first want to learn about XmlHttpRequest .

AJAX dynamic requests with Pure JavaScript can be tricky, so make sure your solution is cross-browser. A common mistake is to use XmlHtpRequest directly and the inability to make it compatible with older versions of IE, which leads to random errors depending on which browser / version you are using. For example, it might look like this (you will need to test it on all target browsers to add backups if necessary):

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 sacrificing some actions in order to provide maximum support, you should use jQuery 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. The jQuery library is very large, but keep in mind that if you enable it directly from google servers, your user most likely already has it in the cache.

Hope this helps :)

+1
source share

This is how I load text into the text area

 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 search for text area format

+1
source share

More articles:


All Articles