A better way of jQuery in-page form submission

A better way of jQuery in-page form submission

OK, so as a webmaster I like to make things easy for my users.

One of the things I'm working on is to leverage jQuery to provide a feedback form for a specific part of a corporate intranet that doesn't require the user to refresh the page or navigate back to where they were. This seemed easy to achieve, using a modal window and jQuery methods of submitting a form sans-page refresh/redirect.

All sounds good so far.

Also being a good webmaster, I want to set this snippet of code up right the first time so it can be easily reused with zero pain or fixing up portions of code. This is where my good idea comes unstuck using the aforementioned samples.

In the process of implimenting this, I've come across some bugs in the implimentation, some which I've managed to sort out (thanks to some help at Stack Overflow), others that have left me scratching my head.

An overview

The first page I am using this method of forms with is a corporate index, which provides a gateway to various information sources based on topic or subject matter.

If users find something is missing from the list, they can click on a link titled "suggest something here" which calls the modal window. Good so far.

The modal window loads, and renders the contents of a DIV named contact_form (nested under a DIV named dialogus with a class of window):

<div id="boxes">
   <!-- #customize your modal window here -->
   <div id="dialog" class="window">
    <div id="contact_form">
    <h2>What's missing?</h2>
      <p>
        Need to suggest something to be added to this list? Fill in the details below and our team will review and have this added as soon as possible.
        </p>
  <form name="contact" id="contact" action="" class="validate">
    <input name="_submitDynamic" type="hidden" value="1" />
      <label for="suggestion" id="suggestion"><strong>Your suggestion</strong></label><br/>
      <textarea id="suggestion" name="suggestion" rows="10" cols="45" class="text-input"></textarea>
      <label class="error" for="suggestion" id="suggestion_error">This field is required.</label><br />
       <br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send your suggestion" />
  </form>
  </div>
<!-- close button is defined as close class -->
   <p>
        <a href="#" class="close">Close this window</a>
        </p>
   </div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->   
   <div id="mask"></div>
</div>


Once the user submits the form, some jQuery magic kicks in and submits the data and displays a confirmation message:

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $('form.validate').submit(function() {
      // validate and process form
      // first hide any error messages
    $('.error').hide();
      
    //validation not being run at the moment    
    //var suggestion = $("input#suggestion").val();
      //if (suggestion == "") {
      //$("label#suggestion_error").show();
      //$("input#suggestion").focus();
      //return false;
    //}
      
      var dataString = $(this).serialize();
      //alert (dataString);return false;
      
      $.ajax({
      type: "POST",
      url: "/_global/assets/scripts/formmail/formmail.asp",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Suggestion received</h2>")
        .append("<p>Thanks, your suggestion has been received and will be actioned as soon as possible.</p>")
        .hide();
      }
     });
    return false;
   });
});


That code will run, and replaces the DIV contact_form with a new DIV named message, telling the user that their suggestion has been received.

Where the trouble begins

This way of doing things is great if you're only going to submit the form once and then move off to another page.

What if however you submit the form, close the modal window and then continue on reading the page and find something else which prompts you to submit some more feedback?

Using the current method, the form isn't refreshed back to its original state once the modal window is closed - nor have I been able to successfully make a new link saying 'submit another idea' to start the process again.

I toyed with the idea of using the load() method in the following piece of code to reload the requisite html from a specified file but with no success:

//jquery.queness modal dialogue box
$(document).ready(function() {   

   //select all the a tag with name equal to modal
   $('a[name=modal]').click(function(e) {
      //Cancel the link behavior
      e.preventDefault();
      //Get the A tag
      var id = $(this).attr('href');

      //use load() method here
      $("#contact_form").load("/path/to/filename.html");

      //Get the screen height and width
      var maskHeight = $(document).height();
      var maskWidth = $(window).width();
   
      //Set height and width to mask to fill up the whole screen
      $('#mask').css({'width':maskWidth,'height':maskHeight});
      
      //transition effect      
      $('#mask').fadeIn(750);   
      $('#mask').fadeTo("fast",0.8);   
   
      //Get the window height and width
      var winH = $(window).height();
      var winW = $(window).width();
             
      //Set the popup window to center
      $(id).css('top',  winH/2-$(id).height()/2);
      $(id).css('left', winW/2-$(id).width()/2);
   
      //transition effect
      $(id).fadeIn(750);


A better way of validation

I have another small piece of the jigsaw puzzle to put together, and that is form validation.

I'll admit from the outset that researching into the other problems I've encountered means I've not looked into this in any detail - but as I'm already writing this post I'll throw it in there to see what you more expeirenced people can point me towards.

Ideally, I'd like a reusable method of form validation which doesn't require a truckload of programming. In essence, something that can be told by way of a class attribute what the field is and how it should be laid out, then requisite code inserted into the submit portion of the jQuery code which will work some magic, and let the user know what's not right, blank, etc.

The help this jQuery n00b needs

So in summary,

1) How, when the user has not navigated away from the page where the form was called, 'refresh' the contents of the modal window to display the contents of the DIV contact form.
2) Have you found/is there a reusable method of form field validation available which doesn't require complex programming each and every time you wish to use it?

Thanks everyone in advance for any help and assistance you can provide. Hope there's enough detail here so you don't have to try and read minds.