How to resolve page redirection in form?

Question

I’m creating a land-page lead capture. I need to pass the files via ajax to not have to redirect the page, however whenever I send the data to the page that should include it in the database it tries to redirect the page to a course page or something like that. Since Ajax is not my forte, I need your help to know where the mistake is.
I find it important to note that the site is made in wordpress.
How can I solve this problem?

 $("#submit").submit(function (e){
        e.preventDefault();
        $("#submit").val('Enviando...');
        $.ajax({
            url: 'process.php',
            type: 'post',
            dataType: 'html',
            data: {
                'metodo': $('#metodo').val(),
                'nome': $('#nome').val(),
                'sobrenome': $('#sobrenome').val(),
                'email': $('#email').val(),
                'telefone': $('#telefone').val(),
                'curso': $('#curso').val()    
            }
        }).done(function (data){
            alert(data);
            
            $("#submit").val('Enviar');
            $('#nome').val('');
            $('#sobrenome').val('');
            $('#email').val('');
            $('#telefone').val('');
            $('#curso').val('');
            
        });
    });

<form class="cata-lead">
                <div class="lp-titulo">
                    Preencha este formulário e garanta seu futuro entre os <obs>melhores</obs>.
                </div>
                <div class="item-cata-lead">
                    <input type="text" name="nome" id="nome" placeholder="Primeiro Nome*"/>
                    <input type="text" name="sobrenome" id="sobrenome" placeholder="Sobrenome*"/>
                    <input type="email" name="email" id="email" placeholder="E-mail*"/>
                    <input type="tel" name="telefone" id="telefone" placeholder="Telefone*"/>
                    <select name="curso" id="curso">
                    <!--Laço para preenchimento dos cursos disponíveis-->
                        <option>Curso de interesse*</option>
                        <?php
                            foreach ($cursos as $curso):
                        ?>
                        <option value="<?php echo utf8_encode($curso['nome']); ?>">
                            <?php echo utf8_encode($curso['nome']); ?>
                        </option>
                        <?php
                            endforeach;
                        ?>
                    </select>
                    <input type="hidden" id="metodo" value="metodo">
                    <input type="submit" id="submit" name="submeter" value="Estou interessado!">
                </div>
            </form>

Answer 1

Just put false Return at the end of the function, and put the Submit event in the form and not on the example button:

$(".cata-lead").submit(function (e){
        e.preventDefault();
        $("#submit").val('Enviando...');
        $.ajax({
            url: 'process.php',
            type: 'post',
            dataType: 'html',
            data: {
                'metodo': $('#metodo').val(),
                'nome': $('#nome').val(),
                'sobrenome': $('#sobrenome').val(),
                'email': $('#email').val(),
                'telefone': $('#telefone').val(),
                'curso': $('#curso').val()    
            }
        }).done(function (data){
            alert(data);

            $("#submit").val('Enviar');
            $('#nome').val('');
            $('#sobrenome').val('');
            $('#email').val('');
            $('#telefone').val('');
            $('#curso').val('');

        });
       return false;
    });

Answer 2

You’re using the wrong selector, that code actually never runs because the button #submit has no event submit, only the <form> is what it is. Or you use .click on the button, or you use .submit in <form>.

Therefore:

$("#submit").click(function (e){
    e.preventDefault();

or

$(".cata-lead").submit(function (e){
    e.preventDefault();