forms « Federman Scripts

AJAX Form

This script will give a form on a page (or multiple forms) the ability to send off an email once complete. Zero Javascript is required on the implementer’s part, and very minimal edits need to be made to the PHP. Basic validation can be enabled, and this form is resistant to spam bots since it works off AJAX (and thus Javascript, which most bots have disabled). All the different input fields should work (text box, checkbox, drop downs, text areas, password fields, etc) except for file uploads, which I’ll probably handle in a later post.

Example: here
Source: ajaxForm.php

Although the source file is a PHP file, it needs to be included in the HTML as if it were a Javascript as shown in the example.

Note that there are two variables which should be edited by the implementor, both of which are at the very top of the file: $to and $from. These (pretty self-explanitorily) variables are the email addresses which the email is sent to and from. Note that the $to field may contain several email addresses separated by commas. This should be the only edit to the PHP/Javascript code that needs to be made.

In your HTML, add the “ajaxForm” class to your form(s) which you want to use this script. Note that the Javascript will overwrite the “action” property of the form, but this shouldn’t be a concern in most cases.

Two hidden fields should be included, “ajaxFormSubject” and “ajaxFormCompleteDiv”. ajaxFormSubject is the subject which you wish the email to have. ajaxFormCompleteDiv is the id of the HTML element you wish to display (display: block) after the form is successfully complete, like a “thank you” div. Note that if you want the ajaxFormCompleteDiv to be hidden initially, you should hide it with your own CSS. This is for flexibility.

After successful form completion, the form element will automatically be hidden (display: none) and the ajaxFormCompleteDiv automatically shown (display: block).

To enable validation for a field, add the class “required” to the field. The validation only consists of checking if some value was entered.

If a field is found to be invalid, the input, select, or textarea will be given the class “ajaxFormError”. You should add your own CSS to determine the style of this.

This code is meant for designers or developers with little to no programming experience and satisfies this requirement quite nicely as only 2 PHP variables should be modified and the rest is in the HTML.

Form and Table Row Nesting Workaround

Have you ever tried to nest elements in a way that is valid as far as XML is concerned, but isn’t “valid”? For example, have a table containing a different form per table row? This article describes a workaround for that.

So no matter how much you may hate tables in HTML, sometimes it just makes life much easier. Now I don’t want to get into a Div vs Table discussion, but I think we can at least agree that tables have a place and most of us use them at some point.

To set the stage, basically I was making a content management system for a client, and so I had several items with several editable properties. The most straightforward way I thought to implement this is to have a table, with one item per row, one property per column. For example:

Name	Email

The only real problem is that structurally we’d have <table><form><tr>…</tr></form></table>, which is not valid, and actually doesn’t work in Google Chrome.

Now, before anyone suggests just surrounding the table with one huge form, the table was dynamic (using php in my case) and could have arbitrarily many rows. Thus the entire form, including fields that weren’t even being used, would be sent every time a row was to be updated by the user. This greatly increases the amount POSTed. Not only that, but fields would need to be named something akin to name1, email1, name2, email2, etc. and that’s just a huge mess on the back-end.

My solution uses an invisible form outside of the table and javascript. The gist is once the submit button is pressed, move all input, select, and textarea elements from the desired “virtual form” to the invisible form and submit that invisible form.

Example: Here

In my example, which is basically identical to the above table, I’ve added the invisible form, the necessary javascript function, the class “form” to the table rows, and onclick="submitForm(this);" to the submit buttons.

You can add the “form” class to whichever container you want which defines your “form” as the javascript just takes the submit button and keeps going up the node tree until it hits a node with class="form".

Do note that because the submit button isn’t actually being clicked as far as the invisible form is concerned, the javascript converts the button into a hidden field so that the button name-value pair still appear in the POST.

Also note that since elements are being shuffled around, there is a slight “flicker” after the submit button is pressed, but before the page reloads. There are workarounds to this if absolutely necessary, but most users won’t care or even notice.

While all the code is very straightforward and easy to understand, it can be pretty powerful and hopefully prevent a lot of headaches and/or code rearrangement/hacks.

Federman Scripts

Recent Posts

Categories

Archives

Request Script

Donate

AJAX Form

Form and Table Row Nesting Workaround