AJAX Request too big?

Question

I'm making a form with a lot of fields, I planned submit all the data via AJAX asynchronously. However when I click the Submit button, it remains in its clicked state and the page freezes. Also the beforeSend function doesn't execute either. Note the _() function is the document.getElementById I have heard about the jQuery .done() function, however will this help the performance of the page and all the data gets put into a database as one row, so if I split the data have a .done() function to send the other half, will it store in the database as two rows ?

function addproperty(){
        var propertyname = _("propertyname").value;
        var propertyaddr = _("propertyaddress").value;
        var price = _("price").value;
        var rent = _("rent").value;
        var available = _("available").value;
        var brokerage = _("brokerage").value;
        var area = _("area").value;
        var subarea = _("subarea").value;
        var sqft = _("sqft").value;
        var description = _("description").value;
        var location = _("location").value;
        var floortype = _("flooringtype").value;
        var parking = _("parking").value;
        var deposit = _("deposits").value;
        var lease = _("lease").value;
        var utils = _("utils").value;
        var bedrm = _("bedrooms").value;
        var bathrm = _("bathrooms").value;
        var smoke = _("smoking").value;
        var pets = _("pets").value;
        var built = _("built").value;
        var submit = _("propertysubmit");
        $.ajax({
            url: "addlisting.php",
            type: "POST",
            async: true,
            data:{
                propertyname:propertyname,
                propertyaddr:propertyaddr,
                price:price,
                rent:rent,
                available:available,
                brokerage:brokerage,
                area: area,
                subarea: subarea,
                sqft: sqft,
                desc: description,
                locate:location,
                floortype: floortype,
                park: parking,
                deposit: deposit,
                lease: lease,
                utils: utils,
                bedrm: bedrm,
                bathrm: bathrm,
                builtdate: built,
                smoke: smoke,
                pets: pets
            },
            beforeSend: function (){
                submit.setAttribute("disabled", "disabled");
                submit.innerHTML = "Submitting...";
            },
            success: function (){
                submit.removeAttribute("disabled");
                submit.innerHTML="Add New Listing";
            } 
        });
    }

Answer 1

In order of your questions:

1. Yes and no. This depends on what you mean by "too big", if you mean too big for the internet to handle, then no. If you have mean too big for the structure of your application, then perhaps. As I see you are using a php backend, you can take a look at post_max_size value in php.ini and set it:

#set max post size php_value post_max_size 40M

2. As per your page freezing, that could be a host of problems, you should add some error handling to your application and debug it to see at what point your application freezes then look at said code, or if you can catch the error that is being thrown even better.

3. Both .done() and .success() are callback functions, and they are functional duplicates, in that they functionally identically. One caveat is that .success() is deprecated in JQuery 1.8+

4. .done() will run similarly to .success() and if you split your AJAX call into two calls, one which runs after the other using a callback function, then the amount of rows inserted in your DB will depend on what the method you are POSTing to looks like. If you INSERT a row per call, then yes, using two calls will INSERT two rows.