[Javascript] Conflitto tra più form nella stessa pagina

fabriaqui · 13 Apr 2019

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.

marino51 · 13 Apr 2019

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($_POST, EXTR_OVERWRITE);

echo "<h3>Lista di tutte le variabili definite</h3>".show_var(get_defined_vars())."<br /><br />";
?>

risultato

Cerca

Cerca

[Javascript] Conflitto tra più form nella stessa pagina

fabriaqui

Nuovo Utente

marino51

Utente Attivo

Discussioni simili