Cultivate Web Design Melbourne – Development Blog

window.addEvent('domready',function(){
	$$('input[name=Enquiry_type]').addEvent('change',function()
	{	var Enquiry_Categories = [['option 1','option 2','option 3'],['option 4','option 5','option 6'],['option 7','option 8','option 9']];

		$('Enquiry_Sub_Category').empty();

		for(i=0; i<Enquiry_Categories[$(this).get('value')].length; i++)
		{	var option = Enquiry_Categories[$(this).get('value')][i];
			$('Enquiry_Sub_Category').grab(new Element('option',{value: option, html: option}));
		}
	});
});

<!-- when this is selected-->
<select name="Enquiry_type">
<option value="0">select this for options 1,2,3</option>
<option value="1">select this for options 4,5,6</option>
<option value="2">select this for options 7,8,9</option>
</select>

<!--this will get populated-->
<select name="Enquiry_Sub_Category">
</select>

'option 1','option 1',

$(body).toggleClass('enlarge'); //enlarge text link onclick

body p{
   font-size:12px;
}

body,enlarge p{
   font-size:16px;
}

Now you dont have to reload css files and have all the css in one file too.

OffsetHeight property returns the elements real width including borders, margin and padding.
This is a IE introduced property not in w3c but now implemented in almost all browsers. Maybe we should try using mootools new get calculated width/height?

We combined this with phatfusions validate to only validate visible fields on forms.

Element.implement(
{	isHidden: function()
{	var w = this.offsetWidth, h = this.offsetHeight,
force = (this.tagName === 'TR');
return (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : this.getStyle('display') === 'none';
},

isVisible: function()
{	return !this.isHidden();
}
});

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.