How to resolve undue page redirection in form?

Question

How to resolve undue page redirection in form?

Navigation

#1 by (2 votes)
#2 by (2 votes)

-1

I am creating a land-page for capturing leads. I need to pass the files via ajax so I do not have to redirect the page, however whenever I send the data to the page that must include the database it tries to redirect the page to a course page or something. As Ajax is not my strong, I need your help to know where the error is.
I think it's important to point out 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>

javascript ajax wordpress

asked by anonymous 07.08.2017 / 23:46

2 answers

2

You are using the wrong selector, this code never actually runs because the #submit button has no submit event, only <form> has it. Or you use .click on the button, or you use .submit on <form> .

Therefore:

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

or

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

08.08.2017 / 07:42

Multiple requests with $ .ajax, synchronously See if there is a file in a folder C # [closed]

score 2 · Accepted Answer

Just put return false at the end of the function, and put the submit event in the form and not in 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;
    });