ajax not working with firefox, But perfectly working with other browser. Error log says: ReferenceError event is not defined

Question

The ajax below is perfectly working in chrome, IE, opera and safari. But it is, somehow not working in firefox. It says reference error, event is not defined. I tried using event.preventDefault() instead of return false too, surely no luck for me. When the submit button is clicked, in firefox the page is jumped to loginCheck.php and shows success. But that is not the way I meant to do, the message 'success' should be returned in the same page itself rather than jumping to another page and showing the message in another page.

FORM IS LIKE THIS:

<form id="loginForm" class="ajax" action="ajax/loginCheck.php" style="padding-left: 10px;" method="post">

Username: <br/>
<input name="username" class="required" type="text"> <br/> 

<span class="small">
<a class="mouseOver forgot" href="include/recover.php?mode=u_name">Forget username ?</a>
</span><br/>

Password: </br>
<input name="password" class="required" type="password"> <br/>
<span class="small">
<a class="mouseOver forgot" href="include/recover.php?mode=u_password">Forget password ?</a>
</span><br/>

<input type="submit" class="button" value="sign in">

    //when login button is clicked
(function(){

    $('form.ajax').on('submit' , function(){
    //alert('about to pass data');
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};  //declaration of data of array type

    that.find('[name]').each(function(index, value){
        var that = $(this),
            name = that.attr('name'),
            value = that.val();

        data[name] = value;
    });

    $.ajax({
        url: url,
        type: type,
        data: data,

        success: function(response){    //code to run if request success

            var result = $.trim(response);
            console.log(response);
            if(result == "success"){
                $('#interaction').load('interaction.php'); //load logout icong
                $('#rightbar').load('rightbar.php');    //load user panel
                $('.loginCheck').html("");
            }else{
                $('.loginError').show();
                $('.loginError').html(response);
            }
        }
    });

        return false;
    });

})();

maybe [this](http://stackoverflow.com/questions/17059385/referenceerror-event-is-not-defined-in-mozila-firefox) could be of some help — Orangepill, Jul 10 '13 at 03:39

srain · Accepted Answer · 2013-07-10T05:30:36.450

First change

<input type="submit" class="button" value="sign in">

to:

<input id='btn_login' type="button" class="button" value="sign in">

then use the following javascript:

//when login button is clicked
(function(){

$('#btn_login').on('click' , function(){
    //alert('about to pass data');
    var that = $('#loginForm'),
    url = 'ajax/loginCheck.php';
    type = 'post';
    data = {};  //declaration of data of array type

    that.find('[name]').each(function(index, value){
        var that = $(this),
        name = that.attr('name'),
        value = that.val();

        data[name] = value;
    }); 

    $.ajax({
        url: url,
        type: type,
        data: data,

        success: function(response){    //code to run if request success

            var result = $.trim(response);
            console.log(response);
            if(result == "success"){
                $('#interaction').load('interaction.php'); //load logout icong
                $('#rightbar').load('rightbar.php');    //load user panel
                $('.loginCheck').html("");
            }else{
                $('.loginError').show();
                $('.loginError').html(response);
            }   
        }   
    }); 

    return false;
  }); 

  })();
  </script>

@srain Thanks. Now it perfectly works. I got what you were trying to do. You first converted that ridiculous submit button (which, of course was not firing any event) to simple button. But still wondering why that on('submit', function(){ ...}) wasn't working — Nirmalz Thapaz, Jul 10 '13 at 04:29

ajax not working with firefox, But perfectly working with other browser. Error log says: ReferenceError event is not defined

1 Answers1