Dynamically add HTML fields to a web form using Javascript/JQuery

by Lasantha Samarakoon on Wednesday, May 18, 2011

Imagine a situation where you need to create a web form which allows users to upload images to a web gallery… In this case you need to allow them to upload multiple images simultaneously. As long as you don’t know how many images the user going to upload, the best way to implement it is create a form with one file field and put a button to dynamically append more file fields to the form.

If you are familiar with Javascript/JQuery, it will be an easy task. You can create it as follows. (Please note that I am using the JQuery library, as it simplifies the code rather than using pure Javascript.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// this function will be automatically called when the page is ready to display
$(document).ready(function() {
 // bind the button's click event with the function
 $('#add_button').bind('click', function() {
  // get the html content of the place holder and append new file field into it
  var newContent = $('#place_holder').html() + '<input type="file" name="image[]" value="" /><br />';
  // set the new html content to the place holder
  $('#place_holder').html(newContent);
 });
});
</script>
</head>
<body>
<form method="post" action="">
 <input type="button" value="Add new file" id="add_button" /><hr />
    <span id="place_holder">
     <input type="file" name="image[]" value="" /><br />
    </span>
</form>
</body>
</html>

As you can see, it is a really easy task. But when you put this code into action, you’ll notice there is a small problem with it. The problem is, whenever you add new file field, the files you already selected will lose. To solve it you have to do a little tweak to this code. The tweaked code is as follows.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var counter = 1;
// this function will be automatically called when the page is ready to display
$(document).ready(function() {
 // bind the button's click event with the function
 $('#add_button').bind('click', function() {
  // generate html for new file field and create new place holder too (with new id)
  var newContent = '<input type="file" name="image[]" value="" /><br /><span id="next_position_' + (counter + 1) + '"></span>';
  // set the new html content to the place holder
  $('#next_position_' + counter).html(newContent);
  // increment the counter by one
  counter++;
 });
});
</script>
</head>
<body>
<form method="post" action="">
 <input type="button" value="Add new file" id="add_button" /><hr />
    <span id="file_set">
     <input type="file" name="image[]" value="" /><br />
        <span id="next_position_1"></span>
    </span>
</form>
</body>
</html>

In this method, we first create a place holder for the field. When the user clicks the button, we add the new file field as well as a new place holder with new ID into the current place holder. As long as this code does not re-write HTML for existing fields, contents of the fields will not affect anymore.

Browse internet from the Windows mobile device emulator?

by Lasantha Samarakoon on Monday, May 2, 2011

Windows mobile device emulator, cannot access internet even though your computer is connected to 24x7 internet connection. That is because, the device emulator works exactly same as a virtual machine. Simply, emulator runs an operating system (guest OS) on the PCs operating system (host OS), the same concept behind the virtualization. The emulator works as the hypervisor, and manages resources between the host and guest Oss, but note that it does not establish any connection between the two operating systems.

Since the emulator is another machine, you cannot access the internet through the emulator directly, without establishing a bridge between them (the guest and the host).

Here are the steps you need to follow. (Please note that I’m considering only Microsoft Windows XP operating system, and this will not work same as on Windows Vista/7.)

1. First you have to download and install Microsoft ActiveSync from the Microsoft download center. It is a small setup of 7.5MB.

2. If you are using Visual studio, go to “Tools” menu and select “Device Emulator Manager”. It’ll open the “Device Emulator Manager” window. If you need to start the emulator as standalone application, go to “Run” and type,

C:\Program Files\Microsoft Device Emulator\1.0\dvcemumanager.exe

Device emulator manager in the Visual studio 2008 menubar

Device emulator manager window

3. Once the window opened, right click on the preferred emulator and select “Connect”. In a while, the device emulator will open, and the emulator entry in the “Device Emulator Manager” will show a green arrow.

Green arrow in the the Device emulator manager

Note the "Connect" and "Craddle" menu items in the context menu

4. Again right click on the same emulator entry, and select “Cradle”. Once you click it, the ActiveSync window will appear on the host OS, and will display as “Connected”.

Connected status in the ActiveSync window

5. Now everything is completed. Open Internet explorer in the mobile device and put a URL. You’ll navigate to the page in the internet.