web application code cost

Automated form processing and generic AJAX requests with jQuery / JavaScript.

Instant user feed back for form validation can chew up a decent amount of development time and maintaining it can quickly become a hassle.  It’s very likely that the initial development plan will differ from the final product, so once clean code can quickly become unorganized.  Automating form processing allows quick expansion, minimal maintenance and forces naming conventions.

With only a few lines of code, most of them being configurations, the script I developed attaches on blur/change events to every input element and an AJAX request to the submit button.  The end goal was to be able to have one AJAX request object which could process requests for forms, anchors, and form elements.  Below is an example for a basic create account form which contains the following elements, first name, last name, email, phone number, password, and confirm password.

    var createAccountRequest = new formRequest({
        form: $("#createAccountForm"),
        url: '/account/create',
        successCallback: {
            function: 'redirect',
            url: '/account/verify'
        }
    });

Quick recap of events.
On document ready, we instantiate a formRequest object which attaches validation to first name, last name, email, phone number, password, and confirm password elements as well as a click event to the submit button. After the form has been verified, an AJAX request will be made to ‘/account/create’, with a JSON string in the POST body and on success, redirect to the account verification page.

Below is an example of a form which contains a secondary AJAX request to gather the shipping costs when the company is selected.

    var fulfillmentRequest = new formRequest({
        form: $("#fulfillmentForm"),
        url: "/order/fulfill/123",
        successCallback: {
            function: "redirect",
            url: "/order/index"
        }
    });

    var shippingRequest = new elementRequest({
      element: $("#shippingCompany"),
      triggerOn: "change",
      url: "/shipping/get/",
      successCallback: {
        function: "renderShippingCosts"
      }
    });
{o}
Otreva is a custom software product development company focusing on user experience, responsive web development, & mobile application development.

Interested in seeing what it costs to build an app?

Start Quote See Stats
224 Wyoming Ave. #100
Scranton, PA 18503

You've found the secret footer!

Tweets about @Otreva

Or check us out on:

Shopify Experts
Awwwards