Home / Questions / 1784
Accepted
devconcept
Asked: 2020-12-25 12:52:59 +0800 CST 2020-12-25 12:52:59 +0800 CST

How can I submit using a button that is not inside the form?

  • 772

I have a form very similar to the one below. This is just a demo but it illustrates the doubt I have.

<!DOCTYPE>
<html>
<head>
    <title>Formulario</title>
</head>

<body>
    <form id="CreateForm" action="/create" method="post">
        <div>
            <label for="campo1">Campo1</label>
            <input type="text" id="campo1" name="campo1">
        </div>
        <div>
            <label for="campo2">Campo2</label>
            <input type="text" id="campo2" name="campo2">
       </div>
    </form>

    <button type="submit">
        Enviar
    </button>
 </body>

</html>

How can I do so that when I click on the button the form is submitted without using javascript?

html

3 Answers

  1. Best Answer

    In HTML5 a new mechanism was introduced to be able to separate the form elements (buttons, inputs, etc) from the form. The attribute formassociates a control with a <form>:

    <form id="CreateForm" action="/create" method="post">
    <input type="text" name="foo" />
</form>

<button type="submit" form="CreateForm">Enviar</button>

    It is only necessary to assign the same id of the form in the attribute formof the element.

    • 19

  2. Another solution would be this:

        <form name="myform" action="#">
    Search: <input type='text' name='query' />
    <a href="javascript: submitform()">Search</a>
    </form>
    <script type="text/javascript">
    function submitform()
    {
      document.myform.submit();
    }
    </script>

    Font

    • 1

  3. Another option using jQuery

    <script type="text/javascript">
  $(document).ready(function() {
    $("#myButton").on('click', (function() {
      $("#myForm").submit();
    });
});
</script>
    • 1