Plotting a variable value by scrolling through form fields

Outline

I am creating a page-specific form where users can make suggestions for the content of any page.

The form is displayed inside a modal dialog box and allows the user to make their suggestions without being distracted from the page they were on.

Of course, I design reusable code - write once, use many - to provide a similar method for displaying and submitting forms anywhere on the site without having to rewrite the code.

Environment

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

Problem

The modal dialog handles fun and uses this example from Nettuts + to do a submission from a modal series.

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

This way, every time you need to use it, you will need to update how it is combined var dataString

, which depending on how much caffeine you have or the number of painful users knocking down your door leaves you open to simple mistakes that can take hours. to diagnose and fix.

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

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

      

        
        
        
      

    

Then Ajax turns on and sends the data to the script, and depending on the result, the success message will be displayed in a specific 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 reusable around the world, and fill in var dataString

all the field names and values ​​from the form using a loop.