Submit does not call function

Question

After changing the code, I left this way but I analyzed the browser console and realized that the Submit button still not calling the function:

<div class="container">
<div class="spacer">
<div class="row contact">
<div class="col-lg-6 col-sm-6 ">

<form id="form-ajax">
        <input type="text" class="form-control" placeholder="Nome completo:" id="nome">
        <input type="text" class="form-control" placeholder="E-mail:" id="email">
        <input type="text" class="form-control" placeholder="Número para contato:" id="num">
        <textarea rows="6" class="form-control" placeholder="Digite sua mensagem" id="msg"></textarea>
        <input type="button" class="btn btn-success" id="enviar" value="Enviar">
</form>
</div>
</div>
</div>
</div>

<script>
$(document).ready(function(){
    $('#form-ajax').click(function(e){  
    e.preventDefault();
    alert('entrou na função');
    if($('#enviar').val() === 'Enviando...'){
    return(false);
    }

    $('#enviar').val('Enviando...');

    $.ajax({
        url: 'phpmailer.php',
        type: 'post',
        dataType: 'json',
        data: {
            'nome':$('#nome').val(),
            'email':$('#email').val(),
            'num':$('#num').val(),
            'msg':$('#msg').val()
            }
    }).done(function(data){

        alert(data);
        $('#nome').val();
        $('#email').val();
        $('#num').val();
        $('#msg').val();

    });
});
 });
</script>

Answer 1

pass the jquery script to head if you don’t have it yet.

then put the

$(document).ready(function(){
    //...o seu script atual aqui   
});

and finally pass the e.preventDefault(); just below the

$('#form-ajax').submit(function(e) {
     e.preventDefault();

Answer 2

The problem is that the jQuery script runs before the page is fully loaded so it cannot assign the event to the form as it does not exist yet. You can solve this in 2 ways:

1 - You bring the script to the end of the page.

2 - Put any script inside jQuery’s "ready" function to say that the script should only be executed after the page has been loaded, like this:

$(document).ready(function(){
    //...o seu script atual aqui
});

Answer 3

Insert your script into the function below.

$(document).ready(function(){
    // Aqui
});

This will cause your script to run only after loading the page. A tip: always put your scripts after the content of the pages, before closing the body tag to prevent them from blocking the page loading for possible errors in the script.

Answer 4

<script type="text/javascript">
jQuery(function($) {
    $('#form-ajax').submit(function(e){
           alert('entrou na função');
    if($('#enviar').val() === 'Enviando...'){
           return(false);
    }$('#enviar').val('Enviando...');

    $.ajax({
        url: 'phpmailer.php',
        type: 'post',
        dataType: 'json',
        data: {
            'nome':$('#nome').val(),
            'email':$('#email').val(),
            'num':$('#num').val(),
            'msg':$('#msg').val()
            }
    }).done(function(data){

        alert(data);
        $('#nome').val();
        $('#email').val();
        $('#num').val();
        $('#msg').val();

    });
    e.preventDefault();
     });
 });
</script>

See if this works, don’t forget the Jquery library, before the script.