Question

Outline

I’m building a form for a specific page, where users can make suggestions about the contents of any page.

The form is displayed inside modal dialogue box, and allows the user to make their suggestions without being taken away from the page they were on.

Of course, I’m designing the code for reuse – write once, utilise many – to provide a similar method of form display and submission anywhere on the site without having to re-write code.

Environment

The site is hosted on an IIS6 server, pages are in ASP, and sending the form data via email using the trusty, classic ASP FormMail script from BrainJar.

Problem

The modal dialogue box works a treat, and using this example from Nettuts+ to perform the submit from within the modal.

The Nettuts+ script is built it such a way that you need to define all the individual field that make up your form to be passed to your formmail script.

Thus each time you need to use it, you’ll need to update how var dataString is combined, which depending on how much caffine you’ve had or the number of painful users knocking down your door leaves you open to simple mistakes that can take hours to diagnose and correct.

Each field is then compiled into a variable known as dataString:

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;

Ajax then kicks in, and submits the data to the script, and depending on the result a success message will appeared within the defined div:

$.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()
    .fadeIn(1500, function() {
      $('#message').append("<img id='checkmark' src='images/check.png' />");
    });
  }
....

Desired result

Make this piece of code globally reusable, and have var dataString populated with all field names and values from the form using a loop.

Answer 1

Er – are you looking to use $('#contact_form').serialize() which you can append after data: so the result is data: $('#contact_form').serialize() or am I mistaken by your question wording?