Submit button working only if div is inside form - React

Question

I am having a input in react component, When the input is inside , Enter button will trigger a click, but if input is not wrapped inside form, Enter does not work,

Is wrapping input by form the only way to activate Enter button ?

    <div>
        <input name=“name” type="text"
           value={somevalue} onChange={this.handleChange}/>
        <button  id=“searchbutton”
            onClick={this.handleSubmit}>
            {search label}
        </button>
    </div>

This is the default behavior of HTML. You could also prevent this behavior and manually bind the keyup event to a method. — ssc-hrep3, Jul 31 '19 at 07:18
Check this - https://stackoverflow.com/questions/27827234/how-to-handle-the-onkeypress-event-in-reactjs — ravibagul91, Jul 31 '19 at 07:26
Just to be clear: You **want** the Enter key in the `input` to trigger the button, right? — T.J. Crowder, Jul 31 '19 at 07:26

score 2 · Answer 1 · answered Jul 31 '19 at 07:18

2

Is wrapping input by form the only way to activate Enter button ?

Your other option is to use a keypress handler on the input and check for the Enter key.

The reason it works when this is in a form is that browsers automatically click the submit button on a form if the form has only a single text input and the user presses Enter. Without the form, you don't get that automatic behavior.

answered Jul 31 '19 at 07:18

T.J. Crowder

1,031,962
187
1,923
1,875

This is exactly what I had to do with an `input` that I had created outside of a form. I had to create a separate `keypress` handler for it to handle the user pressing the enter key. This, for me, is the best solution to this if for some reason you don't want to use a form. – AJC24 Jul 31 '19 at 07:22
@OsamaKhalid - Right, which is why the OP sees the behavior he sees when this is in a `form`. I'm not sure why the comment...? – T.J. Crowder Jul 31 '19 at 07:24

score 0 · Answer 2 · answered Jul 31 '19 at 07:24

0

//By default in form type of button is "submit". Change that to : 
    <button  type="button" id="searchbutton"
           onClick={this.handleSubmit}>
           {search label}
    </button>

answered Jul 31 '19 at 07:24

Osama Khalid

307
4
14

My impression is that the OP **wants** the Enter key (in the `input`) to click the button. Changing it to a plain button will stop that. – T.J. Crowder Jul 31 '19 at 07:25
He is calling the function on click, so it will work, from where ever it is clicked! – Osama Khalid Jul 31 '19 at 07:34
The OP has now confirmed that he wants pressing Enter in the `input` to click the button. – T.J. Crowder Jul 31 '19 at 09:02

Submit button working only if div is inside form - React

2 Answers2