Kontaktformular - Übermittlungsschaltfläche funktioniert nicht

Question

Ich folge diesem umfangreichen Artikel (mit Quellen), um ein Kontaktformular auf einer Website zu erstellen. Allerdings brauche ich eine etwas komplexere Form, mit mehr Feldern und einer Optionsfeldgruppe.

Ich fügte einfach zu den Dateien process.php und scripts.js die zusätzlichen Felder hinzu, die ich benötigte. Unter den vielen Fehlern, die ich bekommen konnte, funktioniert der Submit-Button einfach überhaupt nicht. Ich klicke darauf und nichts passiert. Ich bin ein Neuling in PHP und JS, daher kenne ich keinen richtigen Weg, um zu debuggen und zu verstehen, wo das Problem liegt. Kannst du mir helfen, es zu finden?

Hier ist mein Code:

EDIT:

Dieser Teil funktioniert eigentlich nicht, weil ich ein leeres Feld ergab im String erhalten. Irgendeine Idee? Dies sind die nicht benötigten Felder:

// ASCENSORI CONDOMINIO 
if (empty($_POST["ascensoriCondominio"])) { 
    $ascensoriCondominio = "Valore non specificato"; 
} else { 
    $ascensoriCondominio = $_POST["ascensoriCondominio"]; 
} 

// SCALE CONDOMINIO 
if (empty($_POST["scaleCondominio"])) { 
    $scaleCondominio = "Valore non specificato"; 
} else { 
    $scaleCondominio = $_POST["scaleCondominio"]; 
} 

// RISCALDAMENTO CONDOMINIO 
if (empty($_POST["riscaldamento"])) { 
    $riscaldamento = "Valore non specificato"; 
} else { 
    $riscaldamento = $_POST["riscaldamento"]; 
} 

HTML:

