CODEWITHSUNDEEP
reactjsform-submitreactstrap
LulzAsh
LulzAsh

Reputation: 652

Enter key form submit not working when Link is present

I am unable to submit form on enter key press 

<Form onSubmit={this.handleFormSubmit}>

    <Link to="/back"><Button> Back</Button></Link> // back button

    <FormGroup>
        <Label htmlFor="name">Name</Label>
        <Input name="name" type="text"/>
    </FormGroup>

    <Button type="submit"><i className="fa fa-dot-circle-o"></i> Submit</Button>
    <Button type="reset" onClick={this.HandleReset}><i className="fa fa-ban"></i> Reset</Button>

</Form>

Enter key must trigger this function 

handleFormSubmit = event => {
    event.preventDefault();
    // more core here
}

When i press enter key the back button in the form with the link is executing.

When i comment the back button it is working properly i.e form is getting submitted (and i can control it using preventDefault()).

How can i use form onSubmit while link is present in the form ?

Upvotes: 1

Views: 793

Answers (2)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

Why not just take the Link outside the Form component? The Link doesn't provide any value or meet any requirements for the form in a purely functional perspective. The Form is meant to gather input from the user. The Link is merely a back button, let it be a back button.

For aesthetic purposes, the differences are negligible.

  <div>
    <Link to="/back"><Button> Back</Button></Link> // back button
    <Form onSubmit={this.handleFormSubmit}>
        <FormGroup>
            <Label htmlFor="name">Name</Label>
            <Input name="name" type="text"/>
        </FormGroup>

        <Button type="submit"><i className="fa fa-dot-circle-o"></i> Submit</Button>
        <Button type="reset" onClick={this.HandleReset}><i className="fa fa-ban"></i> Reset</Button>
    </Form>
  </div>

Because when you define a button in a form, it implicitly has a type of "submit". Since you have a button in your Link, and it is the first button in the form, your form decides that this is the button that will execute on form submission. Thus ignoring your actual submit button on the bottom.

You can workaround this by giving the button in the Link tag a type of "button" as you suggested. Thus the form will travel further down to find another button.

<Form onSubmit={this.handleFormSubmit}>
    <Link to="/back"><Button type="button"> Back</Button></Link> // back button
    <FormGroup>
        <Label htmlFor="name">Name</Label>
        <Input name="name" type="text"/>
    </FormGroup>
    <Button type="submit"><i className="fa fa-dot-circle-o"></i> Submit</Button>
    <Button type="reset" onClick={this.HandleReset}><i className="fa fa-ban"></i> Reset</Button>
</Form>

Upvotes: 2

LulzAsh
LulzAsh

Reputation: 652

Possible solutions :

  • Changing the position of the button, Button must not be first element inside the form.

  • Placing button outside the form element.

  • Binding an event to enter key and then submit the form from event.

  • Adding type="button" property to the button without changing its
    position.

Upvotes: 0

Related Questions