Passing value from text input into javascript function

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.

nrabinowitz · Accepted Answer · 2011-10-31 18:06:27Z

12

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/

edited Oct 31, 2011 at 18:06

answered Oct 31, 2011 at 17:11

nrabinowitz

55.7k10 gold badges152 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user898741 Over a year ago

Good one. Just add a fileName.focus() below to alert :)

nrabinowitz Over a year ago

@Márcio - good idea - added above. You could also just make the alert a prompt and maybe ditch the input altogether...

Casper Slynge Over a year ago

Thanks for the reply. I have created a <script>record to filename function</script> inside my HTML file, and to exactly as you have written. However nothing occurs when I press the record button. As soon as I change the onclick to Recorder.record('audio', 'test.wav'); it works, but when changing to recordToFilename(); it doesn't

nrabinowitz Over a year ago

Do you get any Javascript errors? How are you defining the function? See the working example I included above.

casraf · Accepted Answer · 2011-10-31 17:13:35Z

2

Recorder.record('audio', document.yourformname.filename.value)

Make sure to have a name="?" attribute for your form for this to work and replace yourformname with what you put as the form's name. filename refers to the input's name attribute as well.

answered Oct 31, 2011 at 17:13

casraf

21.8k10 gold badges60 silver badges93 bronze badges

Comments

Vijay Makwana · Accepted Answer · 2018-01-18 09:23:16Z

2

<html>
<head>
  <script>
     function addData (fn, ln, em) {

       console.log(fn);
       console.log(ln);
       console.log(em);

     }
 </script>
</head>
<body>
    <input Type="text" name="FirstName" id="fn">
    <input Type="text" name="LastName" id="ln">
    <input Type="email" name="Email" id="em">
    <button onClick="addData(fn.value,ln.value,em.value)">click</button> 
</body>
</html>

answered Jan 18, 2018 at 9:23

Vijay Makwana

92110 silver badges24 bronze badges

3 Comments

Ovidiu Dolha Over a year ago

Please add explanations to your answer.

Vijay Makwana Over a year ago

when javascript code is fix but html field id is change then we can use this code.

rrd Over a year ago

I can work it out, but I doubt the OP can if they had little experience (although after 6 years of JavaScript he probably should be able to).

Collectives™ on Stack Overflow

Passing value from text input into javascript function

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related