FormData doesn't include the button Javascript

Question

I\'m having a problem with FormData, it was working a couple days ago but now it doesn\'t work, it submits all the inputs except the submit button. Here\'s my l

Answer 1

I had a similar problem with my SwitchToggle component that I built with a <button> element. Even if the element had a name it wasn't included in my FormData when submitting the form.

I ended up adding a visually hidden <input type="checkbox"> in the markup with the same name and value property as the SwitchToggle component. This input does nothing (it is not clickable and not visual) except showing up in FormData. This example is in React but the approach is applicable to all frameworks or vanilla JavaScript.

const SwitchToggle = (props) => {
  const { id, name, className } = props;
  const [enabled, setIsEnabled] = React.useState(props.enabled);

  return (
    <>
      <input
        style={{opacity: 0.05}}
        name={name}
        checked={enabled}
        type={"checkbox"}
      />
      <button
        className={`switch-toggle ${enabled ? 'on' : 'off'}`}
        onClick={(e) => {
          e.preventDefault();
          setIsEnabled(!enabled);
        }}
      />
    </>
  );
};

Full example on Codepen.

Since my component is On/Off I used a checkbox input but you might as well use a text input with a string value.

Answer 2

Because you're not actually using the default submit (instead you're doing ajax), you need to add the clicked button yourself. One easy way to do this is to add a hidden input to your form with the name you want the button to have, and then have all the buttons in the form use this click handler:

function clickHandler() {
    this.form.theHiddenInput.value = this.value;
}

That way, if a button was used to submit the form, the button's handler sets the value of the hidden input prior to the submit.