How do i encrypt password before send to php script?

Question

I want to send the password encrypted to the server side script, and after match the pasword encrypted with the password on the database, if the passords match, redirect the user to the home page.

My Jquery function:

jQuery('#login_form').submit(function(){
  var form_data = new FormData();
  form_data.append('login', $('#lg-user').val());
  form_data.append('password', CryptoJS.MD5($('#lg-password').val()));

  jQuery.ajax({
    type: "POST",
    url: "processa.php",
    data: dados,
    success: function( data )
    {
      alert( data );
    }
  });
  
  return false;
});

The form:

                    <form action="" id="login_form" method="post">
                        <?php  
                            session_start();
                            if (isset($_SESSION['message']))
                            {
                                echo $_SESSION['message'];
                                unset($_SESSION['message']);
                            }
                        ?>
                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"></span>
                        </div>
                        <input type="text" name="username" class="form-control" 
                        placeholder="usuario">      
                    </div>
                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"></span>
                        </div>
                        <input type="password" name="password" class="form-control" 
                        placeholder="senha">
                    </div>
                    <div class="col-md-12">
                        <div class="text-center">
                            <input type="submit" value="Entrar" class="btn login_btn">
                        </div>
                    </div>
                </form>

The problem is that everytime i send the form, the page reload.

Answer 1

Your approach is highly insecure.

By encrypting it client-side and matching what it sent with the DB, you are sending the data that "proves" the user is who they say they are to the server, so if someone were to get hold the database they would know what to send.

Also, MD5 is far too weak to secure a password today.

---

To keep the password safe in transmission to the server: Use HTTPS.

To keep the passwords in your database safe: hash them server-side as described in the Safe Password Hashing FAQ in the PHP manual.

---

To stop the regular form submission when you use the submit event to intercept it and use Ajax:

1. Capture the event object
2. Call preventDefault on it

Such:

jQuery('#login_form').submit(function(e){
    e.preventDefault()