Invia modulo utilizzando un pulsante esterno al tag <form>

Dì che ho:

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

<input type="submit" />

Come posso fare per inviare il modulo con quel pulsante di invio al di fuori del modulo, penso che in HTML5 ci sia un attributo di azione per l'invio, ma non sono sicuro che sia completamente cross-browser e se non lo è, c'è comunque Fai questo?

Aggiornamento: nei browser moderni è possibile utilizzare l' formattributo per farlo .

Per quanto ne so, non puoi farlo senza javascript.

Ecco cosa dice la specifica

Gli elementi utilizzati per creare i controlli compaiono generalmente all'interno di un elemento FORM, ma possono anche apparire al di fuori di una dichiarazione dell'elemento FORM quando vengono utilizzati per creare interfacce utente. Questo è discusso nella sezione sugli eventi intrinseci. Si noti che i controlli all'esterno di un modulo non possono essere controlli riusciti.

Questo è il mio audace

Un submitpulsante è considerato un controllo.

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

Dai commenti

Ho un'area delle impostazioni a più schede con un pulsante per aggiornare tutto, a causa della sua progettazione il pulsante sarebbe fuori dal modulo.

Perché non posizionare l' inputinterno del modulo, ma utilizzare CSS per posizionarlo altrove sulla pagina?

In HTML5, c'è l'attributo form . Fondamentalmente

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

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

Una soluzione che funziona alla grande per me, manca ancora qui. Richiede di avere un elemento visivamente nascosto <submit>o <input type="submit">all'interno di <form>un <label>elemento associato all'esterno di esso. Sarebbe così:

<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>

Ora questo collegamento consente di "fare clic" <submit>sull'elemento modulo facendo clic <label>sull'elemento.

se puoi usare jQuery puoi usare questo

<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>

Quindi, la linea di fondo è quella di creare un pulsante come Invia e inserire il pulsante di invio reale nel modulo (ovviamente nascondendolo) e inviare il modulo tramite jquery facendo clic sul pulsante "Invia falso". Spero che sia d'aiuto.

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

</form>

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

Per me ha funzionato, avere un pulsante di invio remoto per un modulo.

Simile a un'altra soluzione qui, con modifiche minori:

<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

Prova questo:

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

Anche se suggerirei di aggiungere un idmodulo al modulo e accedervi tramite quello invece di document.forms[index].

Puoi sempre usare jQuery:

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

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

Ecco una soluzione abbastanza solida che incorpora le idee migliori finora e include anche la mia soluzione a un problema evidenziato con Offerein. Non viene utilizzato JavaScript.

Se ti interessa la retrocompatibilità con IE (e persino Edge 13), non puoi utilizzare l' form="your-form" attributo .

Utilizzare un input di invio standard con display none e aggiungere un'etichetta al di fuori del modulo:

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

Nota l'uso di display: none;. Questo è intenzionale. L'uso della .hiddenclasse bootstrap è in conflitto con jQuery .show()e .hide(), e da allora è stato deprecato in Bootstrap 4.

Ora aggiungi semplicemente un'etichetta per il tuo invio (in stile bootstrap):

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

A differenza di altre soluzioni, sto anche usando tabindex - impostato su 0 - il che significa che ora siamo compatibili con la tabulazione della tastiera. L'aggiunta role="button"dell'attributo gli conferisce lo stile CSS cursor: pointer. Et voilà. ( Vedi questo violino ).

Questo funziona perfettamente! ;)

Questo può essere fatto usando Ajax e con quello che chiamo: "un elemento mirror modulo". Invece di inviare un modulo con un elemento esterno, è possibile creare un modulo falso. Il modulo precedente non è necessario.

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

Il codice ajax sarebbe come:

    <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>

Questo è molto utile se si desidera inviare alcuni dati all'interno di un altro modulo senza inviare il modulo principale.

Questo codice probabilmente può essere adattato / ottimizzato in base alle necessità. Funziona perfettamente !! ;) Funziona anche se vuoi una casella di opzione di selezione come questa:

<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>

Spero che abbia aiutato qualcuno come me ha aiutato me. ;)

Forse questo potrebbe funzionare, ma non so se sia un HTML valido.

<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>

Ho avuto un problema in cui stavo cercando di nascondere il modulo da un elemento cella di tabella, ma mostravo ancora il pulsante di invio dei moduli. Il problema era che l'elemento del modulo stava ancora occupando uno spazio extra, rendendo strano il formato della mia cella di tabella. Il display: nessuno e la visibilità: gli attributi nascosti non funzionavano perché nascondeva anche il pulsante di invio, poiché era contenuto nel modulo che stavo cercando di nascondere. La semplice risposta era di impostare l'altezza dei moduli a malapena a nulla usando i CSS

Così,

CSS -

    #formID {height:4px;}

ha funzionato per me.

Ho usato in questo modo, e mi è piaciuto molto, convalida il modulo prima di inviare anche è compatibile con 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>