CODEWITHSUNDEEP
javascripthtml
Nathan
Nathan

Reputation: 21

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.

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

Upvotes: 1

Views: 1110

Answers (2)

NonameSL
NonameSL

Reputation: 1475

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:

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44105

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.

Upvotes: 0

Related Questions