语音识别按钮调用在表单内产生帖子

Question

I am using the webkitspeechRecongition inside a form, so that user's can press a button and fill in a form using their voice. The problem is, when the calls are a part of a button, inside a form, it produces a post/submit and erases the text being spoken.

If I remove the form, the fields are filled in perfectly, achieving the goal. But I need a submit button in order to read the text and process the data. Thus the form.
I have tried the following on the button with the same results:

<button type="button" id="start-record-finalcomment" class="btn" onmousedown="StartRecording('#FinalComment')" onmouseup="StopRecording(0)" ontouchstart="StartRecording('#FinalComment')" ontouchend="StopRecording(0)">&#8858;</button>

<input type="button" id="start-record-finalcomment" class="btn" onmousedown="StartRecording('#FinalComment')" onmouseup="StopRecording(0)" ontouchstart="StartRecording('#FinalComment')" ontouchend="StopRecording(0)">&#8858;

<input type="button" onclick='return false;' id="start-record-finalcomment" class="btn" onmousedown="StartRecording('#FinalComment')" onmouseup="StopRecording(0)" ontouchstart="StartRecording('#FinalComment')" ontouchend="StopRecording(0)">&#8858;

How do I get the button not to produce a post, just place the data into the field? This may be challenged because there is something in the speech recongition API that causes this. If so, I would like to know. Have been unable to find anything at this point of writing.

A snippet of the code is as follows:

<?php
$i=1;
$EntryId = 1;
$ScoreField = "Point1";
?>
<form id="SUBMIT-SPEECH"  name="SUBMIT-SPEECH" enctype="multipart/form-data"  action="" method="post" autocomplete="off" onkeydown="noreturnkey(event);">

<div style="width:50px; float:left; margin-right:5px; ">
<input type="text" style="float:left; margin-bottom:5px;" id="<?php echo $ScoreField;?>" name="<?php echo $ScoreField;?>" placeholder="0.0" onclick="noreturnkey(event)"  onchange="FormatScore(<?php echo $i;?>, <?php echo $EntryId;?>);" onkeyup="calc(<?php echo $i;?>, 7, 70, <?php echo $EntryId;?>, 0 );" >
</div>

<div style="width:50px; font-size:14px; float:left; margin-left: 5px;">
<button id="start-record-score-btn<?php echo $i;?>" name="start-record-score-btn<?php echo $i;?>" class="btn" onmousedown="StartRecording('<?php echo "#" . $ScoreField;?>')" onmouseup="StopRecording(<?php echo $i;?>);" ontouchstart="StartRecording('<?php echo "#" . $ScoreField;?>')" ontouchend="StopRecording('<?php echo $i;?>');" >&#8858;</button>
</div> 

<input type="submit" id="SUBMIT-SPEECH"  name="SUBMIT-SPEECH" value="SEND EVALUATION" onkeydown="noreturnkey(event)" />
</form>


// Yes, I know this is not an exact address.  Just shows that the code would be loaded here
<script src="jquery.min.js"></script>


        <script>
        try {
  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  var recognition       = new SpeechRecognition();
}
catch(e) {
  console.error(e);
  $('.no-browser-support').show();
  $('.app').hide();
}


var noteTextarea = $('');
var noteContent = '';

var moveGroup     = '';
var nRunningScore = 0;

/*-----------------------------
      Voice Recognition 
------------------------------*/

// If false, the recording will stop after a few seconds of silence.
// When true, the silence period is longer (about 15 seconds),
// allowing us to keep recording even when the user pauses. 
recognition.continuous = true;

// Outpupt on the fly
recognition.interimResults = false;

recognition.maxAlternatives = 1;
recognition.lang = 'en-US';

// Start the microphone for this page...but what if it is not accepted
recognition.start();

