Handling an Ajax form submit

Question

I am developing a wordpress plugin that will create a contact form and then submit the details through an ajax request.

        jQuery.ajax({

            type:"post",
            dataType:"json",
            url: ajaxurl,
            data: {action: 'submit_data', info: info},
            success: function(response) {
                alert("Success");
            }
        });

This is the function that handles the ajax request:

add_action("wp_ajax_submit_data", "submit_data");
add_action("wp_ajax_nopriv_submit_data", "submit_data");

function submit_data() {


echo "<script> alert('Hello');</script>";

die();
}

The link that the user will click to submit the form is :

$link = admin_url('admin-ajax.php?action=submit_data');
<a  class="button" href="'.$link.'" style="background-color:white;color:black;">    <strong>Submit</strong></a>

Once the submit link is clicked I recieve the Hello alert and then get taken to a blank page with the URL

http://localhost:81/wordpress/wp-admin/admin-ajax.php?action=submit_data

Why is it taking me to a blank page rather than updating the current page?

EDIT -------------------------------------------------

Here is the full jquery function :

$(".button").click(function() {

            $(".error").hide();

            var name = $(":input.name").val();
            if (name == "") {

                $("label#nameErr").show();
                $(":input.name").focus();
                return false;
            }

            var email = $(":input.email").val();
            if (email == "") {

                $("label#emailErr").show();
                $(":input.email").focus();
                return false;
            }


            var phone = $(":input.phone").val();
            if ((phone == "") || (isNaN(phone))) {

                $("label#phoneErr").show();
                $(":input.phone").focus();
                return false;
            }

            var info = 'name:' + name + '&email:' + email + '&phone:' + phone;

            alert(info);

            jQuery.ajax({

                type:"post",
                dataType:"json",
                url: ajaxurl,
                data: {action: 'submit_data', info: info},
                success: function(response) {
                    if (response.type == "success") {

                        alert("success");
                    }
                    else {

                        alert("fail");
                    }
                }
            });

            return false;


        });

Answer 1

You should remove the link from the anchor tag:

<a  class="button" href="#" style="background-color:white;color:black;"> 
  <strong>Submit</strong>
</a>

Then your jQuery part should be:

$('a.button').click(function(event){
    event.preventDefault();

    //your ajax gets here:
    jQuery.ajax({
            type:"post",
            dataType:"json",
            url: ajaxurl,
            data: {action: 'submit_data', info: info},
            success: function(response) {
                alert("Success");
            }
        });
});