<!----------------------------- FORM CONDOMINI ----------------------------------------> 
      <form action="php/process.php" role="form" id="condominiForm" data-toggle="validator" class="col-xs-12 shake"> 
       <div class="row"> 
        <h3 class="col-xs-12">Referente</h3> 
        <div class="form-group col-sm-6"> 
         <label for="name" class="h4 obbligatorio">Nome</label> 
         <input type="text" class="form-control" id="name" placeholder="Inserisci nome" required data-error="Inserire nome"> 
         <div class="help-block with-errors"></div> 
        </div> 
        <div class="form-group col-sm-6"> 
         <label for="cognome" class="h4 obbligatorio">Cognome</label> 
         <input type="text" class="form-control" id="cognome" placeholder="Inserisci cognome" required data-error="Inserire cognome"> 
         <div class="help-block with-errors"></div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="form-group col-sm-6"> 
         <label for="email" class="h4 obbligatorio">Email</label> 
         <input type="email" class="form-control" id="email" placeholder="Inserisci email" required data-error="Inserire email"> 
         <div class="help-block with-errors"></div> 
        </div> 
        <div class="form-group col-sm-6"> 
         <label for="telefono" class="h4 obbligatorio">Telefono/Cellulare</label> 
         <input type="text" class="form-control" id="telefono" placeholder="Inserisci recapito telefonico" required data-error="Inserire recapito telefonico"> 
         <div class="help-block with-errors"></div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <h3>Condominio</h3> 
        </div> 
        <div class="form-group col-sm-6"> 
         <label for="nomeCondominio" class="h4 obbligatorio">Nome</label> 
         <input type="text" class="form-control" id="nomeCondominio" placeholder="Inserisci nome condominio" required data-error="Inserire nome condominio"> 
         <div class="help-block with-errors"></div> 
        </div> 
        <div class="form-group col-sm-6"> 
         <label for="indirizzoCondominio" class="h4 obbligatorio">Indirizzo</label> 
         <input type="text" class="form-control" id="indirizzoCondominio" placeholder="Inserisci indirizzo" required data-error="Inserire indirizzo condominio"> 
         <div class="help-block with-errors"></div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="form-group col-sm-6"> 
         <label for="comuneCondominio" class="h4 obbligatorio">Comune</label> 
         <input type="text" class="form-control" id="comuneCondominio" placeholder="Inserisci comune" required data-error="Inserire comune condominio"> 
         <div class="help-block with-errors"></div> 
        </div> 
        <div class="form-group col-sm-6"> 
         <label for="provinciaCondominio" class="h4 obbligatorio">Provincia</label> 
         <input type="text" class="form-control" id="provinciaCondominio" placeholder="Inserisci provincia" required data-error="Inserire provincia condominio"> 
         <div class="help-block with-errors"></div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="form-group col-sm-6"> 
         <label for="unitaCondominio" class="h4 obbligatorio">Numero unità</label> 
         <input type="text" class="form-control" id="unitaCondominio" placeholder="Inserisci numero unità" required data-error="Inserire numero unità"> 
         <div class="help-block with-errors"></div> 
        </div> 
        <div class="form-group col-sm-6"> 
         <label for="ascensoriCondominio" class="h4">Numero ascensori</label> 
         <input type="text" class="form-control" id="ascensoriCondominio" placeholder="Inserisci numero ascensori" data-error="Inserire numero ascensori"> 
         <div class="help-block with-errors"></div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="form-group col-sm-6"> 
         <label for="scaleCondominio" class="h4">Numero scale</label> 
         <input type="text" class="form-control" id="scaleCondominio" placeholder="Inserisci numero scale" data-error="Inserire numero scale"> 
         <div class="help-block with-errors"></div> 
        </div> 
        <div class="form-group col-sm-6"> 
         <!--<label for="riscaldamentoCondominio" class="h4">Riscaldamento centralizzato</label>--> 
         <!--<input type="text" class="form-control" id="riscaldamentoCondominio" placeholder="Inserisci numero ascensori" data-error="Inserire numero ascensori">--> 
         <h4>Riscaldamento centralizzato</h4> 
         <label class="radio-inline"><input type="radio" name="riscaldamento">Sì</label> 
         <label class="radio-inline"><input type="radio" name="riscaldamento">No</label> 
         <!--<div class="help-block with-errors"></div>--> 
        </div> 
       </div> 

       <!--<button type="submit" id="form-submit" class="pulsante">Invia richiesta di preventivo!</button>--> 
       <!--<div class="col-sm-10 col-sm-offset-1">--> 
       <!--</div>--> 
       <input type="submit" id="form-submit" class="btn btn-success btn-lg pull-right">Submit</input> 
       <div id="msgSubmitCondomini" class="h3 text-center hidden"></div> 
       <div class="clearfix"></div> 
      </form> 

JS:

$("#condominiForm").validator().on("submit", function (event) { 
if (event.isDefaultPrevented()) { 
    // handle the invalid form... 
    formError(); 
    submitMSG(false, "Hai completato correttamente i campi?"); 
} else { 
    // everything looks good! 
    event.preventDefault(); 
    submitForm(); 
} 
}); 


function submitForm(){ 
    // Initiate Variables With Form Content 
    var name = $("#name").val(); 
    var cognome = $("#cognome").val(); 
    var email = $("#email").val(); 
    var telefono = $("#telefono").val(); 
    var nomeCondominio = $("#nomeCondominio").val(); 
    var indirizzoCondominio = $("#indirizzoCondominio").val(); 
    var comuneCondominio = $("#comuneCondominio").val(); 
    var provinciaCondominio = $("#provinciaCondominio").val(); 
    var unitaCondominio = $("#unitaCondominio").val(); 
    var ascensoriCondominio = $("#ascensoriCondominio").val(); 
    var scaleCondominio = $("#scaleCondominio").val(); 
    var riscaldamento = $("input[name=riscaldamento]:checked").val(); 

    $.ajax({ 
     type: "POST", 
     url: "php/process.php", 
     data: "name=" + name + "&cognome=" + cognome + "&email=" + email + "&telefono=" + telefono + "&nomeCondominio=" + nomeCondominio + "&indirizzoCondominio=" + indirizzoCondominio + "&comuneCondominio=" + comuneCondominio + "&provinciaCondominio=" + provinciaCondominio + "&unitaCondominio=" + unitaCondominio + "&ascensoriCondominio=" + ascensoriCondominio + "&scaleCondominio=" + scaleCondominio + "&riscaldamento=" + riscaldamento, 
    success : function(text){ 
     if (text == "success"){ 
      formSuccess(); 
     } else { 
      formError(); 
      submitMSG(false,text); 
     } 
    } 
}); 
} 

