[Javascript] Conflitto tra più form nella stessa pagina

Discussione in 'Javascript' iniziata da fabriaqui, 13 Aprile 2019.

  1. fabriaqui

    fabriaqui Nuovo Utente

    Registrato:
    11 Aprile 2019
    Messaggi:
    8
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Ciao ragazzi, ho un problema non da poco, con PHPMailer ho messo tre form in una pagina ma vanno in conflitto tra loro. Come posso risolvere ?????????

    Posto il codice qui sotto.

    Sezione html (ometto le altre parti che non riguardano il form)

    HTML:
    HTML
    
    <form class="form-inline" id="secondo_form" method="post">
    
    <div id="risposta_due" class="error-msg"></div>
    
    <div class="form-group conf-res">
    <label>Nome e Cognome</label>
    <input type="text" class="form-control" id="nome_cognome_due" name="nome_cognome_due" maxlength="50" spellcheck="false" value="">
    </div>
    
    <div class="form-group iata-id">
    <label >Telefono</label>
    <input type="text" class="form-control iata-input" id="telefono_ass" name="telefono_ass" maxlength="20" value="">
    </div>
    
    <div class="view-res" id="invia_due">Invia</div>
    
    <input type="checkbox" id="spunta_due" name="spunta_due" value="B">
    </form>
    
    
    <form class="form-inline" id="terzo_form" method="post">
    
    <div id="risposta_tre" class="error-msg"></div>
    
    <div class="form-group conf-res">
    <label>Nome e Cognome</label>
    <input type="text" class="form-control" id="nome_cognome_tre" name="nome_cognome_tre" maxlength="50" spellcheck="false" value="">
    </div>
    
    <div class="form-group iata-id">
    <label >Telefono</label>
    <input type="text" class="form-control iata-input" id="telefono_ass_due" name="telefono_ass_due" maxlength="20" value="">
    </div>
    
    <div class="view-res" id="invia_tre">Invia</div>
    
    <input type="checkbox" id="spunta_tre" name="spunta_tre" value="B">
    </form>
    
    
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery_mailer_due.js"></script>
    <script src="/js/jquery_mailer_tre.js"></script>
    
    /HTML
    

    File javascript (sono due librerie distinte, file due e file tre)

    Codice:
    javascript "jquery_mailer_due.js"
    
    
    
    $(document).ready(function(){
    $("#invia_due").click(function(){
     
    //Recuperiamo tutte le variabili
    
    var valid = '';
    var isr = ' manca. </h10>';
    var nome_cognome_due = $("#nome_cognome_due").val();
    var telefono_ass = $("#telefono_ass").val();
    var checkbox_due = $("#checkbox_due").val();
    
    
    //Eseguiamo una serie di controlli
    
    if (nome_cognome_due.length<1) {
    valid += 'Il nominativo'+isr;
    }
    
    if (telefono_ass.length<1) {
    valid += 'Il telefono'+isr;
    }
    
    if ($("#checkbox_due").is(":not(:checked)")){
    valid += '<h10>La spunta sulla privacy'+isr;
    }
    
    
    //Se i controlli dei campi form non vengono superati, appare il messaggio di errore.
    
    if (valid!='') {
    $("#risposta_due").fadeIn("slow");
    $("#risposta_due").html("<b>Errore: </b><br/>"+valid);
    $("#risposta_due").css("background-color","#FFFFE5");
    }
    
    //Se i controlli vengono superati, compare un messaggio di invio in corso
    else {
    var datastr ='nome_cognome_due=' + nome_cognome_due + '&telefono_ass=' + telefono_ass;
    $("#risposta_due").css("display", "block");
    $("#risposta_due").css("background-color","#FFFFE5");
    $("#risposta_due").html("<h10>Invio del messaggio in corso..</h10>");
    $("#risposta_due").fadeIn("slow");
    setTimeout("send('"+datastr+"')",2000);
    }
    
    return false;
    });
    });
    
    //Creazione della funzione di invio. Si baserà sul nostro file php.
    //var datastr ='name=' + name + '&mail=' + mail +'&messaggio=' + encodeURIComponent(messaggio);.
    
    function send(datastr){
    $.ajax({  
    type: "POST",
    url: "invio_mail2.php",
    data: datastr,
    cache: false,
    success: function(html){
    $("#risposta_due").fadeIn("slow");
    $("#risposta_due").html(html);
    $("#risposta_due").css("background-color","#FFFFE5");
    setTimeout('$("#risposta_due").fadeOut("slow")',2000);
    }
    });
    }
    
    
    
    
    
    javascript "jquery_mailer_tre.js"
    
    
    
    $(document).ready(function(){
    $("#invia_tre").click(function(){
     
    //Recuperiamo tutte le variabili
    
    var valid = '';
    var isr = ' manca. </h10>';
    var nome_cognome_tre = $("#nome_cognome_tre").val();
    var telefono_ass_due = $("#telefono_ass_due").val();
    var checkbox_due = $("#checkbox_due").val();
    
    
    //Eseguiamo una serie di controlli
    
    if (nome_cognome_tre.length<1) {
    valid += 'Il nominativo'+isr;
    }
    
    if (telefono_ass_due.length<1) {
    valid += 'Il telefono'+isr;
    }
    
    if ($("#checkbox_tre").is(":not(:checked)")){
    valid += '<h10>La spunta sulla privacy'+isr;
    }
    
    
    //Se i controlli dei campi form non vengono superati, appare il messaggio di errore.
    
    if (valid!='') {
    $("#risposta_tre").fadeIn("slow");
    $("#risposta_tre").html("<b>Errore: </b><br/>"+valid);
    $("#risposta_tre").css("background-color","#FFFFE5");
    }
    
    //Se i controlli vengono superati, compare un messaggio di invio in corso
    else {
    var datastr ='nome_cognome_tre=' + nome_cognome_tre + '&telefono_ass_due=' + telefono_ass_due;
    $("#risposta_tre").css("display", "block");
    $("#risposta_tre").css("background-color","#FFFFE5");
    $("#risposta_tre").html("<h10>Invio del messaggio in corso..</h10>");
    $("#risposta_tre").fadeIn("slow");
    setTimeout("send('"+datastr+"')",2000);
    }
    
    return false;
    });
    });
    
    //Creazione della funzione di invio. Si baserà sul nostro file php.
    //var datastr ='name=' + name + '&mail=' + mail +'&messaggio=' + encodeURIComponent(messaggio);.
    
    function send(datastr){
    $.ajax({  
    type: "POST",
    url: "invio_mail3.php",
    data: datastr,
    cache: false,
    success: function(html){
    $("#risposta_tre").fadeIn("slow");
    $("#risposta_tre").html(html);
    $("#risposta_tre").css("background-color","#FFFFE5");
    setTimeout('$("#risposta_tre").fadeOut("slow")',2000);
    }
    });
    }
    
    Codice PHP (stesso discorso dei javascript, sono due file divisi)

    PHP:
    PHP - invio_mail2.php


    <?php

    header
    ('Content-type: text/html; charset=utf8');
    echo 
    '<meta http-equiv="Content-Type" content="text/html; charset=utf8" />';

    $data date("j F Y G:i");
    $tome "xxxxxxxxxxx";
    $soggetto "Messaggio";
    $nome_cognome_due $_POST['nome_cognome_due'];
    $telefono_ass $_POST['telefono_ass'];
    $ip $_SERVER['REMOTE_ADDR'];


    require(
    "phpemail/class.phpmailer.php");

    $mail = new PHPMailer();

    $mail->IsSMTP();  // telling the class to use SMTP


    $mail->SMTPAuth true// turn on SMTP authentication
    $mail->Host       "xxxxxxxxxxx"// sets GMAIL as the SMTP server
    $mail->Port       587;                   // set the SMTP port for the GMAIL

    $mail->Username "xxxxxxxxxxx"// SMTP username
    $mail->Password "xxxxxxxxxx"// SMTP password


    $mail->From     "xxxxxxxxxxxxx";
    $mail->FromName "xxxxxxxxxxxxx";
    $mail->AddBCC("$tome");


    $mail->WordWrap 50;

    $mail->IsHTML(true); // send as HTML

    $mail->Subject  "Richiesta di assistenza";
    $mail->Body .= "<br>";
    $mail->Body     .= ("<img src=/img/logo_in_nero.png>") ;
    $mail->Body .= "<br>";
    $mail->Body .= "<br>";
    $mail->Body .= "<strong>Richiesta</strong>";
    $mail->Body .= "<br>";
    $mail->Body .= "<br><strong>Effettuata il:</strong> $data";
    $mail->Body .= "<br>";
    $mail->Body .= "<br><strong>Da parte di:</strong> $_POST[nome_cognome_due]";
    $mail->Body .= "<br>";
    $mail->Body .= "<br><strong>Numero di telefono:</strong> $telefono_ass";



    //Se l'e-mail viene spedita correttamente, compare un messaggio di avvenuto invio

    if(!$mail->Send()) {
      echo 
    'Il messaggio NON è stato inviato!<br/>';
      echo 
    'Mailer error: ' $mail->ErrorInfo;
    } else {
      echo 
    '<p>Messaggio INVIATO Grazie.</p>';
    }
    ?>




    PHP - invio_mail3.ph



    <?php

    header
    ('Content-type: text/html; charset=utf8');
    echo 
    '<meta http-equiv="Content-Type" content="text/html; charset=utf8" />';

    $data date("j F Y G:i");
    $tome "xxxxxxxxxxx";
    $soggetto "Messaggio";
    $nome_cognome_tre $_POST['nome_cognome_tre'];
    $telefono_ass_due $_POST['telefono_ass_due'];
    $ip $_SERVER['REMOTE_ADDR'];


    require(
    "phpemail/class.phpmailer.php");

    $mail = new PHPMailer();

    $mail->IsSMTP();  // telling the class to use SMTP


    $mail->SMTPAuth true// turn on SMTP authentication
    $mail->Host       "xxxxxxxxxxx"// sets GMAIL as the SMTP server
    $mail->Port       587;                   // set the SMTP port for the GMAIL

    $mail->Username "xxxxxxxxxxx"// SMTP username
    $mail->Password "xxxxxxxxxx"// SMTP password


    $mail->From     "xxxxxxxxxxxxx";
    $mail->FromName "xxxxxxxxxxxxx";
    $mail->AddBCC("$tome");


    $mail->WordWrap 50;

    $mail->IsHTML(true); // send as HTML

    $mail->Subject  "Richiesta di contatto";
    $mail->Body .= "<br>";
    $mail->Body     .= ("<img src=/img/logo_in_nero.png>") ;
    $mail->Body .= "<br>";
    $mail->Body .= "<br>";
    $mail->Body .= "<strong>Richiesta</strong>";
    $mail->Body .= "<br>";
    $mail->Body .= "<br><strong>Effettuata il:</strong> $data";
    $mail->Body .= "<br>";
    $mail->Body .= "<br><strong>Da parte di:</strong> $_POST[nome_cognome_tre]";
    $mail->Body .= "<br>";
    $mail->Body .= "<br><strong>Numero di telefono:</strong> $telefono_ass_due";



    //Se l'e-mail viene spedita correttamente, compare un messaggio di avvenuto invio

    if(!$mail->Send()) {
      echo 
    'Il messaggio NON è stato inviato!<br/>';
      echo 
    'Mailer error: ' $mail->ErrorInfo;
    } else {
      echo 
    '<p>Messaggio INVIATO Grazie.</p>';
    }
    ?>
    Manca il terzo form che ha molte più voci ma è basato su un identico meccanismo. Non scervellatevi a verificare che i name o gli id siano corretti perchè l'ho già fatto mille volte.

    Non so come ne perchè ma i form ed i relativi file si intrecciano tra loro.
    Evidentemente manca un sistema che una volta iniziato a compilare un form automaticamente venga detto di escludere gli altri due. Evidentemente PHPMailer non è stato pensato per mettere più form nella stessa pagina.
     
    Ultima modifica di un moderatore: 14 Aprile 2019
  2. marino51

    marino51 Utente Attivo

    Registrato:
    28 Febbraio 2013
    Messaggi:
    2.573
    Mi Piace Ricevuti:
    128
    Punteggio:
    63
    Occupazione:
    free lance
    Località:
    Lombardia
    ho ripreso il tuo script ed ho lavorato sul form 2, arrivando ad un risultato positivo
    nell'originale ci sono alcuni errori,
    nomi di campi errati,
    ajax con metodo POST ma la stringa dei dati formattata (forse) come GET

    consiglio, guarda lo script che ti posto (alla base é il tuo), ma cerca di cogliere le particolarità che ti permettono di semplificare il "muliform", soprattutto condividendo i campi comuni tra i form

    ho lasciato degli alert che aiutano a capire, a necessità puoi aggiungerne altri

    poi se ti serve ancora supporto, fatti vivo

    HTML:
    <html>
    <head>
      <title>multiform</title>
    
      <script type='text/javascript' src='http://localhost/test_site/php/jquery.min.js'></script>
    
      <script>
    $(document).ready(function(){
      $("#invia_due").click(function(){
    
    alert('DUE - CI SONO !');
    
        var valid            = '';
        var isr              = ' manca. </h10>';
    
        var nome_cognome_due = $('#nome_cognome_due').val();
        var telefono_ass     = $('#telefono_ass').val();
        var checkbox_due     = $('#spunta_due:checked').val()?true:false;
        var formNumber       = $('#formNumber').val();
    
    alert('nome_cognome_due '+nome_cognome_due+'\r\ntelefono_ass '+telefono_ass+'\r\ncheckbox_due '+checkbox_due+'\r\nformNumber '+formNumber);
    
        if (nome_cognome_due.length<1) {
          valid += 'Il nominativo'+isr;
        }
    
        if (telefono_ass.length<1) {
          valid += 'Il telefono'+isr;
        }
    
        if (checkbox_due == false){
          valid += '<h10>La spunta sulla privacy'+isr;
        }
    
        if (valid != '') {
          $("#risposta_due").fadeIn("slow");
          $("#risposta_due").html("<b>Errore: </b><br/>"+valid);
          $("#risposta_due").css("background-color","#FFFFE5");
        }
        else {
          var datastr =
              {
                nome_cognome_due : nome_cognome_due,
                telefono_ass     : telefono_ass,
                checkbox_due     : checkbox_due,
                formNumber       : formNumber,
              };
    
          $("#risposta_due").css("display", "block");
          $("#risposta_due").css("background-color","#FFFFE5");
          $("#risposta_due").html("<h10>Invio del messaggio in corso..</h10>");
          $("#risposta_due").fadeIn("slow");
    
          setTimeout(send2(datastr),2000);
        }
        return false;
      });
    });
    
    function send2(datastr){
      $.ajax({  
        type    : "POST",
        url     : "invio_mail2.php",
        data    : datastr,
        cache   : false,
        success : function(html){
          $("#risposta_due").fadeIn("slow");
          $("#risposta_due").html(html);
          $("#risposta_due").css("background-color","#FFFFE5");
          setTimeout('$("#risposta_due").fadeOut("slow")',5000);
        },
        error: function(errore){
          alert('ERRORE : il server non risponde o lo ha fatto in modo anomalo '+errore);
        }
      });
    }
      </script>
    
      <script>
    $(document).ready(function(){
      $("#invia_tre").click(function(){
    
    alert('TRE - CI SONO !');
    
      });
    });
      </script>
    </head>
    <body>
    
    <form class="form-inline" id="secondo_form" method="post">
    
      <div id="risposta_due" class="error-msg"></div>
    
      <div class="form-group conf-res">
        <label>Nome e Cognome</label>
        <input type="text" class="form-control" id="nome_cognome_due" name="nome_cognome_due" maxlength="50" spellcheck="false" value="">
      </div>
    
      <div class="form-group iata-id">
        <label >Telefono</label>
        <input type="text" class="form-control iata-input" id="telefono_ass" name="telefono_ass" maxlength="20" value="">
      </div>
    
      <input type="checkbox" id="spunta_due" name="spunta_due" value="B">
    
      <input type="hidden" id="formNumber" name="formNumber" value="2" />
    
      <br />
      <div class="view-res" id="invia_due">Invia</div>
    
    </form>
    
    
    <form class="form-inline" id="terzo_form" method="post">
    
      <div id="risposta_tre" class="error-msg"></div>
    
      <input type="hidden" id="formNumber" name="formNumber" value="3" />
    
    </form>
    
    </body>
    </html>
    
    PHP:
    <?php
    require_once 'myUtils/show_vars.php';

    echo 
    "<h3>POST</h3>".show_var($_POST)."<br /><br />";

    extract($_POSTEXTR_OVERWRITE);

    echo 
    "<h3>Lista di tutte le variabili definite</h3>".show_var(get_defined_vars())."<br /><br />";
    ?>
    risultato
    upload_2019-4-13_22-25-55.png
     
    Ultima modifica: 13 Aprile 2019
Sto caricando...

Condividi questa Pagina