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',

Unfortunatly we only lhave a few ways to upload files without reloading the whole page. You can do this by using an iframe, flash or through a java applet. Since applets support drag and drop, we can use it to create a drag and drop file uploader.

This is the html to hold the java applet. We chuck in a text field so we can pass additional information with the applet’s file post.

    <input id="meta-text" />
    <button onclick="javascript:document.applets.uploadApplet.setMetadata(document.getElementById('meta-text').value);">Set metadata</button>
    <br />
    <applet type="application/x-java-applet" name="uploadApplet" id="uploadApplet" code="dndapplet/applet/DNDApplet" archive="signed_dndapplet.jar" mayscript="true" scriptable="true">
        <param name="uploadPath"                      value="uploader.php">
        <param name="funcNameHandleCurrentUpload"     value="handleCurrentUpload">
    </applet>

When a file is draged and dropped into the applet, it submits the file to the location passed through the uploadPath param. The upload works the same way as any FILE/POST form submit. So we write some PHP to handle it and return how the upload went.

$uploadPath = "./uploads";
$maxfilesize = 30000; //kByte
$tmp_name  = $_FILES['uploadfile']['tmp_name'];
$file_name = $_FILES['uploadfile']['name'];
$tgt_path  = "$uploadPath/$file_name";
$field_name = 'uploadfile';

if ($_FILES['uploadfile']['size'] > $maxfilesize*1024)
   die ("File exceeds maximum filesize: $maxfilesize kByte.");

if ( ! is_writable( $uploadPath) )
	die ("Upload path is not writeable.");

if ( ! move_uploaded_file( $tmp_name, $tgt_path ) )
  die ("Problem during upload.");

echo "$file_name Upload successful. Metadata: " . $_POST['metadata'];

Finally, we have to go back to the html page and write some javascipt to handle the value returned by the applet.

function javascript_callback (return_str)
{	alert(return_str);
}

Now we are all done. You can download the demo and the source code live demo link . If you want to change the appearance of the applet, you can edit the code .

Here’s the live demo link and the full source code

		header('HTTP/1.1 500 Internal Server Error');

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.