Error while trying to display error/success messages and page continues to reload with ajax

Question

Hello, I am developing a "soon" page, where I have the functionality of registering email.

I made this feature with ajax and php, using the database mysql, and I’m facing 2 problems.

• When typing the email and clicking the button the page reloads, but it should not because I am using the ajax.

• Every time I try to make the registration, it is successful, however the successfully registered message is not displayed, and while making several record, in sequence, to test the page, all worked, but sometimes displays the error message I created.

Ex:

The code of my page index.php

<form id="SignupForm" method="POST">

                    <div class="form-group">
                    <input type="text" id="email" class="form-control-input" placeholder="E-mail..." required>
                    </div><div class="form-group">
                        <button type="submit" class="form-control-submit-button" id="submit" onclick="inserir_registo()">Enviar</button>
                    </div>

                    <div class="msg-error" id="msg"></div>
                </form>

    <script type="text/javascript">
function inserir_registo()
{

    //dados a enviar, vai buscar os valores dos campos que queremos enviar para a BD
    var dadosajax = {'email':$("#email").val()};
    pageurl = 'grava.php';

    $.ajax({

        //url da pagina
        url: 'insert.php',
        //parametros a passar
        data: dadosajax,
        //tipo: POST ou GET
        method: 'POST',
        //cache
        cache: false,
        //se ocorrer um erro na chamada ajax, retorna este alerta
        //possiveis erros: pagina nao existe, erro de codigo na pagina, falha de comunicacao/internet, etc etc etc
        error: function(){
            alert('Erro: Inserir Registo!!');
        },
        //retorna o resultado da pagina para onde enviamos os dados
        success: function(result)
        { 
            //se foi inserido com sucesso
            if($.trim(result) == '1')
            {
                alert("O seu registo foi inserido com sucesso!");
            }
            //se foi um erro
            else
            {
                alert("Ocorreu um erro ao inserir o seu registo!");
            }
        }
    });
}
</script>

and at the end of the page insert.php

<?php
    //Conexão à base de dados
    mysql_connect("localhost", "root", "") or die(mysql_error());
    mysql_select_db("birdleco_site") or die(mysql_error());

    //recebe os parâmetros

    $email = $_REQUEST['email'];

    try
    {
        //insere na BD
        $sql = "INSERT INTO captura (Email_Captura) VALUES('".trim($email)."')";
        $result = mysql_query($sql) or die(mysql_error());

        //retorna 1 para no sucesso do ajax saber que foi com inserido sucesso
        echo "1";
    } 
    catch (Exception $ex)
    {
        //retorna 0 para no sucesso do ajax saber que foi um erro
        echo "0";
    }
?>

NOTE: I’m using this jquery: "jquery-1.10.2.min. js". Give me a light please!

Answer 1

Try changing the button type to "button". The type "Submit" causes the browser to run the form, which in turn should cancel the request made in Ajax.

https://www.w3schools.com/tags/att_input_type_submit.asp

Answer 2

$('#Signupform'). on('Submit', Function(e){ e. preventDefault(); var dadosajax = {'email':$("#email"). val()}; pageurl = 'save.php';

$.ajax({

    //url da pagina
    url: 'insert.php',
    //parametros a passar
    data: dadosajax,
    //tipo: POST ou GET
    method: 'POST',
    //cache
    cache: false,
    //se ocorrer um erro na chamada ajax, retorna este alerta
    //possiveis erros: pagina nao existe, erro de codigo na pagina, falha de comunicacao/internet, etc etc etc
    error: function(){
        alert('Erro: Inserir Registo!!');
    },
    //retorna o resultado da pagina para onde enviamos os dados
    success: function(result)
    { 
        //se foi inserido com sucesso
        if($.trim(result) == '1')
        {
            alert("O seu registo foi inserido com sucesso!");
        }
        //se foi um erro
        else
        {
            alert("Ocorreu um erro ao inserir o seu registo!");
        }
    }

});

Remove the Onclick function from the Ubmit button and you’re done.