Submit Form Using a Button Outside the ≪Form≫ Tag

Submit form using a button outside the form tag

Update: In modern browsers you can use the form attribute to do this.

---

As far as I know, you cannot do this without javascript.

Here's what the spec says

The elements used to create controls generally appear inside a FORM
element, but may also appear outside of a FORM element declaration
when they are used to build user interfaces. This is discussed in the
section on intrinsic events. Note that controls outside a form cannot
be successful controls.

That's my bold

A submit button is considered a control.

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

From the comments

I have a multi tabbed settings area with a button to update all, due
to the design of it the button would be outside of the form.

Why not place the input inside the form, but use CSS to position it elsewhere on the page?

Submit forms using a button outside the form tag

Try this:

 <form method="get" id="form1" action="something.php">
     <input type="text" name="name" />

</form>

 <form method="get" id="form2" action="something.php">
     <input type="text" name="name" />

</form>

 <form method="get" id="form3" action="something.php">
     <input type="text" name="name" />

</form>

<button type="submit" form="form1">Form1 Submit</button>
<button type="submit" form="form2">Form2 Submit</button>
<button type="submit" form="form3">Form3 Submit</button>

<form method="get" id="form1" action="something.php">

submit form with button outside form using ajax

The issue is because you are creating a new submit event handler in every click. From the description of what you want to do, you instead need to create a single submit handler when the page loads, and trigger it when the button is clicked. Something like this:

$('#newForm').submit(function(e) { // handle the submit event
  e.preventDefault();
  let formData = $(this).serialize();

  $.post({
    type: 'POST',
    url: '/api/pois/',
    data: formData
  })
})

$('#confirmYes').click(function() {
  $('#confirm-object').modal('hide');
  $('#newForm').submit(); // trigger the submit event
});

Submit form with a button outside the form

The values that will be in the POST array will be the names of the posted elements. I'm not 100% sure, but I don't think the form name will be in the $_POST array.

You can check for a post by using

if (!empty($_POST))
{

}

or you can check for individual values like $_POST['sku'] based on the input names within the FORM

How to submit form from a button outside that component in React?

Edit: Simple and correct answer: https://stackoverflow.com/a/53573760/5271656

In React, data flows down and actions flow up. So notify child component about button click in the parent.

This is how you can do this.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class CustomForm extends Component {
  handleOnSubmit = e => {
    e.preventDefault();
    // pass form data
    // get it from state
    const formData = {};
    this.finallySubmit(formData);
  };

  finallySubmit = formData => {
    alert("Form submitted!");
  };

  componentDidUpdate(prevProps, prevState) {
    if (this.props.submitFromOutside) {
      // pass form data
      // get it from state
      const formData = {};
      this.finallySubmit();
    }
  }

  render() {
    return (
      <form onSubmit={this.handleOnSubmit}>
        <button type="submit">Inside Custom</button>
      </form>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      submitFromOutside: false
    };
  }
  submitCustomForm = () => {
    this.setState({
      submitFromOutside: true
    });
  };

  componentDidMount() {
    console.log(this.form);
  }

  render() {
    return (
      <div>
        <CustomForm submitFromOutside={this.state.submitFromOutside} />
        <button onClick={this.submitCustomForm}>In Root</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);  

To me, this solution is hacky and not in a react way but serves your use-case.

Find working solution here:https://codesandbox.io/s/r52xll420m

Rails: Submit button outside form_tag

While this question is old, I think it might be worth pointing out a better option that doesn't rely on JavaScript.

HTML5 introduced form as an attribute that can be applied to any form control and will bind it to a specific form based on its id - even if the control isn't nested inside the form tag.

Example:

<form id="my_sample_form">
...
</form>

<input type="submit" value="Submit" form="my_sample_form">

This submit button will submit the form with the id specified in its form attribute.

Furthermore this isn't limited to submit buttons, but instead works for any form control and allows you to submit form partials that are positioned all over the place.

In contrast to most JavaScript solutions, you will keep all native form features like submitting on enter/return.

---

Related Topics