How do I know which button is being clicked

[hungdev]

i have 2 buttons with type="submit". How do I know which button is being clicked?

<AvForm onSubmit={onSubmit}>
   <AvField name="name" label="Name" required />
   <Button type='submit' name='save'>Save </Button>
   <Button type='submit' name='next'>Next </Button>
</AvForm>

const onSubmit = (event, errors, values) => {
   console.log(event.target.name)
}

i tried to get event.target.name in onSubmit function, but it cannot get button name. thank you

[nikkhielseath]

Greetings @hungdev, Did you try giving each of the button a unique id and then, accessing that id to identify the button?

Regards SNikhill

[hungdev]

so onSubmit func how do i get it? @SNikhill

[nikkhielseath]

Hey, I am not sure if you can access the button that called the submit using onSubmit [As you might have noticed that event in an onSubmit handler refers to the Form itself and not the button] but, you can achieve the same by adding an additional click handler on both of the buttons and then, in that case, the event will refer to the button that got clicked and you will be able to access the id of the button. If you want, we can try this out together. Here is my discord id: [id has been deleted].

Regards SNikhill

[hungdev]

@SNikhill Thank for your reply. I want to get id of Button in onSubmit, because I want to handle the instances of each button. I created an codesanbox example, can you edit it? https://codesandbox.io/s/dazzling-wave-356b8?file=/src/App.js Thank you.

[nikkhielseath]

Greetings @hungdev, This is what I meant I am kind of getting a hunch that you don't need 'next' to be a submit. Here is my discord id: SNikhill#0437. We can have a chat there.

Regards SNikhill

[hungdev]

@SNikhill, I think you misunderstood me. i want to get id of button in onSubmit func ( not outside ). Please take a look to line 9 -> 15

[nikkhielseath]

Hey @hungdev, Yes, I get what you want. I have updated the example to better suit your use case. See it Here.

Regards SNikhill

[nikkhielseath]

Sorry, I forgot to save the file. Check the link again.

[hungdev]

@SNikhill I got it. Thank you so much.

[nikkhielseath]

Greetings @hungdev , How are you? I actually found another way. Turns out that the SubmitEvent keeps a record of the submitter.

Try this out:

onSubmitHandler = (event) => console.log(event.naturalEvent.submitter.name)

This way, you won't have to use an external variable.

I hope that this helps.

Regards SNikhill

[hungdev]

@SNikhill great! I think using SubmitEvent is the best way. That's my expectation. Thank you again :)

import React, { useRef } from "react";
import "./styles.css";
import { Button } from "reactstrap";
import { AvForm, AvField } from "availity-reactstrap-validation";

export default function App() {
  // Now, you may use this Reference for any
  // conditional submit(s) that you want to handle
  const clickedButtonName = useRef("None");
  const additionalClickHandler = (event) => {
    event.persist();
    clickedButtonName.current = event.target.name;
    // I am going to save this
    // event.target.name in a reference
  };
  const onSubmit = (event, errors, values) => {
    console.log(event.nativeEvent.submitter.name);
    console.log("From Inside the onSubmit Handler:", clickedButtonName.current);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <AvForm onSubmit={onSubmit}>
        <AvField name="name" label="Name" required />
        <Button type="submit" onClick={additionalClickHandler} name="save">
          Save{" "}
        </Button>
        <Button type="submit" onClick={additionalClickHandler} name="next">
          Next{" "}
        </Button>
      </AvForm>
    </div>
  );
}