Pull text from a .txt file into <input> value HTML

Question

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.

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

Why aren't you generating the HTML document with Python and just inserting the contents of the file using a template language? — Quentin
– Quentin, Commented Aug 21, 2018 at 8:13

NonameSL · Accepted Answer · 2018-08-21 12:28:14Z

1

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("/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:

edited Aug 21, 2018 at 12:28

answered Aug 21, 2018 at 8:56

NonameSL

1,49514 silver badges28 bronze badges

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

2 Comments

C.Champagne Over a year ago

Python was mentioned in the question.

NonameSL Over a year ago

@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 :)

Jack Bashford · Accepted Answer · 2018-08-21 08:22:51Z

0

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.

answered Aug 21, 2018 at 8:22

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Collectives™ on Stack Overflow

Pull text from a .txt file into <input> value HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related