Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14
  1. #1

    submit form problema DOM

    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:
    codice:
    $(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.
    codice:
    $(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.

  2. #2
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,653
    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(...))

  3. #3
    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.
    codice:
    $(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;
                     });
                     });

  4. #4
    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.

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,040
    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
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    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.

  7. #7
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,653
    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

  8. #8
    Utente di HTML.it
    Registrato dal
    Jun 2007
    Messaggi
    74
    Vediamo se ho capito... è una cosa del genere?

    file: form1.html
    Codice 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(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
    Codice 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() {
                    $('#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
    Codice PHP:
    <!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
    Codice PHP:
    <!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
    ..
    "Voi che avete gl'intelletti sani,mirate la dottrimna che s'asconde dietro il velame delli versi strani".

  9. #9
    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
    codice:
    <!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
    codice:
    
    <!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
    codice:
    
    <!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
    codice:
    <!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
    codice:
    <!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>

  10. #10
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,653
    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');

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.