how can i call coldfusion component file from ajax

I want to know about coldfusion to ajax call so that i can display data without reloading ma page. Take simple example. Adding two numbers by clicking a button. For that i need two input elements and a button and it should display in the same page. What i'm trying to do is when i get input from a user the moment they click i need answer without reloading a page. So i used component file and written function for my scenario..and i call my component through ajax. But i'm getting error on my stuff. Let me show what i did.

Coldfusion code

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Adding two numbers</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
        <form>
            <!--two numbers to add when clicking a button it will show my result in display-->
            FIRST NUMBER<input type="text" id="a" name="a" >
            SECOND NUMBER<input type="text" id="b" name="b">
            <input type="button" name="button" id="button" value="add">
            ANS<input type="text" name="display" id="display" readonly>
        </form>
    </body>
    <script language="JavaScript">
        $(document).ready(function() {
            $("#button").click(function(f) {
                // Next, we will be needing the value of the textfield in order to pass it to ColdFusion.
                var variableToPass = $("input#a").val();
                var variableToPass1 = $("input#b").val();
                $.ajax({
                    url: "add.cfc?method=add&returnformat=json",
                    data: {
                        a: variableToPass,
                        b: variableToPass1
                    },
                    success: function(result) {
                        $("#display").val(result);
                    }
                });
            });
        });
    </script>
</html>

I saved this as add.cfm and here is my component file ie(add.cfc)

<cfcomponent>
     <cffunction name="add" access="remote" returntype="numeric">
         <cfargument name="a">
         <cfargument name="b">
         <cfset c=a+b>
         <cfreturn c>
     </cffunction>
</cfcomponent>

While running my code...i throws error that type errors and more warnings...please help me

Solution

I used div instead of input element and it was working fine.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Adding two numbers</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
        <form>
            <!--two numbers to add when clicking a button it will show my result in display-->
            FIRST NUMBER<input type="text" id="a" name="a" >
            SECOND NUMBER<input type="text" id="b" name="b">
            <input type="button" name="button" id="button" value="add">
            ANS<div id="display"></div>
        </form>
    </body>
    <script language="JavaScript">
        $(document).ready(function() {
            $("#button").click(function(f) {
                var variableToPass = $("input#a").val();
                var variableToPass1 = $("input#b").val();
                $.ajax({
                    url: "add.cfc?method=add&returnformat=json",
                    data: {
                        a: variableToPass,
                        b: variableToPass1
                    },
                    success: function(result) {
                        $("#display").html(result);
                    }
                });
            });
        });
    </script>
</html>