Blog

Submitting a Form from Outside

—

Have you ever had to submit a form that had a button outside of it? The form attribute in HTML offers a clever way to handle this.

You can use the form attribute to link a button with type="submit" to any form on the page by referencing the id of the form.

<form id="my-form"> 
  <input type="text" name="username" /> 
</form>

<!-- Despite being outside of the form, this button can submit it --> 
 <button type="submit" form="my-form">Submit Form</button>

This is especially helpful for:

  • Modal dialogues with forms
  • Complicated designs in which the submit button must be moved
  • Forms with multiple steps and navigation buttons

The Problem of Undefined Form Prop

I recently ran into an interesting issue with a React Button component. I have a button component that accepts props like form, type, and onClick. It looks like this:

<Button form={formId} type="submit" onClick={handleClick} />

However, something is being canceled at runtime even though the form prop is undefined. React still renders the attribute as follows even if the form prop is undefined:

<button type="submit" form="undefined">
  Submit
</button>

form="undefined" is interpreted by the browser as searching for a form with id="undefined". The browser cancels the default submit behavior since there isn’t a form of that type, which may cause issues for your onClick handler.

The Solution

The fix is to conditionally render the form attribute only when it has a valid value:

const Button = ({ form, type, onClick, children, ...props }) => {
  return (
    <button
      {...(form && { form })} // Only add form attribute if it exists
      type={type}
      onClick={onClick}
      {...props}
    >
      {children}
    </button>
  );
};

Conclusion

  • Undefined attributes: React converts undefined props to string literals in the DOM
  • Browser behavior: Browsers treat form="undefined" as a search for a form with that ID
  • Event handling: When the form reference fails, it can cancel default behaviors and interfere with custom handlers

The browser takes HTML attributes literally, and "undefined" is just another string to it This small detail can save you hours of debugging form submission issues.

🔗 Related Posts