Pull text from a .txt file into value HTML
Pull text from a .txt file into <input> value HTML
I will give you the full story. I have just created a new web server (I am very new to all this!)
I have written a python script that outputs a discount code (which changes frequently) to a .txt file on the web server itself.
All I need is to take the contents of that .txt file and add it to my page <input value="HERE"> so I can have a button to copy the contents for the user.
<input value="HERE">
I have been looking around Javascript but wondering if I am looking in the wrong place with it being Client-Side.
I have tried embedding the text file, and although the value shows on the page, I am struggling to get it copied to clipboard. I seem to have the copy function nailed on an input box so having the value in there would be all I need.
This is what I have so far, effectively needing "TO BE COPIED" to be the value pulled from my .txt file:
function myFunction()
var copyText = document.getElementById("input2");
copyText.select();
document.execCommand("copy");
.btn
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
.btn:hover background: #eee;
.success color: green;
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" value="COPY BUTTON" onclick="myFunction()">COPY BUTTON</button>
<input type="text" value="TO BE COPIED" id="input2">
<form>
<input type="button" class="btn success" value="Go to Google" onclick="window.location.href='https://www.google.com'" />
</form>
<script src="test.js"></script>
</body>
</html>
Thank You
2 Answers
2
As far as I see it, you have two options:
One is using fetch (or jQuery's ajax if you use it on your website):
fetch
ajax
fetch("/file.txt")
.then(response => response.text())
.then(text => document.getElementById("input2").textContent = text);
The other option you have is reading the file on backend and transferring it as data to frontend, this depends on which framework, language and server you have for your backend, but you didn't specify any of those in your question.
This option could be better as it requires less requests which is better for performance, but it depends on what you need it for - if you'd rather render the file dynamically than inserting it from your server in the page, that's fine. But you do need to consider which one you want to use and why.
Read more:
Python was mentioned in the question.
– C.Champagne
Aug 21 at 11:55
@C.Champagne yes, but the sentence was
I have written a python script. They didn't say what language or framework they use for the backend. If OP would provide more information we could assist them better :)– NonameSL
Aug 21 at 12:25
I have written a python script
Here's how I would do it with jQuery:
$.ajax(
url: "file.txt",
dataType: "text",
success: function (data)
$("#input2").value(data);
);
This would pull the contents of file.txt and, if it can find the file, put the data into the value attribute of the element with ID of input2.
file.txt
value
input2
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Why aren't you generating the HTML document with Python and just inserting the contents of the file using a template language?
– Quentin
Aug 21 at 8:13