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.
10 comments
Hey Nice post. I like it.
by Codespur on October 13, 2011 5:45 PM. #
Awesome post, I have bookmarked it for future reference.
by host1free on October 31, 2011 4:33 PM. #
very nice post
by phuket hotel on November 1, 2011 3:32 PM. #
Awesome thanks for nice posting!
by Sewanti on November 10, 2011 5:29 PM. #
Excellent posting!
by Custom Lanyards on November 11, 2011 9:03 PM. #
very good posting i like it
by BMX Accessories on November 12, 2011 6:42 PM. #
Thank you for your posting!
I like it
by Weihnachtsgeschenk Ideen on November 14, 2011 5:16 PM. #
your post is very nice. I like it very much.
by Himalayan Crystal Salt on November 25, 2011 6:23 PM. #
Your blog article is very intersting and fanstic,at the same time the blog theme is unique and perfect,great job.To
your success.
----------------------------------------------------------
Flower Girl Dresses|Empire Wedding Dresses|New Style Wedding Dresses
by Flower Girl Dresses on February 17, 2012 5:23 PM. #
Perfect breasts
A guy walking down the street sees a woman with perfect breasts.
He says to her "Hey Miss, would you let me bite your breasts for 100
dollars?
"Are you nuts?", she replies. And keeps walking away.
He turns around, runs around the block and gets to the corner before she
does. "Would you let me bite your breasts for 1,000 dollars?" he asks
again.
"Listen sir, I'm not that kind of woman. Got it?"
So the guy runs again around the next block and faces her again: "Would
you let me bite your breasts just once for 10,000 dollars?"
She thinks about it for a while and "Hmmm 10,000 dollars, eh? OK, just
once, but not here. Let's go to that dark alley over there".
So they went to that alley and she takes off the blouse to reveal the
most perfect breasts in the world. As soon as he sees them he jumps on them
and starts caressing them, fondling them, kissing them, burying his face in
them...but not biting.
In the end the woman gets all annoyed and asks: "Are you gonna bite them
or what?"
"Nah", he replies. "Costs too much."
Classic Dresses
Classic Bridesmaid Dresses
Wedding Dresses with Sleeves
by maple story mesos on February 21, 2012 9:14 AM. #