I wrote a while back about what I had discovered about AJAX and posting form data. I recently reused some of that old code and found some needed code to be missing.

The old post is here.

What I had not coded before was code to handle form data from a typical form with separate parts for each form field. Below is some code to show my changes.

var ignorethesubmitbutton = false;

function contactus_formfield( boundary, name, value )
{
	var text = "";
	text += '--' + boundary + '\r\n' + 'Content-Disposition: form-data; name="';
	text += name;
	text += '"\r\n\r\n';
	var ConfigField = document.getElementById( "configfield" );
	text += value;
	text += '\r\n'
	text += '--' + boundary;
	return text;
}

function contactus()
{
	if( ignorethesubmitbutton == true )
		return;
		
	var waitingicon = document.getElementById( "thewaitingicon" );
	var submitbutton = document.getElementById( "thesubmitbutton" );
	
	waitingicon.style.visibility = "visible";
	submitbutton.disabled = true;
	submitbutton.style.opacity = "0.5";
		
	ignorethesubmitbutton = true;
	
	ContactRequest = new XMLHttpRequest();
	if( ContactRequest == undefined || ContactRequest == null )
		return;

	ContactRequest.onreadystatechange = function()
	{
		if( ContactRequest.readyState == 4 )
		{
			ignorethesubmitbutton = false;
			waitingicon.style.visibility = "hidden";
			submitbutton.disabled = false;
			submitbutton.style.opacity = "1";
			if( ContactRequest.status == 200 )
			{
				if( ContactRequest.responseText.indexOf( "Error" ) != 0 )
					alert( ContactRequest.responseText );
				else
					alert( "There was an error on the server and the contact information was not sent." );
			}
			else 
			{
				alert( "Unable to send the contact request form at this time." );
			}
		}
	}

	ContactRequest.open( "POST", "/contact.php?t=" + Math.random(), true );
	var boundary = 'xxx' + Math.floor(Math.random()*32768) + Math.floor(Math.random()*32768) + Math.floor(Math.random()*32768);
	ContactRequest.setRequestHeader( "Content-Type", 'multipart/form-data; boundary=' + boundary );
	var body = '';
	
	body += contactus_formfield( boundary, 'name', document.forms['contactform'].elements['name'].value );
	body += "\r\n";
	body += contactus_formfield( boundary, 'email', document.forms['contactform'].elements['email'].value );
	body += "\r\n";
	body += contactus_formfield( boundary, 'comments', document.forms['contactform'].elements['comments'].value );
	body += '--';
	body += "\r\n";
	ContactRequest.send( body );
}

The code is for a contact page on a blog. Instead of submitting the form in the typical fashion, I decided to use AJAX to submit the data. This kept me from needing a “Thanks for submitting that form…” page. I won’t go into the details of AJAX or form data in this post. The only thing I want to show is the code that uses a separate content section for each form field. I use a function to create the content string for each form field.

Note that there are two hyphens on the end of the last section. I decided to add EOL characters after the end boundary markers outside of the contactus_formfield() function so that I could add the last boundary marker hyphens in the right place. An alternative might have been to pass a flag to the contactus_formfield() function to tell it to add those terminating hyphens.

When I first learned about multipart/form-data formatting, most or all of the boundary marker strings that I saw in examples were of a form “—————————-boundary” which was very confusing. There are two hyphens at the beginning of every boundary marker string and two at the end of the final boundary marker. The extra hyphens that I saw so often were just to make the string unique; the string cannot exist anywhere in the data. Here, I just stuck some random numbers onto  a few x characters because the long hyphen string might confuse people about the meaning of hyphens here.

There is some code that disables the submit button and makes a waiting image visible. The wait image is an animated GIF image that is one of those circular rotating indicators seen on mobile devices and elsewhere.

I use an alert box to show the results and I only expect a plain text string to come back from the server. In other code, I have used XML or HTML and done more complex formatting and display of the returned data. For this contact form script, a simple alert is all that is needed. I originally left the submit button enabled which is why there is code to ignore extra button presses. I left it since it doesn’t hurt anything.

Leave a comment