Cantthinkofa.com

I’m a web development programmer for a small company (the actual creation of sites consists of my boss + me, and he uses FrontPage…ugh) and about 2 years back I created a reservation system for fishing boats. This system has a nice administrative interface, dynamic calendar creation, integration with PayPal and, since it was done in about 5 weeks, doesn’t really look pretty. So I recently started working on version 2.0 of this thing. Well while doing some improvements to the form for creating a schedule I looked into using Mootools javascript framework, I’ve used it in the past to great success. Now, when creating a piece of a dynamic form where clicking a button adds a group of new fields, things can get a little tricky. Then I found the ‘adopt’ function.So I have a nice little form:
<form action='somepage.php' method='post'>
<input type='text' maxlength='2' size='1' name='hours' class='rmargin' /> :
<input type='text' maxlength='2' size='2' name='minutes' class='rmargin' />
<select name='amorpm' size='1'>
<option value='AM'>AM</option>
<option value='PM'>PM</option>
</select>
<input type='submit' name='w00t' value='Go!' />
</form>

(For further notice, the class ‘rmargin’ just gives a margin-right value to put space between the fields.)

Now, that form will support 1 time set. We want to allow the user to add more sets. The first version I created had a complicated form solution where the user submitted the form with a specific button, then an overly  complicated multiple loop php algorithm. So I played with some happy Mootools javascript, I could choose from inject or grab. The problem with those two is 1) they require supplying a specific element and putting something before or after it (with some manipulation grab can put things inside but yea…) 2) Neither enables the addition of multiple elements. So first we need something to place our new elements in, and a button to add new stuff with.

Add <input type='text' id='numnew' maxlength='1' size='1' value='1' />
<button onClick='addnew()'>Add</button>
<form action='somepage.php' method='post'>
<span id='timeset'>
<input type='text' maxlength='2' size='1' name='hours[]' class='rmargin' /><span class='rmargin'>: </span>
<input type='text' maxlength='2' size='2' name='minutes[]' class='rmargin' />
<select name='amorpm[]' size='1'>
<option value='AM'>AM</option>
<option value='PM'>PM</option>
</select>
<div class='linebreak' />
</span>
<input type='submit' name='w00t' value='Go!' />
</form>

First, notice the extra span around the colon. This is because the javascript is a little difficult to add just the colon with the right spacing, therefore a span with our rmargin class containing the colon works perfectly. In addition, there’s the div that we are using to create a linebreak after the fields. (For those who are interested, the css looks like this: .rmargin { margin-right: 4px; } .linebreak { display: block; height: 5px; } )  Now, we just need to add the javascript. The javascript has to create a bunch of elements then add them into our span. The following javascript must be placed after the above form so that it can find the elements by their id. You could place a condition that it waits for the dom to be ready and done loading but thats extra code that we don’t need to write.

<!-- This should be placed in the head of the document, this is the mootools framework. Get it from the site -->
<script type='text/javascript' src='mootools.js'></script>
<script type='text/javascript'>
<!--
var ourspan = $('timeset'); // select the element by its id
var breakdiv = new Element("div", {class: "linebreak"}); // create the element that we will clone
function addnew()
{  // add for the number of sets they want to add
for (x = 0; x < $('numnew').get('value'); x++)
{
// create all our elements
var hours = new Element("input", {class: "mright", type: "text", name: "hours[]", maxlength: 2, size: 1});
var colon = new Element("span", {text: ": "});
var mins = new Element("input", {class: "mright", type: "text", name: "minutes[]", maxlength: 2, size: 2})
var select = new Element("select", {class: "mright", name: "amorpm[]", size: 1});
var optam = new Element("option", {value: "AM", text: "AM"});
var optpm = new Element("option", {value: "PM", text: "PM"});
// add the options to our select
select.adopt(optam,optpm);
// add the elements to the span
ourspan.adopt(hours,colon,mins,select,breakdiv.clone());
}
}
// -->
</script>

Oh happy day! Now we have a shiny new javascript powered form. Mind you this is just a proof of concept which is not the exact same as the code I used in the project. But it should be enough for anyone to understand and use themselves. You can use your choice of  scripting language to handle the form. You will end up in your post variables with a few arrays, one for hours, minutes, and amorpm. The indexes will coincide. Have fun! I know I did.