function formSuccess(){ 
    $("#condominiForm")[0].reset(); 
    submitMSG(true, "Messaggio inviato!") 
} 

function formError(){ 
    $("#condominiForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
    $(this).removeClass(); 
}); 
} 

function submitMSG(valid, msg){ 
    if(valid){ 
     var msgClasses = "h3 text-center tada animated text-success"; 
    } else { 
     var msgClasses = "h3 text-center text-danger"; 
    } 
    $("#msgSubmitCondomini").removeClass().addClass(msgClasses).text(msg); 
} 

PHP

<?php 
$errorMSG = ""; 

// NAME 
if (empty($_POST["name"])) { 
    $errorMSG = "Name is required "; 
} else { 
    $name = $_POST["name"]; 
} 

// COGNOME 
if (empty($_POST["cognome"])) { 
    $errorMSG .= "Cognome is required "; 
} else { 
    $cognome = $_POST["cognome"]; 
} 

// EMAIL 
if (empty($_POST["email"])) { 
    $errorMSG .= "Email is required "; 
} else { 
    $email = $_POST["email"]; 
} 

// TELEFONO 
if (empty($_POST["telefono"])) { 
    $errorMSG .= "Telefono is required "; 
} else { 
    $telefono = $_POST["telefono"]; 
} 

// NOME CONDOMINIO 
if (empty($_POST["nomeCondominio"])) { 
    $errorMSG .= "Message is required "; 
} else { 
    $nomeCondominio = $_POST["nomeCondominio"]; 
} 

// INDIRIZZO CONDOMINIO 
if (empty($_POST["indirizzoCondominio"])) { 
    $errorMSG .= "Message is required "; 
} else { 
    $indirizzoCondominio = $_POST["indirizzoCondominio"]; 
} 

// COMUNE CONDOMINIO 
if (empty($_POST["comuneCondominio"])) { 
    $errorMSG .= "Message is required "; 
} else { 
    $comuneCondominio = $_POST["comuneCondominio"]; 
} 

// PROVINCIA CONDOMINIO 
if (empty($_POST["provinciaCondominio"])) { 
    $errorMSG .= "Message is required "; 
} else { 
    $provinciaCondominio = $_POST["provinciaCondominio"]; 
} 

// UNITA CONDOMINIO 
if (empty($_POST["unitaCondominio"])) { 
    $errorMSG .= "Message is required "; 
} else { 
    $unitaCondominio = $_POST["unitaCondominio"]; 
} 

// ASCENSORI CONDOMINIO 
if (!empty($_POST["ascensoriCondominio"])) { 
    $ascensoriCondominio = $_POST["ascensoriCondominio"]; 
} else { 
    $ascensoriCondominio = "Valore non specificato"; 
} 

// SCALE CONDOMINIO 
if (!empty($_POST["scaleCondominio"])) { 
    $scaleCondominio = $_POST["scaleCondominio"]; 
} else { 
    $scaleCondominio = "Valore non specificato"; 
} 

// RISCALDAMENTO CONDOMINIO 
if (!empty($_POST["riscaldamento"])) { 
    $riscaldamento = $_POST["riscaldamento"]; 
} else { 
    $riscaldamento = "Valore non specificato"; 
} 

$EmailTo = "alessandrocpr@gmail.com"; 
$Subject = "Nuova contatto da sito Abacond"; 

