Envie o formulário usando um botão fora da tag <form>

Diga que tenho:

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

<input type="submit" />

Como faço para enviar esse formulário com esse botão de envio fora do formulário, acho que no HTML5 há um atributo de ação para o envio, mas não tenho certeza se isso é totalmente compatível com vários navegadores e se não existe. faça isso?

Atualização: nos navegadores modernos, você pode usar o formatributo para fazer isso .

Tanto quanto eu sei, você não pode fazer isso sem javascript.

Aqui está o que a especificação diz

Os elementos usados ​​para criar controles geralmente aparecem dentro de um elemento FORM, mas também podem aparecer fora de uma declaração de elemento FORM quando são usados ​​para criar interfaces com o usuário. Isso é discutido na seção sobre eventos intrínsecos. Observe que controles fora de um formulário não podem ser controles bem-sucedidos.

Esse é o meu negrito

Um submitbotão é considerado um controle.

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

Dos comentários

Eu tenho uma área de configurações com várias guias com um botão para atualizar tudo, devido ao design dele, o botão estaria fora do formulário.

Por que não colocar o inputinterior do formulário, mas usar CSS para posicioná-lo em outro lugar da página?

No HTML5, existe o atributo form . Basicamente

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

<input type="submit" form="myform" />

Uma solução que funciona muito bem para mim ainda está faltando aqui. Requer ter um elemento visualmente oculto <submit>ou <input type="submit">dentro do elemento <form>e um <label>elemento associado fora dele. Seria assim:

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form" tabindex="0">Submit</label>

Agora, esse link permite que você 'clique' no <submit>elemento do formulário clicando no <label>elemento.

se você pode usar o jQuery, você pode usar este

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

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

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

Portanto, a linha inferior é criar um botão como Enviar e colocar o botão de envio real no formulário (é claro, ocultá-lo) e enviar o formulário por jquery, clicando no botão 'Enviar falso'. Espero que ajude.

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

</form>

<!-- External button-->
<button type="submit" form="form1">Click me!</button>

Isso funcionou para mim, ter um botão de envio remoto para um formulário.

Semelhante a outra solução aqui, com pequenas modificações:

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

Tente o seguinte:

<input type="submit" onclick="document.forms[0].submit();" />

Embora eu sugira adicionar um idao formulário e acessar por isso em vez de document.forms[index].

Você sempre pode usar o jQuery:

<form id="myForm">
  <!-- form controls -->
</form>
<input type="submit" id="myButton">

<script>
$(document).ready(function () {
  $("#myButton").click(function () {
    $("#myForm").submit();
  });
});
</script>

Aqui está uma solução bastante sólida que incorpora as melhores idéias até o momento e inclui minha solução para um problema destacado nas ofertas de Offerein. Nenhum javascript é usado.

Se você se preocupa com a compatibilidade com o IE (e mesmo com o Edge 13), não pode usar o form="your-form" atributo .

Use uma entrada de envio padrão com nenhuma exibição e adicione um rótulo para ela fora do formulário:

<form id="your-form">
  <input type="submit" id="your-form-submit" style="display: none;">
</form>

Observe o uso de display: none;. Isso é intencional. O uso da .hiddenclasse do bootstrap entra em conflito com o jQuery .show()e .hide(), e, desde então, foi preterido no Bootstrap 4.

Agora basta adicionar um rótulo ao seu envio (com estilo para inicialização):

<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
  Submit
</label>

Ao contrário de outras soluções, também estou usando tabindex - definido como 0 - o que significa que agora somos compatíveis com as guias do teclado. A adição do role="button"atributo fornece o estilo CSS cursor: pointer. Et voila. ( Veja este violino ).

Este trabalho perfeitamente! ;)

Isso pode ser feito usando o Ajax e com o que chamo de "um elemento de espelho de formulário". Em vez de enviar um formulário com um elemento externo, você pode criar um formulário falso. O formulário anterior não é necessário.

<!-- This will do the trick -->
<div >
    <input id="mirror_element" type="text" name="your_input_name">
    <input type="button" value="Send Form">
</div>

O código ajax seria como:

    <script>
        ajax_form_mirror("#mirror_element", "your_file.php", "#your_element_response", "POST");

        function ajax_form_mirror(form, file, element, method) {
            $(document).ready(function() {
                // Ajax
                $(form).change(function() { // catch the forms submit event
                    $.ajax({                // create an AJAX call...
                        data: $(this).serialize(),      // get the form data
                        type: method,                   // GET or POST
                        url: file,                      // the file to call
                        success: function (response) {   // on success..
                        $(element).html(response);  // update the DIV
                        }
                    });

                    return false; // cancel original event to prevent form submitting
                });
            });
        }
   </script>

Isso é muito útil se você deseja enviar alguns dados para outro formulário sem enviar o formulário pai.

Esse código provavelmente pode ser adaptado / otimizado de acordo com a necessidade. Funciona perfeitamente!! ;) Também funciona se você quiser uma caixa de opção de seleção como esta:

<div>
    <select id="mirror_element" name="your_input_name">
        <option id="1" value="1">A</option>
        <option id="2" value="2">B</option>
        <option id="3" value="3">C</option>
        <option id="4" value="4">D</option>
    </select>
</div>

Espero que tenha ajudado alguém assim me ajudou. ;)

Talvez isso possa funcionar, mas não sei se isso é HTML válido.

<form method="get" action="something.php">
    <input type="text" name="name" />
    <input id="submitButton" type="submit" class="hide-submit" />
</form>

<label for="submitButton">Submit</label>

Eu tive um problema em que estava tentando ocultar o formulário de um elemento da célula da tabela, mas ainda mostrava o botão de envio de formulários. O problema era que o elemento do formulário ainda estava ocupando um espaço em branco extra, tornando o formato da minha célula da tabela estranho. A exibição: none e visibilidade: atributos ocultos não funcionavam porque ocultava também o botão enviar, pois estava contido no formulário que eu estava tentando ocultar. A resposta simples foi definir a altura dos formulários para quase nada usando CSS

Assim,

CSS -

    #formID {height:4px;}

trabalhou para mim.

Eu usei dessa maneira, e gostei, valida o formulário antes de enviar também é compatível com o safari / google. no jquery nn

        <module-body>
            <form id="testform" method="post">
                <label>Input Title</label>
                <input name="named1" placeholder="Placeholder"  title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>
            </form>
        </module-body>
        <module-footer>
            <input type="button" onclick='if (document.querySelector("#testform").reportValidity()) { document.querySelector("#testform").submit(); }' value="Submit">
            <input type="button" value="Reset">
        </module-footer>