How to load text from file with just one single button?

I'm trying to code a message encrypt/decrypt page using character subtitution. I managed to save key to a file and I want to load it back. I managed to load key successful with this:

    <script>
    function loadkey () {
    var keyToLoad = document.getElementById("keyToLoad").files[0];
    var keyReader = new FileReader();
    keyReader.onload = function(keyLoadEvent)
    {
        var keyFromFileLoaded = keyLoadEvent.target.result;
        document.getElementById("key").value = keyFromFileLoaded;
    };
    keyReader.readAsText(keyToLoad, "utf-8");
}
</script>

<h3>Put your key here</h3>
<textarea id="key" cols="30" rows="1"></textarea>
<br>
<button onclick="genKey()">Generate  key</button>
<button onclick="savekey()">Save key</button>
<input type="file" id="keyToLoad">
<button onclick="loadkey()">Load key</button>

But it loodk really stupid with select file button and load key button separately. So I hide input button and trigger it from clicking Load key button:

<script>
    function handleChooseKey()
{
    document.getElementById("keyToLoad").click();
}

function loadkey () {
    var keyToLoad = document.getElementById("keyToLoad").files[0];
    var keyReader = new FileReader();
    keyReader.onload = function(keyLoadEvent)
    {
        var keyFromFileLoaded = keyLoadEvent.target.result;
        document.getElementById("key").value = keyFromFileLoaded;
    };
    keyReader.readAsText(keyToLoad, "utf-8");
}
</script>

<h3>Put your key here</h3>
<textarea id="key" cols="30" rows="1"></textarea>
<br>
<button onclick="genKey()">Generate  key</button>
<button onclick="savekey()">Save key</button>
<input type="file" id="keyToLoad" style="display:none;">
<button onclick="handleChooseKey();loadkey();">Load key</button>

My problem is it cant make the loadkey() function work right after the key file is loaded, so the key wont be loaded until the next click. Please help me. Thank you :)

Answers


Try this:

<script>
    function handleChooseKey()
{
    document.getElementById("keyToLoad").click();
    document.getElementById("keyToLoad").onchange = function(e) { loadkey() };
}

function loadkey () {
    var keyToLoad = document.getElementById("keyToLoad").files[0];
    var keyReader = new FileReader();
    keyReader.onload = function(keyLoadEvent)
    {
        var keyFromFileLoaded = keyLoadEvent.target.result;
        document.getElementById("key").value = keyFromFileLoaded;
    };
    keyReader.readAsText(keyToLoad, "utf-8");
}
</script>

<h3>Put your key here</h3>
<textarea id="key" cols="30" rows="2"></textarea>
<br>
<button onclick="genKey()">Generate  key</button>
<button onclick="savekey()">Save key</button>
<input type="file" id="keyToLoad" style="display:none;">
<button onclick="handleChooseKey();">Load key</button>

Need Your Help

Email to rows in html table populated with data from mysql database via while loop

php mysql email table while-loop

I have an HTML table populated with data from a MySQL database using a while() loop. This database has the following structure:

PhotoScroller Example iOS MaxZoom?

iphone xcode image ipad ios4

i am using the Photoscroller Example from:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.