Ajax form post only works on Firefox

Question

I have an Ajax login form but it only works well on Firefox. On the other browsers, it keeps posting the form and loading the function page. I want it to post the 2 fields to function page and check with a background process and write it to #resultgiris tag in the loginform.html.

loginform.html

<form id="girisformu" action="fonksiyon/loginkontrol.php" onsubmit="return false;" data-parsley-validate class="form-horizontal form-label-left" >
                      <div class="form-group">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                          <input type="text" id="user_id" name="user_id" class="form-control has-feedback-left" data-inputmask="'mask' : '99999999999'" placeholder="Kullanıcı ID">
                          <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                          <input type="password" name="password_giris" id="password_giris" class="form-control has-feedback-left" placeholder="Şifre">
                          <span class="fa fa-key form-control-feedback left" aria-hidden="true"></span>
                        </div>
                      </div>
                      <div class="form-group">
                      <div class="col-md-12 col-sm-12 col-xs-12 pull-right">
                      <center><h5><a href="#kayitOl" data-toggle="modal" data-target="#kayitOl"><span class="fa fa-user-plus" aria-hidden="true"></span> Kayıt Ol</a>   -   <a href="#sifremiUnuttum" data-toggle="modal" data-target="#sifremiUnuttum"><span class="fa fa-question-circle" aria-hidden="true"></span> Şifremi Unuttum</a></h5></center>
                        </div><div class="col-md-12 col-sm-12 col-xs-12 pull-right">
                     <center><button type="reset" class="btn btn-primary"><span class="fa fa-trash" aria-hidden="true"></span> Temizle</button>
                          <button id="girisbtn" class="btn btn-success"><span class="fa fa-sign-in" aria-hidden="true"></span> Giriş Yap</button></center>
                              </div>
                               </div>
                      </form>

loginkontrol.php (function page)

<?php
include_once('../inc/database.php');
        $userid = $_POST['user_id'];
        $password = $_POST['password_giris'];

        $result = mysqli_query($baglan, "SELECT `userid`,`sifre`
            FROM `uye` WHERE `userid` = '$userid' AND `sifre` = '$password'") or die (mysqli_error($baglan));
        $row = mysqli_fetch_assoc($result);
        if(mysqli_num_rows($result) <= 0){
            echo "Login failed";
            else{
                echo "Successful login";
            }
?>

login.js

$("#girisbtn").click( function() {
    document.getElementById("loadinggiris").style.display = 'inline';
 $.post( $("#girisformu").attr("action"), 
         $("#girisformu :input").serializeArray(), 
         function(info){ $("#resultgiris").html(info); 
   });

});

$("#girisformu").submit( function() {
    event.preventDefault();

});

function clearInput() {

    $("#girisformu :input").each( function() {
       $(this).val('');
    });


}

The other browsers likely don’t know any global `event` object at the point where you are trying to call `preventDefault`. The event object is passed to your call function as the first parameter - so make that `function(e)`, and then inside call the method on that, `e.preventDefault();` — CBroe, Sep 06 '17 at 11:21
Your code is vulnerable to [**SQL injection**](https://en.wikipedia.org/wiki/SQL_injection) attacks. You should use prepared statements with bound parameters, via either the [**mysqli**](https://secure.php.net/manual/en/mysqli.prepare.php) or [**PDO**](https://secure.php.net/manual/en/pdo.prepared-statements.php) drivers. [**This post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) has some good examples. — Alex Howansky, Sep 06 '17 at 13:43
**Never** store plain text passwords. Instead use [`password_hash()`](http://us3.php.net/manual/en/function.password-hash.php) and [`password_verify()`](http://us3.php.net/manual/en/function.password-verify.php). If you're using a version of PHP prior to 5.5, do **not** use MD5 or SHA1 to hash passwords. Instead you can use [this compatibility pack](https://github.com/ircmaxell/password_compat). — Alex Howansky, Sep 06 '17 at 13:43
I am aware of the SQL injection risks. I don't publish it as it is only a basic project to practise ajax and javasciprt. Thank you for providing good examples. — Şahin Yıldırım, Sep 06 '17 at 17:52

score 0 · Answer 1 · answered Sep 06 '17 at 11:33

0

Thanks to @Cbroe 's comment, I have solved my problem. I defined a function;

<script>
function engelle(e){

e.preventDefault();

}
</script>

and then changed the login button's onclick to 'onclick="engelle(event)"'

answered Sep 06 '17 at 11:33

Şahin Yıldırım

29
5

Ajax form post only works on Firefox

1 Answers1