Speech Recognition in HTML Forms

Question

I'm a beginner in javascript, I want to create a form that accepts users voice and display it in the input-text field.

<body>
    <textarea name="answer1" id="my_field1" cols="80" rows="4"></textarea>
    <button onclick="change1()">Change Text</button>
</body>
<script>
function change1(){
    var recognition = new webkitSpeechRecognition();
    recognition.lang = "en-GB";

    recognition.onresult = function(event) {
        // console.log(event);
        document.getElementById('my_field1').value = event.results[0][0].transcript;
    }
    recognition.start();
}
</script>

This works perfectly, but when I use this inside a form tag it doesn't work

<form action="" method="GET">
    <textarea name="answer1" id="my_field1" cols="80" rows="4"></textarea>
    <button onclick="change1()">Change Text</button>
    <br>
    <input type="submit" name="" id="">
</form>
<script>
function change1(){
    var recognition = new webkitSpeechRecognition();
    recognition.lang = "en-GB";

    recognition.onresult = function(event) {
        // console.log(event);
        document.getElementById('my_field1').value = event.results[0][0].transcript;
    }
    recognition.start();
}
</script>

Here when I click the Change Text button, nothing happens, and the URL changes file:///C:/Users/zjohn/Desktop/sample1.html?answer1=

Please tell me where I went wrong, and how to solve this issue.

Does this answer your question? [Clicking a button within a form causes page refresh](https://stackoverflow.com/questions/12319758/clicking-a-button-within-a-form-causes-page-refresh) — Jon P, Apr 01 '21 at 04:04

score 0 · Answer 1 · answered Apr 01 '21 at 03:51

The form is submitting when you click the button! You need to preventDefault() on the button so it doesnt submit.

Try below:

<form action="" method="GET">
    <textarea name="answer1" id="my_field1" cols="80" rows="4"></textarea>
    <button onclick="preventDefault(); change1();">Change Text</button>
    <br>
    <input type="submit" name="" id="">
</form>
<script>
function change1(){
    var recognition = new webkitSpeechRecognition();
    recognition.lang = "en-GB";

    recognition.onresult = function(event) {
        // console.log(event);
        document.getElementById('my_field1').value = event.results[0][0].transcript;
    }
    recognition.start();
}

I tried it Sir, but still, the output remains the same. – John Joseph Z Apr 01 '21 at 03:58 — John Joseph Z, Apr 01 '21 at 03:58
I too tried this and the submit/post still execute. – Debbie Kurth Aug 19 '22 at 17:39 — Debbie Kurth, Aug 19 '22 at 17:39

Speech Recognition in HTML Forms

1 Answers1