最受欢迎

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

Contact form - submit button not working

本文关键字：按钮 不起作用 提交 表单 联系人 | 更新日期: 2023-09-27

我正在关注这篇内容广泛的文章（有来源），以便在网站上制作联系表格。然而，我需要一个稍微复杂一点的表单，有更多的字段，还有一个单选按钮组。

我只是在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;
    }
}
?>

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

我在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'>

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

您应该使用点击事件来运行您的allj查询代码，这对您的项目有好处，因为提交时有一段时间不起作用

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习