Question

Inside my html file I call a javascript function that takes two parameters, where the second parameter is the name of a file that should be saved.

<a id="record_button" onclick="Recorder.record('audio', 'test.wav');" href="javascript:void(0);" title="Record"><img src="images/record.png" width="24" height="24" alt="Record"/></a>

I would like to make a dynamic variable that takes the value from a textfield and forward that as the second parameter (instead of test.wav), so the user can determine the name of the file.

<label for="filename">Filename</label>
<input name="filename" type="text">

Thanks.

Answer 1

This is easier if you give your user input an id attribute:

<input name="filename" id="filename" type="text">

Now you can access the value in Javascript with:

document.getElementById('filename').value

Note that, if you aren’t controlling the Recorder.record() method, you’ll need to validate the user input first (at a minimum, to verify that they’ve entered something). I’d recommend moving this to a separate function, e.g.:

function recordToFilename() {
    var input = document.getElementById('filename'),
        fileName = input.value;
    if (fileName) {
        Recorder.record('audio', fileName);
    } else {
        alert('Please enter a filename!');
        input.focus();
    }
}

Then just use that function:

<a id="record_button" onclick="recordToFilename();" href="javascript:void(0);" title="Record"><img src="images/record.png" width="24" height="24" alt="Record"/></a>

Working example: http://jsfiddle.net/nrabinowitz/GFpRy/