Ajax does not work on firefox and Chrome works

Question

I’m giving an input in the database, Chrome works, firefox my request not success. Someone has already gone through this?

I switched the serialize() function and passed the values invidual, to see if that was it. I tested the passage of each value, all arrive on the other page the wheel Insert color. Only in firefox that does not do this.

$("#btnentrada").click(function(){
	var txtplaca = $("#txtplaca").val();
	var cmbtipo = $('#cmbtipo').val();
	var txtmarca = $("#txtmarca").val();
	var txtmodelo = $("#txtmodelo").val();
	var txtcor = $("#txtcor").val();
	var cmbcobranca = $("#cmbcobranca").val();
	var txtobs = $("#txtobs").val();	
	$.ajax({
		url: 'insere_entrada.php',
		method: 'post',
		data: {'txtplaca': txtplaca , 'cmbtipo': cmbtipo , 'txtmarca': txtmarca , 'txtmodelo' : txtmodelo , 'txtcor' : txtcor , 
			'cmbcobranca' : cmbcobranca , 'txtobs' : txtobs},
		success: function(data){
			alert(data);
		}
	})
});

php

//verifica se as sessions estão preenchidas
include_once("status_logado.php");
require_once('db.class.php');
$placa = $_POST['txtplaca'];
//nao permite carcateres especiais
if ( !empty( $placa) && preg_match( '/^[\w\n\s]+$/i' , $placa ) ){
    $tipo = $_POST['cmbtipo'];
    $marca = $_POST['txtmarca'];
    $modelo = $_POST['txtmodelo'];
    $cor = $_POST['txtcor'];
    $cobranca = $_POST['cmbcobranca'];
    $obs  = $_POST['txtobs'];       
    $objDb = new db();
    $link = $objDb->conecta_mysql();
    $sql = "INSERT INTO TBL_COBRANCA (COB_PLACA,COB_MARCA,COB_MODELO,COB_COR,COB_OBS,ID_TIPO) VALUES('$placa','$marca','$modelo','$cor','$obs',$tipo)";  
    if(mysqli_query($link,$sql)) {
        echo "Dados inseridos com sucesso!";
    }else {
        echo("Erro na operação, contatar o administrador do sistema.");

    }

} else {
    echo "Só são permitidos letras e números";
    die();
}

Answer 1

You’re probably using a Ubmit button to call Ajax and didn’t cancel the event. Chrome provides the event object in the global scope, but Firefox does not.

By clicking the Chrome button, Ajax will be processed (displaying the alert) and then the page will be reloaded by submitting the form. In Firefox this will not happen and the form will be immediately submitted without processing Ajax in the event function.

Add the parameter event to the event handler and cancel the event with event.preventDefault();:

$("#btnentrada").click(function(event){
    event.preventDefault();
    ...
});

Another difference is that if you do not provide the parameter (event) in the event handler, the event shall refer to the object of the event native Chrome, which is different from event object that jQuery passes to the handler.

Example:

$("#btnentrada").click(function(){ // sem o parâmetro event
    event.preventDefault();
    ...
});

It will work in Chrome as it will reference the native event object it has. Already in Firefox it will return the error event is not defined because it does not possess the native object.

So it’s always good to use the event.preventDefault(); with the parameter (event) in the handler, because if you want to send the form via Ajax, it makes no sense to submit it by reloading the page.