submit form problema DOM

[zoombee]

Il problema che sto per illustrare succede quando cerco di inviare il contenuto di un form ad altro form che a sua volta dovrebbe inoltrare il "post" ad una pagina di conferma. Sebbene io non conosca la causa del problema provo ad ipotizzare che sia dovuto ad un errato indirizzamento a livello DOM.

Il primo form si trova in una finestra "popup" (una sorta di precompilazione) ed il secondo form si trova dentro un iframe (mi serve) ed questo è lo script del primo:

$(document).ready(function() {
	$('#primo_form').submit(function(){
    var querystring = $(this).serializeArray();
	var extra = window.frames['mioframe'].document.getElementById('miodiv');
	$.post('forms/red_form.php', querystring, 
    function(data) {
        $(extra).html(data);
    });
      return false;
                 });
                 });

E fin qui tutto bene. Riesco a bersagliare il form che si trova dentro all'iframe, cioè, Il post inviato arriva e il secondo form viene correttamente visualizzato.

Il problema sorge quando una volta completata la compilazione, cerco d'inoltrare questo secondo form ad una pagina di conferma.
Se apro direttamente il secondo form senza la "precompilazione" del primo form (quello su popup) funziona e la pagina di conferma viene correttamente visualizzata.

A me sembra che una volta che il form di precompilazione viene inviato al secondo form esso venga caricato ad un "livello DOM" diverso[edit] >>("livello DOM" non so se si può dire cosi, sto imparando), succede che quando premo "invio" il form mi fa il refresh della pagina senza indirizzare il "post" alla pagina di conferma, un po come se mancasse il bersaglio.

Questo che segue e lo script del secondo forum che è simile al primo.

$(document).ready(function() {
	$('#secondo_form').submit(function(){
    var querystring = $(this).serializeArray();
	$.post('forms/process/conferma.php', querystring, 
    function(data) {
        $('miodiv').html(data); //questo è il div che si trova dentro l'iframe
    });
      return false;
                 });
                 });

Se qualcuno gentilmente mi indicasse almeno la strada da percorrere sarei molto grato.

[Xinod]

accertati che il secondo form al submit esegua il submit di jquery
se per esempio "costruissi" tutto il form in risposta all' invio del primo non lo farebbe
(e dovresti usare .live('submit', ...) piuttosto che submit(...))

[zoombee]

Grazie Xinod,
Sto tentando tutte, ho provato come mi hai suggerito ma non ho ottenuto successo, ma comunque qualcosa si è mosso, ho percepito che se faccio l'invio del form direttamente senza la "precompilazione" la pagina di conferma viene, la differenza è che se subito dopo mentre la pagina di conferma è ancora caricata, provo ad rinviare il post con il form di precompilazione questo apre il secondo form e di qui va a buon fine, cioè, mi carica la pagina di conferma come dovrebbe, ma chiaro che questo procedimento è del tutto inutile per fini pratici.

