I am quite new (and green) to using jquery (and javascript in general) and have a question regarding the forms plugin...

 

I am attempting to configure a lead capture form for a dealership website that is also used for an inventory alert feature within the site.  the form is loaded into an overlay (using jquery.tools library from flowplayer.org).  What is expected if for the user to complete the form with their contact info along with the vehicle type info of what they are interested in.  The only fields within the form that are "required" are name, lastname, and email... the others are optional.  The form then submits the data to a table in an sql db for future use.

 

I have been able to successfully incorporate the "simple" form plugin using the following code:

 

<script type="text/javascript">
        // wait for the DOM to be loaded
        $(document).ready(function() {
            // bind the form and provide a simple callback function
            $('#notifyme').ajaxForm(function() {
                alert("Your request has been received!");
            });
        });
    </script>

 

The form submits, db record is added, and alert box is shown.  Unfortunately, this does NOT provide any validation of the 3 required fields.

 

What I am ultimately seeking to have this process do is have the user complete the form and click the submit button and have the form plugin Validate the 3 required fields (if fails, provide feedback that required info is missing or invalid, otherwise submit the form) then on success from the db add page (the form submission) Clear the form fields, Reset the form in case the user wants to add a set of data, and display a message.  The message area is an empty div at the top of the page with an id of "subResp" (the verification message would go there as well).

 

The problem I am having is getting all of these things to work together... Most likely due to a lack of knowledge and experience on the syntax required for this.  The code I am currently working with is the following (it does NOT handle all of the functionality I am seeking though, yet):

 

// prepare the form when the DOM is ready
$(document).ready(function() {
    // bind form using ajaxForm
    var options = {
        //target:        '#subResp',   // target element(s) to be updated with server response
        //beforeSubmit:  showRequest,  // pre-submit callback
        //success:       showResponse  // post-submit callback
 
        // other available options:
        //url:       url         // override for form's 'action' attribute
        //type:      type        // 'get' or 'post', override for form's 'method' attribute
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
        clearForm: true        // clear all form fields after successful submit
        //resetForm: true        // reset the form after successful submit
 
        // $.ajax options can be used here too, for example:
        //timeout:   3000
    };
 $('#notifyme').ajaxForm( { beforeSubmit: validate },options );
});

 

function validate(formData, jqForm, options) {
    // jqForm is a jQuery object which wraps the form DOM element
    //
    // To validate, we can access the DOM elements directly and return true
    // only if the values of both the username and password fields evaluate
    // to true
 
    var form = jqForm[0];
    if (!form.name.value || !form.lastname.value || !form.email.value) {
        alert('Please enter a value for both Username and Password');
        return false;
    }
}

 

The bold red line is the first question... I understand that the ajaxform accepts the inclusion of options and that would allow for me to set some of the features I am seking... such as the response target and the form clear and reset... But I am unclear as to the syntax needed to make it work correctly.  It the current statement (as above), the code will validate and provide an alert if validation fails (just a generic alert... not specific to what the failure was) and if validation passes it will submit the form but WITHOUT notification that it was successful.  if I switch the order of the beforeSubmit: and options, it will submit the form WITHOUT validation.

 

ANY help with this is GREATLY appreciated!!!

 

Again, for clarification I am attempting to process the form as follows:

 

User fills in form and clicks submit

code handles submit and:

      Validates (post fail alert to #subResp or move on if success)

      submits form to handler page (auto-inv-exec.asp to add to db and generate email notice)

      receive response and post success message to #subResp

      Clear form (on success)

      Reset form (on success) and allow for second entry or for user to close overlay

 

Thanks!