Building value of a variable by looping through form fields

Question

Still a little green when it comes to AJAX/JS, and don't know the specific method(s)/functions(s) I'm looking for to acheive this task.

Please bare with me if similar questions have been asked time after time before, and I hope there's enough information here to help you help me find the right answer.

Outline

I'm currently building a form for a specific page, where users can make suggestions about the contents of amny 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.

So, my fellow overflowers - please point this n00b in the right direction and help me find the answers I seek. Your help as always is greatly appreciated.

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?