Test1 .live('submit',..: form>>conferma>> precompilazione >>form>>conferma...OK!
Test2 .live('submit',.. : precompilazione >>form>>conferma...KO!

Vorrei che dal form di precompilazione passasse al secondo form e di qui alla conferma.

$(document).ready(function() {
	$('#secondo_form').live('submit',function(){
    var querystring = $(this).serializeArray();
	$.post('forms/process/conferma.php', querystring, 
    function(data) {
        $('miodiv').html(data); //questo è il div che si trova dentro l'iframe
    });
      return false;
                 });
                 });

[zoombee]

Da quanto ho capito, il submit alla "pagina di conferma" partendo dal form che si trova sulla finestra popup non va a buon fine perché il div "bersaglio" non è ancora caricato nel'albero DOM invece, quando il submit avviene dal secondo form presente dentro al iframe e quindi rinviando il post dal form "popup" esso trova il div già caricato nel DOM.

Possibile fare un pre-caricamento di un elemento nel DOM?

Mi spiego, caricare in background un elemento in modo che questo rimanga li in attesa. Forse non ho ancora le idee chiare sul funzionamento del DOM, spero che qualcuno possa aiutarmi a capire.

[cavicchiandrea]

Originariamente inviato da zoombee
...
Possibile fare un pre-caricamento di un elemento nel DOM?

E dove lo metteresti se il documento non esiste? (affianco al browser tra il bordo del monitor e lo scrollbar ) scusa la battuta non vorrei sbagliarmi ma penso sia impossibile

Mi spiego, caricare in background un elemento in modo che questo rimanga li in attesa. Forse non ho ancora le idee chiare sul funzionamento del DOM, spero che qualcuno possa aiutarmi a capire.

Senza forse
L'unica è usare l'evento onload che attende il caricamento del documento

[zoombee]

Ciao cavicchiandrea,

L'elemento "div" esiste, si trova dentro un iframe. Ma stranamente (per me) quando invio dal form che si trova dentro iframe la pagina di conferma viene caricata, ma quando parto da un form di precompilazione che si trova su un "popup" per poi andare al form che si trova nel iframe la pagina di conferma non viene raggiunta, ma se arrivo alla pagina di conferma e rifaccio partendo dal "popup" allora si la pagina di conferma viene raggiunta il che mi fa pensare che sia proprio qualcosa legata al DOM.

Grazie per l'attenzione.

[Xinod]

ho riletto 5 volte ma ancora non e' chiaro
cioe', ho capito il problema ma ci sono tanti dubbi su cosa avviene dove e quando...
lascia un link, a parole non se ne esce

[darkonme]

Vediamo se ho capito... è una cosa del genere?

file: form1.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript">
            
            $(document).ready(function() {
                $('#primo_form').submit(function(event){
                    event.preventDefault();
                    var querystring = $(this).serializeArray();
                    $.post('formGet.html #get', querystring, 
                    function(data) {
                        $('#mioframe').contents().find('#miodiv').html(data);
                    });
                    return false;
                });
            });
            
        </script>
    </head>
    <body>
        <form id="primo_form">
            <input type="text" value="prova" name="prova"/>
            <input type="submit" value="invia"/>
        </form>
        <iframe name="mioframe" id="mioframe" src="form2.html" width="300" height="300"></iframe>
    </body>
</html> 

file: form2.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript">
            
            $(document).ready(function() {
                $('#secondo_form').submit(function(event){
                    event.preventDefault();
                    var querystring = $(this).serializeArray();
                    $.post('conferma.html #conferma', querystring, 
                    function(data) {
                        $('#miodiv').html(data); //questo è il div che si trova dentro l'iframe
                    });
                    return false;
                });
            });
            
        </script>
    </head>
    <body>
        <form id="secondo_form">
            <input type="text" value="prova" name=""/>
            <input type="submit" value="invia"/>
        </form>
        <div id="miodiv">
        </div>
    </body>
</html> 

file: formGet.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="get">Form Get</div>
    </body>
</html> 

file: conferma.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="conferma">conferma</div>
    </body>
</html> 

[zoombee]

Ho creato al volo un sito test tanto per cercare di essere possibilmente più chiaro.
Grazie darkonme apprezzo il tuo sforzo di comprendermi, vedo che non ero riuscito a spiegarmi.
Spero che riusciate a venirmi incontro.

Provate a utilizzare il "Primo Form" e poi il "Secondo form".
Vedrete che dal primo si arriva alla pagina di conferma mentre invece dal secondo il submit va a vuoto.

test online
Grazie ancora a tutti.
index.php

<!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    </head> 
    <body> 
        <iframe name="mioframe" id="mioframe" src="content.php" width="400" height="300"></iframe> 
        <div id="panel">
        <?php include ('form2.html')?>
        </div>
    </body> 
</html>

content.php

<!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
     <div id="miodiv">
		         <?php include ('form1.php')?>
     </div>
    </body> 
</html>

form1.php

<!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
        <script type="text/javascript"> 
     	$(document).ready(function() {
	$('#primo_form').submit(function(){
    var querystring = $(this).serializeArray();
	$.post('conferma.php', querystring,  
    function(data) {
        $('#miodiv').html(data);
    });
      return false;
                 });
                 }); 
        </script> 
    </head> 
    <body> 
        <form id="primo_form"> 
        <h3>Primo Form</h3>
          
 Cognome <input type="text" value="<?php echo $_POST['Cognome'];?>" name="Cognome"/></br>
           
Nome <input type="text" value="<?php echo $_POST['Nome'];?>" name="Nome"/></br>
           
Data Nascita <input type="text" value="" name="Nascita"/></br>
           
Comune <input type="text" value="" name="Comune"/></br>
           
            <input type="submit" value="invia"/> 
        </form> 
    </body> 
</html>

form2.html

<!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
        <script type="text/javascript"> 
             
      	$(document).ready(function() {
	$('#secondo_form').submit(function(){
    var querystring = $(this).serializeArray();
    	var extra = window.frames['mioframe'].document.getElementById('miodiv');
	$.post('form1.php', querystring,  
    function(data) {
        $(extra).html(data);
    });
      return false;
                 });
                 }); 
             
        </script> 
    </head> 
    <body> 
<form id="secondo_form"> 
<h2>Secondo Form</h2>
          
 Cognome <input type="text" value="" name="Cognome"/> </br>
           
Nome <input type="text" value="" name="Nome"/></br>
 <input type="submit" value="invia"/> 
        </form> 
    </body> 
</html>

conferma.php

<!DOCTYPE html> 
<html> 
    <head> 
        <title></title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
        <div id="conferma">
						<h3>Pagina di conferma</h3>
        <?php
			echo "Cognome: ". $_POST['Cognome'] . "</br>";
                echo "Nome: ". $_POST['Nome'] . "</br>";
                        echo "Nascita: ". $_POST['Nascita'] . "</br>";
                                echo "Comnune: ". $_POST['Comune'] . "</br>";
        ?>
        </div> 
    </body> 
</html>

[Xinod]

var extra = window.frames['mioframe'].document.getElementById('miodiv');
qui parli di cose che esistono nell' opener
prova con
window.opener.frames['mioframe'].document.getElementById('miodiv');