Showing posts with label HTML. Show all posts
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.
One of the main issues involved with web designing is using proper fonts for the interface. That is because in most of times matching fonts for the user interface design are not standard web fonts. Therefore all the users must have the font to view the web properly. Otherwise the default fonts will be displayed.
There are some alternatives to overcome this issue. One of them is using images instead of text. So the images are rendered with the original font, and that will solve our problem. But it is also not issue free. These are the main issues with it.
Images consume more bandwidth than text. Hence it consumes time also.
Search engines are less sensitive for images. They can’t read the content of image and therefore Search Engine Optimization (SEO) will be an issue too.
Hence images are not the best option. There is another alternative, i.e. using CSS font-face. Font-face is used to define fonts in a style sheet.
@font-face {
font-family: Bambino;
src: local("Bambino"), url("Bambino.ttf") format("opentype");
}
Here, you can specify the source (src) of the font. local means if the font defined is available in the local PC, then use it. url means if it is not, download it from the given location. Let’s see how this can use.
/*
file: styles.css
"Bambino" is the font I used. "Bambino.ttf" is the relevent font file.
*/
@font-face {
font-family: Bambino;
src: local("Bambino"), url("Bambino.ttf") format("opentype");
}
h1 {
font: bold 28px Bambino;
}
p {
font: 18px Bambino;
}
<!-- file: font.html --> <!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" /> <title>CSS Typography</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum dui id arcu ornare eu lobortis orci bibendum. Mauris rhoncus tincidunt vestibulum. Duis imperdiet neque sed turpis viverra suscipit gravida est varius. Nullam euismod tellus quis velit semper vitae vehicula ligula congue.</p> </body> </html>
Today I’m going to show you something regarding GD library of PHP. The GD library is the main library using for Graphics in PHP. By using functions of this library, it is possible to manipulate images with PHP.
In this post, I will show you how to create a dynamic progress bar with PHP. In here the “dynamic” means you can parse 2 values, (i.e. maximum value and the current value) and the PHP script will calculate and render the progress bar dynamically on the screen. The output will come in the format of PNG image file. Hence it is very easy to use in you HTML file.
That’s all about the explanation. So let’s go for codes…
<?php
// filename: progressbar.php
// author : lasantha samarakoon
// set the type of data (Content-Type) to PNG image
header("Content-Type: image/png");
// extract GET global array
extract($_GET);
// set defaults
if(! isset($max)) $max = 100;
if(! isset($val)) $val = 100;
// this method prepare blank true color image with given width and height
$im = imagecreatetruecolor(400, 20);
// set background color (light-blue)
$c_bg = imagecolorallocate($im, 222, 236, 247);
// set foreground color (dark-blue)
$c_fg = imagecolorallocate($im, 27, 120, 179);
// calculate the width of bar indicator
$val_w = round(($val * 397) / $max);
// create a rectangle for background and append to the image
imagefilledrectangle($im, 0, 0, 400, 20, $c_bg);
// create a rectangle for the indicator and appent to the image
imagefilledrectangle($im, 2, 2, $val_w, 17, $c_fg);
// render the image as a PNG
imagepng($im);
// finally destroy image resources
imagedestroy($im);
?>
OK… that is the PHP script. Now it’s time to display it in the browser. First create a HTML file to display the image. In the IMG tag of the HTML file, type the location of your PHP script and specify 2 values, maximum and current 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=iso-8859-1" />
<title>Progress Bar</title>
</head>
<body>
<img src="progressbar.php?max=100&val=70" />
</body>
</html>
That’s all, and you can see the output…
Good day guys, today I’m going to show you how to download a file without reloading or refreshing the current page. So to do that, I will use my preferred server-side language PHP, HTML and little bit of CSS.
So the problem is, I have a link named “Download” and when I click on that link browser’s file download box should be visible without refreshing or navigating away from the page. So to solve this problem I will use an AJAX technique. Let’s think how we can implement this in AJAX.
My solution is this. I will create a HTML inner frame in my web page. And when I click on the download link, something will be loaded in the inner frame. So this is how I solved that.
I will create 2 web pages, one is pure HTML and other one is PHP. The HTML page contains the inner frame and download button. The PHP file is used to dynamically read the content of the downloadable file and write them to the client.
<!-- index.htm -->
<!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=iso-8859-1" />
<title>AJAX Download</title>
</head>
<body>
<!-- this inner frame is hidden by css -->
<iframe name="ajax_frame" style="display: none;"></iframe>
<!-- download link -->
<a href="download.php" target="ajax_frame">Download</a>
</body>
</html>
Here I named inner frame as “ajax_frame” and in the link I set the target to that inner frame. So when I click on the link, the content will be loaded in the inner frame. And I set the display style of the inner frame to “none” to hide the frame in the web page. So the user cannot see the inner work of the web page.
<?php // download.php
// send http header 'content-type'
header("Content-Type: text/plain");
// start flushing data
ob_start();
// echo data
echo "hello world";
// get the flushed data size and send http header attribute 'content-length'
header("Content-Length: " . ob_get_length());
// send http header information regarding the file attachment
header("Content-Disposition: attachment; filename=test.txt; modification-date=\"Sun, 15 Nov 2009 12:50:00 +0530\";");
?>
Above is the technique I used to push the file content to the client. It’s just a PHP echo with some header commands. In this demonstration I did not used any external file, but I send some content using the echo command. This is really same as reading a text file contents “hello world” in it. Let’s consider line by line.
header("Content-Type: text/plain");
I used header command to send HTTP response headers to the client. Here I send “Content-Type” header indicating the incoming data is belongs to plain text. You can use any other Content-Type regarding to the data you are going to send. As an example, for a PDF file you can send “application/pdf”.
ob_start();Start flushing data to the client.
echo "hello world";
Echo the content of the file.
header("Content-Length: " . ob_get_length());Get the length of data flushed to the client and send the header “Content-Length” to the client.
header("Content-Disposition: attachment; filename=test.txt; modification-date=\"Sun, 15 Nov 2009 12:50:00 +0530\";");Here it is again an HTTP response header, indicating that the flushed data belongs to the file named “test.txt” and the modified date of the file.
So this is all about the solution. If you want to send really an external file to the user, you have to replace line # 9 with commands regarding to open the file, read the content, echo the content and close the file. That’s all.