How can I download user input as a file in javascript?

Question

This is the code I already have.

 Username: <input type "text" id="inp" /> <p id="res"></p> Password: <input type "text" id="inp" /> <p id="res"></p> <a download="info.txt" id="downloadlink" style="display: none">Download</a> <button type="button">Download</button>

I would like it to download the two inputs username and password into a file and stop popup if possible

Answer 1

First, you shouldn't use duplicate id's in your HTML code, then try to attach an input event to your input's so every time you type inside one of them the value of href will be generated automatically constructing the link to your file with the typed data :

jQuery solution :

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function() { $('input').on('input', function() { var data = $('#inp1').val() + "\\n" + $('#inp2').val(); $('a#downloadlink').show().attr('href', 'data:application/octet-stream;charset=utf-8,' + encodeURI(data)); }); }); </script> </head> <body> Username: <input type "text" id="inp1" /> <p id="res1"></p> Password: <input type "text" id="inp2" /> <p id="res2"></p> <a href="" id="downloadlink" style="display: none">Download</a> </body> </html>

Answer 2

Please find the JS code:

function downloadFile() {
    var obj = {a: <INPUT_1>, b: <INPUT_2>};
    var filename = "download.json";
    var blob = new Blob([JSON.stringify(obj)], {type: 'text/plain'});
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, filename);
    } else{
        var e = document.createEvent('MouseEvents'),
        a = document.createElement('a');
        a.download = filename;
        a.href = window.URL.createObjectURL(blob);
        a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
        e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        a.dispatchEvent(e);
    }
}

HTML Code:

<input type="button" onclick="downloadFile();" value="Download">

Find the completed code below:


  
 
  
  
   
    
        <html>

    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script>
        function downloadFile() {
    var obj = {a: "<INPUT_1>", b: "<INPUT_2>"};
    var filename = "download.json";
    var blob = new Blob([JSON.stringify(obj)], {type: 'text/plain'});
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, filename);
    } else{
        var e = document.createEvent('MouseEvents'),
        a = document.createElement('a');
        a.download = filename;
        a.href = window.URL.createObjectURL(blob);
        a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
        e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        a.dispatchEvent(e);
    }
}
      </script>
    </head>

    <body>
      Username: <input type "text" id="inp1" />
      <p id="res1"></p>

      Password: <input type "text" id="inp2" />
      <p id="res2"></p>

      <input type="button" onclick="downloadFile();" value="Download">
    </body>

    </html>

Answer 3

this is the end result thanks for your help

<head>

    <title> test </title>

    
    
    
    <script type='text/javascript'>
    window.onload=function(){
    (function () {
    var textFile = null,
    makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});
    if (textFile !== null) {
    window.URL.revokeObjectURL(textFile);
    }
    textFile = window.URL.createObjectURL(data);
    return textFile;
    };
    
    var create = document.getElementById('create'),
    email = document.getElementById('email');
    var create = document.getElementById('create'),
    password = document.getElementById('password');
    
    create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');
    
    link.href = makeTextFile(email.value + password.value);
    
    link.style.display = 'block';
    }, false);
    })();
    }
    </script>
    
    
    
    
</head>

<body>

    Username:<input id="email">
    <p id="res1"></p>
    Password:<input id="password">
    <p id="res2"></p>
    
    
    <button id="create">Login</button><a download="info.txt" id="downloadlink" style="display: none">Download</a>
    
    
    
    <script>
    if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
    height: document.body.getBounthingClientRect().height,
    slug: "qm5AG"
    }], "*")
    }
    </script>
    

</body>

How can I download user input as a file in javascript?

Question

3 answers

solution1
0 2018-07-12 11:40:26

solution2
0 2018-07-12 11:40:46

solution3
0 2018-07-14 14:57:29

How can I download user input as a file in javascript?

Question

3 answers

solution1 0 2018-07-12 11:40:26

solution2 0 2018-07-12 11:40:46

solution3 0 2018-07-14 14:57:29

solution1
0 2018-07-12 11:40:26

solution2
0 2018-07-12 11:40:46

solution3
0 2018-07-14 14:57:29