堆棧內存溢出
  簡體   English   中英

聯系表格 - 提交按鈕不起作用

[英]Contact form - submit button not working

 原文  2016-03-22 22:40:26  5   3    javascript/ php/ jquery/ html/ forms

問題描述

我正在關注這篇廣泛的文章（帶有來源）以在網站上制作聯系表格。 但是，我需要一個稍微復雜一點的表單，包含更多的字段和一個單選按鈕組。

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

3 個解決方案

解決方案1
 0  2016-03-22 22:54:05

您的表單操作是php/process.php而您的 ajax 調用是php/process.php 。 當您單擊提交按鈕時，表單的 JS 事件會被觸發，但不會呈現替代頁面並覆蓋 html 的表單操作。 我建議簡化組件交互的步驟，以便在嘗試掌握這里所擁有的復雜性之前更好地理解它們。

解決方案2
 0  2016-03-22 23:00:35

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

解決方案3
 0  

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

您應該使用點擊事件來運行您的所有 j 查詢代碼，這對您的項目有好處，因為提交的某些時間不起作用

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我的聯系表格提交按鈕不起作用 提交聯系表格不起作用 提交聯系表單上的單選按鈕 聯系人表單提交按鈕上的Javascript 提交和重置不適用於聯系表格 表單提交按鈕不起作用 聯系表格，單擊后禁用提交按鈕 在WordPress聯系表格7中更改“提交”按鈕的值 聯系人表單“提交”按鈕在按下時不刷新 php 聯系表格在單擊提交按鈕時沒有響應
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM