PHP Form is not submitting when clicking the submit button

Question

For some reason my form is not submiting and therefore I cant POST the variables to use them. I tried using the action attribute and submiting the form through jQuery, nothing works. I also get no errors in the console.

Here is the full code of my form:

<!-- Form -->
<form method="POST" enctype="multipart/form-data" action="candidatura.php" id="formCandidatura">


    <!-- Name -->
    <div class="col-md-8">
        
        <div class="form-group">

            <label for="form_name">Nome Completo *</label>
            <input type="text" class="form-control" name="candNome"
                id="candNome">

        </div>
    </div><!-- /End Name -->


    <!-- Subject -->
    <div class="col-md-4">
        <div class="form-group">

            <label for="form_subject">Data de nascimento *</label>
            <input type="date" class="form-control" name="candDataNasc"
                id="candDataNasc">

        </div>
    </div><!-- /End Subject -->


    <!-- Message -->
    <div class="col-md-4">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Nacionalidade *</label>
            <input type="text" class="form-control" name="candNac"
                id="candNac">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->

        <!-- Message -->
        <div class="col-md-4">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Naturalidade *</label>
            <input type="text" class="form-control" name="candNat"
                id="candNat">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->

        <!-- Message -->
        <div class="col-md-4">
        <!-- Form Group -->
        <div class="form-group">

        <label for="form_message">Género *</label>
        <select class="custom-select" name="candGen" id="candGen">
            <option disabled selected value="">Clique para abrir o menu</option>
            <option value="0">Masculino</option>
            <option value="1">Feminino</option>
        </select>

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->

    <!-- Message -->
    <div class="col-md-8">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Morada *</label>
            <input type="text" class="form-control" name="candMorada"
                id="candMorada">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->

    <!-- Message -->
    <div class="col-md-4">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Código Postal *</label>
            <input type="text" class="form-control" name="candCodPost"
                id="candCodPost">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    <div class="col-md-4">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Cidade/loc. e freguesia *</label>
            <input type="text" class="form-control" name="candCidade"
                id="candCidade">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    <div class="col-md-8">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">E-mail *</label>
            <input type="text" class="form-control" name="candEmail"
                id="candEmail">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    <div class="col-md-4">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Telefone </label>
            <input type="text" class="form-control" name="candTelefone"
                id="candTelefone">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    <div class="col-md-4">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Telemóvel *</label>
            <input type="text" class="form-control" name="candTelemovel"
                id="candTelemovel">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    <div class="col-md-4">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">NIF *</label>
            <input type="text" class="form-control" name="candNif"
                id="candNif">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->

    <!-- Message -->
    <div class="col-md-12">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Tipo de documento de identificação *</label>
        <select class="custom-select" name="candTipoDoc" id="candTipoDoc">
            <option disabled selected value="">Clique para abrir o menu</option>
            <option value="0">Cartão de cidadão</option>
            <option value="1">Bilhete de identidade</option>
        </select>

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    

    <div class="col-md-6">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Nº do documento de identificação *</label>
            <input type="text" class="form-control" name="candNDoc"
                id="candNDoc">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    <div class="col-md-6">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Validade do documento de identificação *</label>
            <input type="date" class="form-control" name="candValDoc"
                id="candValDoc">

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    
    <div class="col-md-6">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Habilitações literárias *</label>
            <input type="text" class="form-control" name="candHabLit"
                id="candHabLit">
        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    <div class="col-md-6">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Situação profissional *</label>
            <input type="text" class="form-control" name="candSitProf"
                id="candSitProf">
        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    <div class="hr-divider hr-divider-style-6 text-center">
        <i class="fa fa-comments-o"></i>
    </div>

    <div class="col-md-12">
        <!-- Form Group -->
        <div class="form-group">
            <label for="form_message">Designação do grau que possui</label>
            <input type="text" class="form-control" name="candGrau"
                id="candGrau">
        </div><!-- /End Form Group -->
    </div><!-- /End Message -->

    <div class="col-md-6">
        <!-- Form Group -->
        <div class="form-group">
            <label for="form_message">Instituição que concedeu o grau</label>
            <input type="text" class="form-control" name="candInstGrau"
                id="candInstGrau">
        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    
    <div class="col-md-6   ">
        <!-- Form Group -->
        <div class="form-group">
            <label for="form_message">Data da obtenção do grau</label>
            <input type="date" class="form-control" name="candDataGrau"
                id="candDataGrau">
        </div><!-- /End Form Group -->
    </div><!-- /End Message -->
    <div class="hr-divider hr-divider-style-6 text-center">
        <i class="fa fa-comments-o"></i>
    </div>

    <!-- Message -->
    <div class="col-md-12">
        <!-- Form Group -->
        <div class="form-group">

            <label for="form_message">Informações sobre a experiência profissional</label>
            <textarea class="form-control" name="candInstFunc"
                id="candInstFunc"></textarea>

        </div><!-- /End Form Group -->
    </div><!-- /End Message -->

    <!-- Submit Button -->
    <div class="col-md-12">
        <!-- Form Group -->
        <div class="form-group">
            <button name="submeter" id="submeter" type="submit" class="btn btn-gfort">Submeter</button>
        </div><!-- /End Form Group -->
    </div><!-- /End Submit Button -->

    
</form><!-- /End Form -->

Here is the jQuery I used to try to submit the form:

 <script>
    $(document).ready(function(){
       $("#submeter").on("click", function(){
           $("#formCandidatura").submit(); 
       });
    });
 </script>

