联系表单 - 提交按钮不起作用

Question

我跟随这篇广泛的文章（有消息来源）在网站上制作联系表格。但是，我需要一个稍微复杂的表单，包含更多字段和单选按钮组。

我只是在process.php和scripts.js文件中添加了我需要的其他字段。在我可以获得的许多错误中，提交按钮根本不起作用。我点击它没有任何反应。我是PHP和JS的新手，所以我不知道如何调试和理解问题的正确方法。你能帮我找到吗？

这是我的代码：

修改：

这部分实际上不起作用，因为我在字符串中得到一个空字段。任何的想法？这些是非必填字段：

// 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

您的表单操作为php/process.php，您的ajax调用为php/process.php。单击“提交”按钮时，将触发表单的JS事件，但不会呈现备用页面并覆盖html的表单操作。我建议在尝试掌握这里的复杂性之前，先简化组件交互的步骤，以便更好地理解它们。

Answer 2

我在localhost中复制了您的代码，如果删除validator()函数，则一切正常：

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

如果没有这个，jquery仍然会阻止提交空白输入，当所有填充时，执行ajax调用，发送所有字段并且一切正常。

您可以在https://www.dropbox.com/s/eqc3vzxpwb0jmgj/test.png?dl=0

上看到此信息

尝试删除该部分。希望对你有所帮助！

更新

此外，要发送邮件，请添加此部分以发送更好的电子邮件：

$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";

现在你可以使用html标签了：

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

更新2

您忘记为无线电输入设置值：

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

Answer 3

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

你应该在点击事件上使用你的所有j查询代码来运行你的项目，因为提交的某些时间不起作用