Formulario enviando 2 x

[alan simao 0]

Olá, boa noite;

 

Gostaria de uma ajuda no meu formulário, o mesmo está enviando pro banco de dados 2 x o mesmo formulário. E gostaria que me ajudasse a aparecer uma mensagem de enviado com sucesso que esta na <div> da minha pagina index. 

        // Use Ajax to submit form data
    $(document).ready(function () {
        $('#contact_form').submit(function () {
            var data = $('#contact_form').serialize();

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'rescue.php',
                data: data,
                async: true,
                success: function (response) {
                    location.reload();
                }
            });
            return false;
        })
    })
});

 

E essa é pra envio

 

Include "connect.php";

$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$address = $_POST['address'];
$city = $_POST['city'];
$state = $_POST['state'];
$zip = $_POST['zip'];
$website = $_POST['website'];
$hosting = $_POST['hosting'];
$comment = $_POST['comment'];


$sql= "INSERT INTO accounts (first_name,last_name,email,phone,address,city,state,zip,website,hosting,comment) VALUES ('$first_name','$last_name','$email','$phone','$address','$city','$state','$zip','$website','$hosting','$comment')";
mysqli_query($mysqli,$sql) or die(error());

    echo json_encode("success_message");

[Pita 53]

Como que você esta disparando o submit?

 

No form está configurado o action para chamar esta página rescue.php? Não poderia estar enviando uma vez pelo form e outra vez pela chamada ajax?

 

Só alguns chutes, não dá para saber sem olhar toda a pagina

[alan simao 0]

Boa noite, o problema da duplicação eu resolvir, só que não está aparecendo a mensagem de "formulario enviado com sucesso.

 

 

//<button type="submit" id="btEnviar" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>

[Pita 53]

Faz o seguinte:

 

1 - Muda o botão para o tipo "button"

<button type="button" id="btEnviar" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>

 

2 - Muda seu javascript para ser disparado no evento click do button

$('#btEnviar').click(function () {

 

Com isso o botão não irá disparar o submit do formulário e ele executará o envio das informações via ajax. Acredito que isso irá resolver

[Guilherme Luiz 41]

Isso acontece muito!

Para resolver o problema eu utilizei o unbind e preventDefault olha ai:

 

no html eu coloco:

<button type="button" onclick="area('meuformulario','url-que-vou-chamar','div-onde-vou-printar-o-retorno');">meu botão</button>

 

Meu arquivo ajax.js

function Area(dados ,url_dest, divCallback){
    
    var frm = $('#'+dados); //id do meu formulario
    
    $(frm).unbind().submit(function(e){ //ao aplicar o unbind o meu script evita as requisições duplicadas
        
    var urlReq                = url_dest;
    var divBack              = divCallback;
    
$.ajax({
    type: "POST", 
    url: "includes/paginas/"+urlReq+".php",
    dataType:"html",
    cache:false,
    data: frm.serialize(),
    
            beforeSend: function(){
                $("#"+divBack).html('<span class=\'loader\' style=\'display:block\'></span>');
            },
      
              success: function(msg) {
            $("#"+divBack).html(msg);
            }
    });
    
    e.preventDefault(); //mais uma função para garantir que não seja duplicada a requisição
    return false;
    
    });
}