Puoi annidare i moduli html?

È ansible nidificare moduli html come questo

in modo che entrambe le forms funzionino? Il mio amico ha problemi con questo, una parte del lavoro subForm funziona, mentre un’altra parte non lo fa.

In una parola, no. Puoi avere diversi moduli in una pagina ma non dovrebbero essere annidati.

Dalla bozza di lavoro html5 :

4.10.3 L’elemento del form

Modello di contenuto:

Flusso di contenuto, ma senza discendenti di elementi di forma.

Il secondo modulo verrà ignorato, vedi lo snippet di WebKit ad esempio:

 bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr& result) { // Only create a new form if we're not already inside one. // This is consistent with other browsers' behavior. if (!m_currentFormElement) { m_currentFormElement = new HTMLFormElement(formTag, m_document); result = m_currentFormElement; pCloserCreateErrorCheck(t, result); } return false; } 

Mi sono imbattuto in un problema simile e so che non è una risposta alla domanda, ma può essere di aiuto a qualcuno con questo tipo di problema:
se è necessario inserire gli elementi di due o più forms in una determinata sequenza, l’attributo di form HTML5 può essere la soluzione.

Da http://www.w3schools.com/tags/att_input_form.asp :

  1. L’ attributo form è nuovo in HTML5.
  2. Specifica a quale elemento

    appartiene un elemento . Il valore di questo attributo deve essere l’attributo id di un elemento

    nello stesso documento.

Scenario :

  • input_Form1_n1
  • input_Form2_n1
  • input_Form1_n2
  • input_Form2_n2

Implementazione :

 

Qui troverai la compatibilità del browser.

Plain html non può permetterti di farlo. Ma con javascript puoi essere in grado di farlo. Se si utilizza javascript / jquery, è ansible classificare gli elementi del modulo con una class e quindi utilizzare serialize () per serializzare solo gli elementi del modulo per il sottoinsieme degli elementi che si desidera inviare.

 

Quindi nel tuo javascript puoi fare questo per serializzare elementi di class 1

 $(".class1").serialize(); 

Per la class 2 che potresti fare

 $(".class2").serialize(); 

Per l’intera forma

 $("#formid").serialize(); 

o semplicemente

 $("#formid").submit(); 

Se stai utilizzando AngularJS, tutti i tag

all’interno della tua ng-app vengono sostituiti in fase di esecuzione con ngForm direttive ngForm progettate per essere annidate.

In forms angolari può essere annidato. Ciò significa che la forma esterna è valida quando anche tutti i moduli figlio sono validi. Tuttavia, i browser non consentono la nidificazione di elementi

, quindi Angular fornisce la direttiva ngForm che si comporta in modo identico a

ma può essere annidata. Ciò consente di disporre di moduli annidati, il che è molto utile quando si utilizzano le direttive di convalida angular nei moduli generati dynamicmente utilizzando la direttiva ngRepeat . ( fonte )

Come ha detto Craig, no.

Ma, per quanto riguarda il tuo commento sul perché :

Potrebbe essere più semplice utilizzare 1

con gli input e il pulsante “Aggiorna” e utilizzare gli input nascosti della copia con il pulsante “Invia ordine” in un altro

.

Un altro modo per ovviare a questo problema, se si utilizza un linguaggio di scripting lato server che consente di manipolare i dati inviati, è quello di dichiarare il proprio modulo html in questo modo:

 

Se stampi i dati pubblicati (userò PHP qui), otterrai una matrice come questa:

 //print_r($_POST) will output : array( 'a_name' => 'a_name_value', 'a_second_name' => 'a_second_name_value', 'subform' => array( 'another_name' => 'a_name_value', 'another_second_name' => 'another_second_name_value', ), ); 

Quindi puoi fare qualcosa come:

 $my_sub_form_data = $_POST['subform']; unset($_POST['subform']); 

Il tuo $ _POST ora ha solo i tuoi dati di “forma principale” e i tuoi dati di sottofondo sono memorizzati in un’altra variabile che puoi manipolare a piacimento.

Spero che questo ti aiuti!

Nota che non sei autorizzato a nidificare gli elementi FORM!

http://www.w3.org/MarkUp/html3/forms.html

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (le specifiche della specifica html4 non modificano i moduli di nidificazione dalla 3.2 alla 4)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (la specifica html4 non rileva modifiche relative ai moduli di annidamento dalla 4.0 alla 4.1)

https://www.w3.org/TR/html5-diff/ (le specifiche della specifica html5 non modificano i moduli di nidificazione da 4 a 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms commenta a “Questa funzionalità consente agli autori di aggirare la mancanza di supporto per gli elementi nidificati del modulo.”, ma fa non citare dove questo è specificato, penso che stanno assumendo che dovremmo assumere che è specificato nella specifica html3 🙂

Una soluzione semplice consiste nell’utilizzare un iframe per contenere il modulo “annidato”. Visivamente il modulo è nidificato ma sul lato codice è in un file html separato del tutto.

Anche se potessi farlo funzionare in un browser, non c’è alcuna garanzia che funzionerebbe allo stesso modo in tutti i browser. Quindi, mentre potresti riuscire a farlo funzionare un po ‘ di tempo, non sarai certo in grado di farlo funzionare tutto il tempo.

Avresti anche problemi a farlo funzionare in diverse versioni dello stesso browser. Quindi evita di usarlo.

Informazioni sui moduli di nidificazione: ho trascorso 10 anni un pomeriggio cercando di eseguire il debug di uno script Ajax.

la mia precedente risposta / esempio non ha tenuto conto del markup html, mi dispiace.

 


JS FIDDLE LINK

http://jsfiddle.net/nzkEw/10/

Oggi sono rimasto bloccato nello stesso numero e ho risolto il problema aggiungendo un controllo utente e
su questo controllo io uso questo codice

 
'
'

e sull’evento PreRenderComplete della pagina chiama questo metodo

 private void InitializeJavaScript() { var script = new StringBuilder(); script.Append("$(document).ready(function () {"); script.Append("$('.divformTagEx').append( "); script.Append(litFormTag.Text); script.Append(" )"); script.Append(" });"); ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true); } 

Credo che questo aiuterà.

Puoi anche utilizzare formaction = “” all’interno del tag button.

  

Questo sarebbe annidato nella forma originale come un pulsante separato.