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
– ssc-hrep3, Commented Jul 31, 2019 at 7:18
Just to be clear: You want the Enter key in the input to trigger the button, right? — T.J. Crowder
– T.J. Crowder, Commented Jul 31, 2019 at 7:26

T.J. Crowder · Accepted Answer · 2019-07-31 07:18:18Z

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, 2019 at 7:18

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

AJC24 Over a year ago

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.

T.J. Crowder Over a year ago

@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...?

Osama Khalid · Accepted Answer · 2019-07-31 07:24:53Z

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, 2019 at 7:24

Osama Khalid

3364 silver badges14 bronze badges

3 Comments

T.J. Crowder Over a year ago

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.

Osama Khalid Over a year ago

He is calling the function on click, so it will work, from where ever it is clicked!

T.J. Crowder Over a year ago

The OP has now confirmed that he wants pressing Enter in the input to click the button.

Collectives™ on Stack Overflow

Submit button working only if div is inside form - React

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related