I created a form and within I want 2 ways of submit :
Since I added the second way, the input field doesn't work. I can write something and press enter but it will necessarily call the function bind to the onClick of record-voice button, why ?
Here is the code of the main component
<form onSubmit={ handleSubmit } style={Style.myform}>
<Dictaphone values={values} write_speech={this.write_speech} perso={this.state.perso} question={this.state.question} />
<div className={Style.mydiv}>
<input className={Style.n_0} id="question" type="text" onChange={handleChange} value={values.question} disabled={isSubmitting} placeholder="Type here"/>
</div>
</form>
So here you can see the first method in the input and the second in the Dictaphone component, it calls the following function:
write_speech = (text, values) => {
console.log("write_speech");
console.log(values)
this.setState({question: document.getElementById("montexte").getAttribute("montexte")}, function () {
values['question'] = this.state.question
});
}
And the Dicatphone content :
return (
<div>
<button onClick={SpeechRecognition.startListening} type="button"> Start</button>
<button onClick={(transcript) => props.write_speech(transcript, props.values)}>Stop</button>
<button onClick={() => alert("toto")}>Reset</button>
<p id="montexte" type="text" className={Style.welcome_text} hidden={true} montexte={transcript} />
</div>
);
So I can click Start to record and Stop to call write_speech, but when I just use the main component and fill the input it necessarily call write_speech too. But I don't want that.
I made a simple test and curiously it doesn't call the 3rd button function () => alert("toto")
What I already tried: the 3 methods described in this post but the same problem persisted for me https://stackoverflow.com/a/34226188/10971146
Thanks for having read
Your stop and reset buttons must have type="button", or else the first of the two will behave as a submit button. If you need a form submission button, use an explicit submit button of type="submit".
By default, the type for the HTML button element is submit. When you type text in a form input and press Enter, that acts as a submit event. Thus, the form calls the click handler for the first button it sees.
Here's a JSFiddle showing what happens if you have a form with an explicit submit button positioned after a button without an explicit type attribute—the button's click handler gets called: https://jsfiddle.net/r128cfyn/7/. Even though the form's submit button is explicit, the first button is also a submit button because it's not type="button".
Try using
onclick="event.preventDefault()";
to prevent the default behavior of the buttons.