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.
