Contact form - submit button not working

Question

I'm following this extensive article (with sources) to make a contact form on a website. However, I need a slightly more complex form, with more fields and also a radio buttons group.

I simply added to the process.php and scripts.js files the additional fields I needed. Amongst the many errors I could get, the submit button simply doesn't work at all. I click on it and nothing happens. I'm a newbie in PHP and JS, so I don't know a proper way how to debug and understand where the problem is. Could you help me find it?

Here's my code:

EDIT:

This part actually doesn't work, because I get an empty field in the string yielded. Any idea? These are the non-required fields:

// 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;
    }
}
?>

without looking at your code or trying to see the error- you should investigate the use of .serialize() when submitting a form via AJAX - you do not need to have all the variables with the input values. use :formData = $('#condominiForm').serialize(), and that will form the basis of the data that you submit. — gavgrif, Mar 22 '16 at 22:46
I reproduce your code in local, and all works except of the validator() function. Try removing that function or make different validator(). What is that function? a library? — JP. Aulet, Mar 22 '16 at 22:50
That looks like bootstrap validator. Are you getting any bootstrap errors? — Leo Farmer, Mar 22 '16 at 22:53
@LeoFarmer yes, it's bootstrap validator as suggested in the article. It works well with a simple form, maybe not so well with many fields? I didn't see any error though, you mean in the dev console in the browser? — The Condor, Mar 22 '16 at 23:04

score 0 · Answer 1 · answered Mar 22 '16 at 22:54

0

Your form action is php/process.php and your ajax call is php/process.php. When you click the submit button the JS event for the form is triggered but doesn't render an alternate page and override the form action of the html. I'd suggest simplifying the steps of the interaction of the components to understand them better before trying to master the complexity of what you have here.

answered Mar 22 '16 at 22:54

Kirk Powell

908
9
14

The form action is never executed, there is a 'event.PreventDefault' stopping it. – JP. Aulet Mar 22 '16 at 22:55
Yes. I missed that. However, my point was that the solution here is to simplify the code to the basic components to understand how they interact. – Kirk Powell Mar 22 '16 at 22:59

JP. Aulet · Answer 2 · 2016-03-23T00:11:40.747

0

I reproduced your code in localhost and all works fine if delete the validator() function:

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

Without that, the jquery still prevents to submit blank inputs and when all filled, the ajax call is executed, all the fields sended and all works fine.

You can see this on: https://www.dropbox.com/s/eqc3vzxpwb0jmgj/test.png?dl=0

Try removing that part. Hope it helps to you!

UPDATE

Also, for sending the mail, add this part for sending better emails:

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

Now you can use html tags:

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

UPDATE 2

You forgot to set a value for radio inputs:

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

edited Mar 23 '16 at 00:11

answered Mar 22 '16 at 23:00

JP. Aulet

4,375
4
26
39

Thanks, that helped going past the weird behavior! However, now I get "Qualcosa è andato storto", and I think it's because with the current code if one of the non-required fields is empty it doesn't build the string correctly. See my update question, can you spot errors? Thanks! – The Condor Mar 22 '16 at 23:35
See the answer for: http://stackoverflow.com/questions/2323463/how-can-i-catch-an-error-caused-by-mail . I couldn't do better ;) . Maybe is a mail server misconfiguration or something else: http://stackoverflow.com/questions/14456673/sending-email-with-php-from-an-smtp-server . When you catch the error, you will guess what's happining.. if not, we will see – JP. Aulet Mar 23 '16 at 00:05

score 0 · Answer 3 · answered Mar 23 '16 at 07:33

0

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

you should use on click event to run your all j query code its good of your project because some time on submit is not working

answered Mar 23 '16 at 07:33

Contact form - submit button not working

3 Answers3