Error in ajax when sending by mobile

Question

good evening, I have the following ajax:

jQuery('#form-contato').submit(function(){

    var nome  = $(this).find('[name="nome"]').val();
    var email = $(this).find('[name="email"]').val();
    var assunto   = $(this).find('[name="assunto"]').val();
    var mensagem   = $(this).find('[name="mensagem"]').val();

    var dados = "&nome=" + nome + "&email=" + email + "&assunto=" + assunto + "&mensagem=" + mensagem;

    jQuery.ajax({
        type: "POST",
        url: "send_contato.php",
        async: true,
        data: dados,
        success: function(data){
          openModal(nome + ", sua mensagem foi enviada com sucesso, em breve entraremos em contato!","success");            
        },
        error: function(data){
            openModal("Houve um erro","error");            
        }
    });

    return false;
});

it works on the desktop, but on mobile always triggers error message, and email arrives empty.

Answer 1

Must be the lack of Encode in the variables:

var dados = "&nome=" + encodeUri(nome) + "&email=" + encodeUri(email) + "&assunto=" + encodeUri(assunto) + "&mensagem=" + encodeUri(mensagem);

However this is difficult, you may prefer {}, so jQuery already encodes itself, another thing you can do is debug the error, like this:

error: function(xhr, textStatus, thrownError) {
    openModal("Houve um erro", "Erro (" + xhr.status +") - detalhes: " + textStatus);
}

The whole code should look like this:

jQuery('#form-contato').submit(function(){

    var nome  = $(this).find('[name="nome"]').val();
    var email = $(this).find('[name="email"]').val();
    var assunto   = $(this).find('[name="assunto"]').val();
    var mensagem   = $(this).find('[name="mensagem"]').val();

    var dados = {
        "nome": nome,
        "email": email,
        "assunto": assunto,
        "mensagem": mensagem
    };

    jQuery.ajax({
        type: "POST",
        url: "send_contato.php",
        async: true,
        data: dados,
        success: function(data){
          openModal(nome + ", sua mensagem foi enviada com sucesso, em breve entraremos em contato!","success");
        },
        error: function(xhr, textStatus, thrownError) {
            openModal("Erro (" + xhr.status +") - detalhes: " + textStatus, "error");
        }
    });

    return false;
});

Another thing, you can exchange the Success and error for .done and .fail (async is already true by default):

var dados = {
    "nome": nome,
    "email": email,
    "assunto": assunto,
    "mensagem": mensagem
};

jQuery.ajax({
    type: "POST",
    url: "send_contato.php",
    data: dados
})
.done(function(data){
  openModal(nome + ", sua mensagem foi enviada com sucesso, em breve entraremos em contato!","success");
})
.fail(function(xhr, textStatus, thrownError) {
    openModal("Erro (" + xhr.status +") - detalhes: " + textStatus, "error");
});