Cultivate Web Design Melbourne – Development Blog

Hate if or love it, forms are a daily part of a developers life. In this post I will show you a few ways to ease the pain.

Say we have this,

<form method="post">
	Member id:<input id="memberid" /><br />
	First name:<input id="firstname" /><br />
	Last name:<input id="lastname" /><br />
	Phone:<input id="phone" /><br />
	Email:<input id="email" /><br />
	<input type="submit" />
</form>

And we want to end up like this one below:

<form method="post">
	Member id:<input name="memberid" value="<?=$_POST['memberid']?>" id="memberid" /><br />
	First name:<input name="firstname" value="<?=$_POST['firstname']?>" id="firstname" /><br />
	Last name:<input name="lastname" value="<?=$_POST['lastname']?>" id="lastname" /><br />
	Phone:<input name="phone" value="<?=$_POST['phone']?>" id="phone" /><br />
	Email:<input name="email" value="<?=$_POST['email']?>" id="email" /><br />
	<input type="submit" />
</form>

So what do we do? We ask a little help from our mate, regEx.
We search for this

 id="([a-z0-9_-]+)" 

and replace with this

 name="$1" id="$1" 

. Now for values search for

 name="([a-z0-9_-]+)" 

and replace with

 name="$1" value="<?=$_POST['$1']?>" 

and bang! It’s done!

Now a little tip on how to convert those nasty

<select name="country">
	<option value="Australia">Australia</option>
	<option value="Austria">Austria</option>
	<option value="Bahamas">Bahamas</option>
	....
</select>

to

<select name="country">
	<option value="Australia" <?=$_POST['country']=='Australia'?' selected ':''?>>Australia</option>
	<option value="Austria" <?=$_POST['country']=='Austria'?' selected ':''?>>Austria</option>
	<option value="Bahamas" <?=$_POST['country']=='Bahamas'?' selected ':''?>>Bahamas</option>
	....
</select>

All you have to do is to replace

<option value="([A-Za-z0-9_ -]+)">([A-Za-z0-9_ -]+)</option>

with

<option value="$1" <?=$_POST['country']=='$1'?' selected ':''?>>$2</option>

Now only if designing forms with out tables was this easy

Say we want to auto fill the rest of the fields when some one enters the member id,

<form>
	Member id:<input id="memberid" /><br />
	First name:<input id="firstname" /><br />
	Last name:<input id="lastname" /><br />
	Phone:<input id="phone" /><br />
	Email:<input id="email" /><br />
	<input type="submit" />
</form>

Now we make a php file to simply return the memeber info from for a POSTed id.
The use of JASON here will let us do a neat trick when populating the fields using Javascript.
If the memebrs not found, setting the header to ’500′ will return fail for the jason request.

//load_member.php
$id = mysql_escape_string($_POST['id']);
$array = mysql_fetch_assoc(mysql_query("SELECT firstname, lastname, phone, email FROM members WHERE id = '$id' "));
if(is_array($array))
	echo json_encode($array);
else
	header('HTTP/1.1 500 Internal Server Error');

Now, when a user moves the curser out of the memeber id input box, we will call the php file above though a normal javascript POST request.

$('memberid').addEvent('blur',function()
{	new Request.JSON(
	{	url: "load_member.php",
		onFailure:function()
		{	alert("Sorry, we couldn't find the id.");
		},
		onSuccess: function(member)
		{	for (var member_details in member)
			{	$(member_details).set('value',member[member_details]);
			}
		}
	}).post({'id': this.get('value')});
});

If we named the form id’s the same as table fields or used

 SELECT field_name AS html_id_name FROM table

then we can use the ‘for loop’ to populate the fields.