Ajax form rework

Question

I want to change this ajax line into post form method $.post() for space optimisation and to insert some data into an object.

My ajax line :

 $("#login_button").click(function() {
        var username = $("#username").val().trim();
        var password = $("#password").val().trim();

        if (username != "" && password != "") {
            $.ajax({
                url: 'content/ajax/login.php',
                type: 'POST',
                data: {
                    username: username,
                    password: password
                },
                success: function(response) {
                        var msg = "";
                        if (response == false) {
                            msg = dataJSON.error_message.wrong_password;
                        } else if (response == true) {
                            window.location.reload();
                        }
                }


            });
        }
        return false; 
});

So i want it to be something like this :

$("#login_button").click(function() {
                var username = $("#username").val().trim();
                var password = $("#password").val().trim();
                //I added here "type" so i can handle few ajax calls in one php file by an if statement
                var post_data = { 'type' : 'login', 'username': username, 'password': password }

                    $.post('content/ajax/login.php', post_data, function(data) {
                            if(data == 'true') {
                            }
                            else if(data == 'false') {
                            }

                    });
});

What's wrong with my code ?

Answer 1

In the original code it has return false on the click handler. This prevents the elements default behaviour (in your case submitting the form).

You would want to do the same in the new function. Or add event parameter to the click handler function and use event.preventDefault()

For example

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