action attribute: candidatura.php:

<?php

    //Tratamento das variáveis do formulário
    echo "<script>alert('Im here')</script>";
    $candNome      = $_POST['candNome'];
    $candDataNasc  = $_POST['candDataNasc'];
    $candNac       = addslashes($_POST['candNac']);
    $candNat       = addslashes($_POST['candNat']);
    $candGen       = addslashes($_POST['candGen']);
    $candMorada    = addslashes($_POST['candMorada']);
    $candCodPost   = $_POST['candCodPost'];
    $candCidade    = addslashes($_POST['candCidade']);
    $candEmail     = addslashes($_POST['candEmail']);
    $candTelefone  = intval($_POST['candTelefone']);
    $candTelemovel = intval($_POST['candTelemovel']);
    $candTipoDoc   = $_POST['candTipoDoc'];
    $candNDoc      = intval($_POST['candNDoc']);
    $candValDoc    = $_POST['candValDoc'];
    $candNif       = intval($_POST['candNif']);
    $candHabLit    = addslashes($_POST['candHabLit']);
    $candSitProf   = addslashes($_POST['candSitProf']);
    $candGrau      = addslashes($_POST['candGrau']);
    $candInstGrau  = addslashes($_POST['candInstGrau']);
    if ($_POST['candDataGrau'] !== "") {
        $candDataGrau = $_POST['candDataGrau'];
    } else {
        $candDataGrau = "1000-01-01";
    }
    $candInstFunc  = addslashes($_POST['candInstFunc']);
    $data = date("Y-m-d H:i:s");
    $query = "INSERT INTO tbl_candidatos(cand_nome, cand_datanasc, cand_nac, cand_nat, cand_gen, cand_morada, cand_codpost, cand_cidade, cand_email, cand_telefone, cand_telemovel, cand_tipodoc, cand_ndoc, cand_valdoc, cand_nif, cand_hablit, cand_sitprof, cand_grau, cand_instgrau, cand_datagrau, cand_instfunc, datainsc) VALUES ('$candNome','$candDataNasc','$candNac','$candNat','$candGen','$candMorada','$candCodPost','$candCidade','$candEmail','$candTelefone','$candTelemovel','$candTipoDoc','$candNDoc','$candValDoc', '$candNif','$candHabLit','$candSitProf','$candGrau','$candInstGrau','$candDataGrau','$candInstFunc', '$data')";
    die($query);
    $result = mysqli_query($link, $query); // Executa a instrução MYSQL
    if($result){
        echo "<script>alert('Dados Guardados com sucesso');</script>";
        print "<script>top.location = 'adminpanel.php?id=7';</script>";
    } else {
        echo "<script>alert('ERRO!!! Dados não guardados...');</script>";
    }
?>

presumably the `submit` button is within the `form` or is correctly assigned to the form using the `form="formCandidatura"` attribute on the button? Please show the form in it's entirety — Professor Abronsius, Jun 14 '22 at 14:23
So `alert('Im here')` never gets triggered? Why use JS/jquery, that submit button itself should submit the form with no problems. Make sure all elements inside the form are properly closed so the button gets recognized — brombeer, Jun 14 '22 at 14:30
@brombeer Yes, it never triggers, everything is closed properly. Just used jQuery because the button wasn't working. — neptune, Jun 14 '22 at 14:32
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Jun 14 '22 at 14:36
Unrelated, a label's `for` attribute should point to a valid `id` attribute of an element. Your `for` attributes don't. (Also can't reproduce your problem, that form submits just fine) — brombeer, Jun 14 '22 at 14:40
Well it doens't submit that fine as this is the reason I'm posting this. You're right about the for attribute but that shouldn't be the problem, right? @brombeer — neptune, Jun 14 '22 at 14:43
We don't see your full HTML code, there might be some element overlaying the button so you can't click it or any other reason (unclosed HTML elements outside of the form etc). The form you posted here (which is all we see) submits fine. Yes, those `for` attributes are _unrelated_ as I wrote — brombeer, Jun 14 '22 at 14:46
How can I see if something is overlaying the button or see what the button is doing? I get no errors in the console and I can click the button because it show a loading animation for like 1 second and stops. — neptune, Jun 14 '22 at 14:52
is `candidatura.php` within the same directory as this contact form? When the form is submitted what exactly happens? Does the page redirect to `candidatura.php` and then do nothing ? — Professor Abronsius, Jun 14 '22 at 14:57
The button shows a loading animation? Is any other JS involved? If you can click the button most likely nothing is overlaying. Check your browser's DevTools/Network tab to see if any request is being made. Strip down your page to only the form and see if it submits. — brombeer, Jun 14 '22 at 14:57
That was really useful, the network tab shows that some requests are being made and my form actually submits if my page has nothing but the form. I think I can figure it out now — neptune, Jun 14 '22 at 15:02

score 1 · Accepted Answer · answered Jun 14 '22 at 15:36

After so much time trying to fix the issue I gradually removed my code from the page leaving only the form and it worked just fine. Then, I realized that it was a class from a div that was causing the issue of not letting the form be submitted.

 <div class="form-block contact-form-block">

The class form-block had a property "display: table" which specifies the display behavior of the div and it was making the div to behave like a table.
Since my from was inside the div, it wouldn't submit because a form is not allowed to be a child element of a table.

PHP Form is not submitting when clicking the submit button

1 Answers1