add to cart button should prompt log in screen

Question

am doing sample shopping cart application , my requirement is when the ananymous user about to click on "add to cart" button then it should prompt for 'login.php' if it is success then only user can view the cart. Below is the add to cart button and iam using this sort of ajax call to check credentials. Please help thank you

echo "<input id=add type='button' onClick=\"window.open('cart.php?action=add&id=" . $id . "','_self');\" value='Add to Cart' />";  ====> "add to cart button"

Ajax call

$("#login").click(function() {

            var action = $("#form1").attr('action');
            var form_data = {
            username: $("#username").val(),
            password: $("#password").val(),
            is_ajax: 1
        };

        $.ajax({
            type: "POST",
            url: "login.php",
            data: form_data,
            success: function(response)
            {
                if(response == 'success')
                    $("#form1").slideUp('slow', function() {
                        $("#message").html("<p class='success'>You have logged in successfully!</p>");
                    });
                else
                    $("#message").html("<p class='error'>Invalid username and/or password.</p>");    
            }
        });

        return false;
    });

Answer 1

So as per SR's suggestions you should try something like this

remove this part from the button

onClick=\"window.open('cart.php?action=add&id=" . $id . "','_self');\

And here in the jquery code do these changes....or something synonymous, as per your requirements...

    $("#add").click(function(e) {
        e.preventDefault()          // will stop the form from submitting...        
        var SKU_data = {sku : 12345, quantity:3} //some data related to the product to be sent to some script to add to cart

        var url_to_check_user_session = 'checkAuthentication.php' ;        //which can be the same as action
        $.get(url_to_check_user_session, {username: $("#username").val()}, function(data){
            if(data=='authenticated'){
                $.ajax({        //code to check the login authentication
                    type: "POST",
                    url: "addToCart.php",
                    data: SKU_data,
                    success: function(response)
                    {
                        if(response == 'success')
                            $("#message").html("<p class='error'>Product added to your cart.</p>");
                        else
                            $("#message").html("<p class='error'>Ohh!! something went wrong while adding the product to the cart.</p>");    
                    }
                });}
            else{               // now do the real thing
                $("#form1").slideDown();
                $("#login").click(function() {
                    $.ajax({
                        type: "POST",
                        url: "login.php",
                        data: form_data,
                        success: function(response)
                        {
                            if(response == 'success')
                                $("#form1").slideUp('slow', function() {
                                    $("#message").html("<p class='success'>You have logged in successfully!</p>");
                                });
                            else
                                $("#message").html("<p class='error'>Invalid username and/or password.</p>");    
                        }
                    });
                })
                }
            })

        return false;
    });

hope this helps...