How do I make a Sum button with ajax

How do I make a Sum button with ajax

I have watched the video a couple times. For some reason, I just cannot figure out how to make a sum  button that adds 1+2 when the user clicks on the hyper link "sum".

https://www.youtube.com/watch?v=7faB8kV43eg

Here is my view for /Home/Index:



  1. @{
        Layout = null;
    }



    <!-- -->

    <!DOCTYPE html>
    <html>
    <head>

        <script src="~/Scripts/jquery-1.10.2.js"></script>

        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

        <script>

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

                    $.ajax({

                        type: 'GET',
                      
                        url: '@Url.Action("HelloAjax" , "Home")',
                        success: function (result) {

                            $('#div1').html(result);

                        }

                    });  // closes the ajax


                });  // closes click function



                // data: is the data returned by the controller

                var url = "/Home/ReverseTheString";
                var stringToReverse = "Bob Cravens";
                $.get(url, { input: stringToReverse }, function (data) {
                    $("#div4").html(data);
                });




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

                    $.ajax({

                        type: 'GET',
                        data: { a:1 , b:2} ,
                        url: '@Url.Action("Sum" , "Home")',
                        success: function (result) {

                            $('#div1').html(result);

                        }

                    });  // closes the ajax


                });  // closes click function




            });       // closes document ready function
        </script>





        <script>

            var url = "/Home/GetDateTimeString";
            $.get(url, null, function (data) {
                $("#div2").html(data);
            });




            var url = "/Home/sum";
            $.get(url, null, function (data) {
                $("#div7").html(data);
            });




            var url = "/Home/RegisterUser";
            var first = "Bob";
            var last = "Cravens";
            $.post(url, { firstName: first, lastName: last }, function (data) {
                $("#div5").html(data);
            });


            var f = $("#myForm");
            var url = f.attr("action");
            var formData = f.serialize();
            $.post(url, formData, function (data) {
                $("#div6").html(data);
            });




            // works if div 7,div8,div9 are changed to div4,div5,div6

            var url = "/Home/GetContactInfo";
            var id = 123;
            $.getJSON(url, { personId: id }, function (data) {
                $("#div7").html(data.FirstName + " " + data.LastName);
                $("#div8").html(data.State);
                $("#div9").html(data.Age);
            });



            var url = "/Home/MyPartialView";
            var info = "This is my information."

           

            // note : data is the return data from the controller , we have to specify it here as a parameter for function
            $.get(url, null, function (data) {
                $("#div1").html(info);
            });


        </script>



            <title>A study of population dynamics</title>


        </head>
        <body>


            <div class="container">
                <form id="myForm" action="/Home/FormPost" method="post">


                    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

                    <div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>

                    <div id="div3"><h2>Let jQuery AJAX Change This Text</h2></div>

                    <div id="div4"><h2>Let jQuery AJAX Change This Text</h2></div>


                    <div id="div5"><h2>Let jQuery AJAX Change This Text</h2></div>

                    <div id="div6"><h2>Let jQuery AJAX Change This Text</h2></div>

                    <div id="div7"><h2>Let jQuery AJAX Change This Text</h2></div>

                    <div id="div8"><h2>Let jQuery AJAX Change This Text</h2></div>

                    <div id="div9"><h2>Let jQuery AJAX Change This Text</h2></div>

                    <a  href=" " class= "sum"> Sum </a>

                    <div id="result2"><h2>  "result2 "</h2></div>

                    <div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
                    <div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
                    <div>Age: <input name="Age" type="text" value="43" /></div>
                    <input type="submit" value="Save Contact" />
                    <div id="postResult">?</div>
                </form>


            </div>

                <button>Get External Content</button>










    </body>
        </html>