从HTML表单字段中提取Javascript函数值

Question

I am trying to create a HTML system, it creates a .txt form through phonegap.

my HTML elements are as such

SCRIPT

function Savenote() {
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready
//
function onDeviceReady() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}

function gotFS(fileSystem) {
    fileSystem.root.getFile("DCC.txt", {create: true, exclusive: false}, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.createWriter(gotFileWriter, fail);
}

function gotFileWriter(writer) {
    writer.onwriteend = function(evt) {
        console.log(" ' '");
        writer.truncate(11);  
        writer.onwriteend = function(evt) {
            console.log(" ' '");
            writer.seek(0);
            writer.write("Henry Aspden");
            writer.onwriteend = function(evt){
                console.log(" ' '");
            }
        };
    };
    writer.write("some sample text");
}

function fail(error) {
    console.log(error.code);
}
}
</script>

MY BODY/FORM

  <form>
<input type="text" style="width:100%" name="filename" placeholder="Enter File Name">
<textarea rows="10" style="width:100%" name="notes" placeholder="Enter Your Text Notes Here"></textarea>
</form>
<a href="#" onClick="Savenote()"><h1>SAVE</h1></a>

WHATS MY QUESTION THEN? I need the values in my function to be taked from the form fields... and this is how if possible

Where it says

fileSystem.root.getFile("DCC.txt", {create: true, exclusive: false}, gotFileEntry, fail);
}

the "DCC.txt" section must be replaced by the field "filename" (ie "DCC.txt" is just for demo purposes). Also, the extension .txt is a constant, so it should be 'filename'.txt if that make any sense?

Where it says

writer.write("Henry Aspden");

the "Henry Aspden" section must be replaced by the field "notes" (ie "Henry Aspden" is just for demo purposes)

EDIT NUMBER 1 Changed to

    function gotFS(fileSystem) {
    fileSystem.root.getFile("var filename = document.getElementById("filename");", {create: true, exclusive: false}, gotFileEntry, fail);
}

with

<input id="filename" type="text" style="width:100%" name="filename" placeholder="Enter File Name">

results in a syntax error here i think... how can I place this new variable within this existing function??

Thanks

Answer 1

Give the input elements an id:

<input id="filename" 
    type="text" style="width:100%" name="filename" placeholder="Enter File Name">

Then grab the element and save it as a JavaScript variable

var filename = document.getElementById("filename").value;

Put this somewhere before your function call, then pass the variable to your function:

function gotFS(fileSystem) {
    var filename = document.getElementById("filename").value; //gets file name

    fileSystem.root.getFile( //call function 
        filename, {create: true, exclusive: false}, gotFileEntry, fail
    );
}