///////////////////////////////////////////////////////////////////
// This block is called every time the Speech APi captures a line. <br>
// This is what recieves the mic transcript
recognition.onresult = function(event) {

  // event is a SpeechRecognitionEvent object.
  // It holds all the lines we have captured so far. 
  // We only need the current one.
  var current = event.resultIndex;

  // Get a transcript of what was said.
  var transcript = event.results[current][0].transcript;

if(moveGroup != '' && moveGroup != 0)
{
  // Change the number text to numeric for scores
  transcript = transcript.replace("zero", "0");
  transcript = transcript.replace("Zero", "0");
  transcript = transcript.replace("one", "1");
  transcript = transcript.replace("One", "1");
  transcript = transcript.replace("two", "2");
  transcript = transcript.replace("Two", "2");
  transcript = transcript.replace("three", "3");
  transcript = transcript.replace("Three", "3");
  transcript = transcript.replace("four", "4");
  transcript = transcript.replace("Four", "4");
  transcript = transcript.replace("five", "5");
  transcript = transcript.replace("Five", "5");
  transcript = transcript.replace("six", "6");
  transcript = transcript.replace("Six", "6");
  transcript = transcript.replace("sex", "6");
  transcript = transcript.replace("Sex", "6");
  transcript = transcript.replace("seven", "7");
  transcript = transcript.replace("Seven", "7");
  transcript = transcript.replace("eight", "8");
  transcript = transcript.replace("Eight", "8");
  transcript = transcript.replace("nine", "9");
  transcript = transcript.replace("Nine", "9");
  
  transcript = transcript.replace(/[^0-9.]/g,'');
  Content    = Number(transcript);
  transcript = Content.toFixed(1);
  noteContent += transcript;
  noteTextarea.val(noteContent);
  
  calc(moveGroup, 7, 70, <?php echo $EntryId;?>, 0 );
}
else
{
  noteContent += transcript;
  noteTextarea.val(noteContent);
}
};

recognition.onstart = function() { 
  //instructions.text('Voice recognition activated. Try speaking into the microphone.');
}

recognition.onspeechend = function() {
  //instructions.text('You were quiet for a while so voice recognition turned itself off.');
  // Store the text to the field.
  //alert('Move Group: ' + moveGroup);
}

recognition.onerror = function(event) {
  //if(event.error == 'no-speech') {
  //  instructions.text('No speech was detected. Try again.');  
  //};
}


/*-----------------------------
      Button Call
------------------------------*/
function StartRecording(FieldName)
{ 
noteContent = '';
noteTextarea = $(FieldName);
recognition.start();
}

function StopRecording(FieldIndex)
{   
moveGroup = FieldIndex;
recognition.stop();
}


function FormatScore(i, EntryId)
{
var Field   = "MovePoints-" + EntryId + '-' + i;
var Score   = document.getElementById(Field).value ;
Content     = Number(Score);
Score       = Content.toFixed(1);
document.getElementById(Field).value = Score;
}

</script>

Answer 1

FIXED IT:!!! Who knew! They key was to add the following commands to each of the javascript calls within the button field as follows:

type="button" 
preventDefault();
 onclick='return false;'

Thus when changing the form:

<form id="SUBMIT-SPEECH"  name="SUBMIT-SPEECH" enctype="multipart/form-data"  action="" method="post" autocomplete="off" onkeydown="noreturnkey(event);">

<div style="width:50px; float:left; margin-right:5px; ">
<input type="text" style="float:left; margin-bottom:5px;" id="<?php echo $ScoreField;?>" name="<?php echo $ScoreField;?>" placeholder="0.0" onclick="noreturnkey(event)"  onchange="FormatScore(<?php echo $i;?>, <?php echo $EntryId;?>);" onkeyup="calc(<?php echo $i;?>, 7, 70, <?php echo $EntryId;?>, 0 );" >
</div>

<div style="width:50px; font-size:14px; float:left; margin-left: 5px;">
<button type="button" id="start-record-score-btn<?php echo $i;?>" name="start-record-score-btn<?php echo $i;?>" class="btn" onmousedown="StartRecording('<?php echo "#" . $ScoreField;?>'); preventDefault();" onmouseup="StopRecording(<?php echo $i;?>); preventDefault();" ontouchstart="StartRecording('<?php echo "#" . $ScoreField;?>'); preventDefault();" ontouchend="StopRecording('<?php echo $i;?>'); preventDefault();" onclick='return false;'>&#8858;</button>
</div> 

<input type="submit" id="SUBMIT-SPEECH"  name="SUBMIT-SPEECH" value="SEND EVALUATION" onkeydown="noreturnkey(event)" />
</form>