// prepare email body text 
$Body = "REFERENTE"; 
$Body .= "\n"; 
$Body .= "Name: "; 
$Body .= $name; 
$Body .= "\n"; 
$Body .= "Cognome: "; 
$Body .= $cognome; 
$Body .= "\n"; 
$Body .= "Email: "; 
$Body .= $email; 
$Body .= "\n"; 
$Body .= "Telefono: "; 
$Body .= $telefono; 
$Body .= "\n"; 
$Body .= "\n"; 
$Body .= "CONDOMINIO"; 
$Body .= "\n"; 
$Body .= "\n"; 
$Body .= "Nome: "; 
$Body .= $nomeCondominio; 
$Body .= "\n"; 
$Body .= "Indirizzo: "; 
$Body .= $indirizzoCondominio; 
$Body .= "\n"; 
$Body .= "Comune: "; 
$Body .= $comuneCondominio; 
$Body .= "\n"; 
$Body .= "Provincia: "; 
$Body .= $provinciaCondominio; 
$Body .= "\n"; 
$Body .= "Numero unità: "; 
$Body .= $unitaCondominio; 
$Body .= "\n"; 
$Body .= "Numero ascensori: "; 
$Body .= $ascensoriCondominio; 
$Body .= "\n"; 
$Body .= "Numero scale: "; 
$Body .= $scaleCondominio; 
$Body .= "\n"; 
$Body .= "Riscaldamento centralizzato: "; 
$Body .= $riscaldamento; 
$Body .= "\n"; 

var_dump($Body); 

// send email 
$success = mail($EmailTo, $Subject, $Body, "From:".$email); 
// redirect to success page 
if ($success && $errorMSG == ""){ 
    echo "success"; 
}else{ 
    if($errorMSG == ""){ 
     echo "Qualcosa è andato storto :("; 
    } else { 
     echo $errorMSG; 
    } 
} 
?> 

Answer 1

Ihre Formularaktion lautet php/process.php und Ihr Ajax-Anruf lautet php/process.php. Wenn Sie auf die Senden-Schaltfläche klicken, wird das JS-Ereignis für das Formular ausgelöst, aber es wird keine alternative Seite gerendert und die Formularaktion des HTML-Codes außer Kraft gesetzt. Ich würde vorschlagen, die Schritte der Interaktion der Komponenten zu vereinfachen, um sie besser zu verstehen, bevor Sie versuchen, die Komplexität dessen, was Sie hier haben, zu beherrschen.

Answer 2

ich Ihren Code in localhost reproduziert und alles funktioniert gut, wenn löschen Sie die validator() Funktion:

$("#condominiForm").on("submit", function (event) { 

Ohne dass verhindert die jquery noch leer Eingaben einreichen und wenn alle, alle ausgeführt gefüllt ist, wird die Ajax-Aufruf die Felder gesendet und alles funktioniert gut.

Sie können dies sehen auf: https://www.dropbox.com/s/eqc3vzxpwb0jmgj/test.png?dl=0

Versuchen Sie, dass ein Teil zu entfernen. Hoffe es hilft dir!

UPDATE

Auch für die E-Mail zu senden, fügen Sie diesen Teil besser E-Mails zu senden:

$reply = "your@mail.com"; 
$headers = "From: " . strip_tags($Subject) . "\r\n"; 
$headers .= "Reply-To: ". strip_tags($reply) . "\r\n"; 
$headers .= "MIME-Version: 1.0\r\n"; 
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 

Jetzt können Sie HTML-Tags verwenden:

$Body = '<html><body>'; 
$Body .= '<your actual code with html tags>'; 
$Body .= '</body></html>'; 

UPDATE 2

Sie haben vergessen, einen Wert für die Radioeingänge einzustellen:

<input .... value='0'> oder <input ... value='Si'>

Answer 3

$("#condominiForm").onclick(function (event) { 

Sie auf Click-Ereignis verwenden, sollten alle Ihre j Abfrage-Code seiner guten Ihres Projekts zu laufen, weil einige Zeit auf Einreichung nicht