27

May

preventing multiple form submission with php

Posted by mahesh chari  Published in Html, PHP/mysql

preventing multiple form submission with php

A dynamic web aplication contains atleast a web form that stores data in any database. major issue is data redundancy . we discussed already in my previous post preventing multiple form submission with javascript.
even though it works partially ,we can prevent it by server side also .
we use two methods to prevent multiple form submission

Redirecting user to another page

when a form submitted to server, we process the input and send user to another success full or error page.

using hidden field 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php 
session_start();
$rand_string=md5(uniqid(rand(), true));
$_SESSION['s_form']=$rand_string;
 $errors="";
if(isset($_POST['Submit']) 
and $_POST['s_form_randomizor']==$_SESSION['s_form']){
if($_POST['names']==""){
$errors="Names field required.";
}else{
$_SESSION['s_form']=$rand_string;
}
}
?>

HTML part

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prevent multple form submission</title>
</head>
 
<body>
<?php echo (isset($_POST['Submit']) and $errors!="")?$errors:'';?>
<form id="s_form" name="form1" method="post" action="">
  <input name="names" type="text" id="names" />
  <input type="submit" name="Submit" value="Submit" />
  <input type="hidden" name="s_form_randomizor" value="<?php echo $rand_string;?>"/>
</form>
</body>
</html>

Download Source Code

prevent-multlple-form-submission

Popularity: 8% [?]

More
no comment

26

May

javascript setintervel

Posted by mahesh chari  Published in Html, javascript

Calling a Javascript function in regular interval

Generelly we need to work or call a javascript function . for that we user setInterval function .below example shows how we use it.
setInterval function takes two parameters ,first parameter function handler and second parameter the time in milli seconds.
below example show a simple counter that executes the function in every second interval.

javascript setinterval example and tutorial

javascript setinterval example and tutorial

Download Source Code

javascript-setinteval-source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>
<head>
<title>javascript setInterval();</title>
</head>
 
<body>
<script type="text/javascript">
var timer;//stores the timer varible for a function
var count=0;
function start(){
timer=setInterval(sethtml,1000);
}
function sethtml(){
document.getElementById('timer').innerHTML=count++;
}
 
function stoptimer(){
clearInterval(timer);
}
</script>
<a href="#start" onclick="start();">Start</a> <a href="#stop" onclick="stoptimer();">Stop</a>
<div id="timer"></div>
</body>
</html>

Download Source Code

javascript-setinteval-source code

Popularity: 8% [?]

More
no comment

26

May

preventing multiple form submission with javascript

Posted by mahesh chari  Published in Html, javascript

Prevent or stop multiple form submission with JavaScript

A dynamic web application contains at least one user form and the big issue is data redundancy (duplicate data). The main reason is multiple form submission. when a form is being sent to the server,the user can send the form data multiple times by pressing Enter (return ) key or clicking the submit button.in this example we disable this features while form being submitted.but it fails when user refreshes or click the F5 button . To prevent Refresh event we use Server side check or redirect to another page .

Down load Source Code

prevent-multiple-form-submission

Example for client side check

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prevent multiple form submission with javascript</title>
<script type="text/javascript">
/*
This function validates the form data for rules.
Don't allow multiple form submission.
remember remember
if user refreshes while sending it fails.
for that we check for server side also
*/
var form_submited=false;
function validate(){
if(form_submited==true){alert('Form already submitted.');return false;}
	var name=document.ex_form.names.value;//access name value
	if(name==''){
		alert('Name is required.');
		return false;
	}
		form_submited=true;
		document.ex_form.Submit.disabled='disabled';//set form submitt button disabled
		document.ex_form.Submit.value='Processing..';//set form submit button text is processing.
	return true;
}
</script>
</head>
<body>
<form id="ex_form" name="ex_form" method="post" action="" onSubmit="return validate();">
  <input name="names" type="text" id="names" />
  <input type="submit" name="Submit" value="Submit"  />
</form>
</body>
</html>

Down load Source Code

prevent-multiple-form-submission

Popularity: 7% [?]

More
1 comment

26

May

css sprites image preloding

Posted by mahesh chari  Published in Html, css

Image pre loading with css and image sprites

We discussed image pre loading with javascript in my previous post.but it can’t be use full when javascript disabled browsers (off course use disables).So i got one idea how to implement without javascript for image preloading .

With Hidden Div Element

here the trick ,we know that browser loads all the assets (images,audio,embed elements ) as they appear in the HTML document.So we create a dive and hide and make it null style element .put the images which you want to load .

using css image sprites

for tri state button we need three image for each state (normal, hover, focus) by default we load normal image back ground. when we hove first time the second image loaded . so we use images sprites. as shown

Sample Sprite image for tri state buttons

Sample Sprite image for tri state buttons

Download Example Source code

image-preloading-with-css-sprites source code

Example for HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Preloading With CSS and Sprites</title>
</head>
<body>
<!--
please visit for detailed tutorial http://www.maheshchari.com
Here we use simple trick ,it work even without javascript
first create a div element with given style attributes specified above.
include the images  which to be preloaded.
remember put this div after the body tag,
since this element is first rendered,
all the images are loaded before they used
 -->
 image-preloading-with-css-sprites
<div id="preloader_div"> <img src="amphi-thetre.jpg" /> <img src="amphi-thetre1.jpg" /> <img src="amphi-thetre2.jpg" /> <img src="amphi-thetre3.jpg" /><img src="ex-sprite.png" /></div>
<div id="wrapper">begin your work here.</div>
<h3>Preloading with images sprites example tri state button.</h3>
<ul id="tributtons">
  <li><a href="http://www.maheshchari.com/">button1</a> </li>
  <li><a href="http://www.maheshchari.com/">button2</a> </li>
  <li><a href="http://www.maheshchari.com/">button3</a> </li>
</ul>
</body>
</html>

Css sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<style type="text/css">
<!--
 
#preloader_div {
	display: none; 
	height: 0px;
	width: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
}
<!-- tri state buttons -->
#tributtons {
	list-style-type: none;
}
#tributtons a,a:visited {
	display: block;
	background-image: url(ex-sprite.png); 
	background-repeat: no-repeat;
	background-position: 0px 0px;
	width: 150px;
	height: 24px;
	text-decoration: none;
	text-align: center;
	text-transform: capitalize;
}
#tributtons a:hover {
	background-position: 0px -24px;
}
#tributtons a:focus {
	background-position: 0px -48px;
}
 
-->
</style>

Download Example Source code

image-preloading-with-css-sprites source code

Popularity: 13% [?]

Tags: ,

More
6 comments

16

May

javascript image preloading

Posted by mahesh chari  Published in Html, javascript

Image Preloading with JavaScript

Now a days web visitor prefers to see fancy page designing .when designing most attractive web page ,it becomes must use lot of images ,back grounds ,animation effects.
When page becomes more attractive with lot of images, it takes time to load all the images and it consumes the user bandwidth.
Generally each embedded page elements like images, audio, video objects are loaded when browser makes HTTP request to server. When it comes to tri state buttons, mouse over image, loading large images, the user wait to see effects at first time. After loading first time browser will cache the image.

Image Object

So over come this first time loading of image we use JavaScript image object for loading.
We create an image object instance before web page body loaded, so the browser will make HTTP request before the required mouse over, image hover effect, tri state buttons.
Most advanced browser now a days use DOM, so it works on all browser.

CSS and Sprites

for javascript disabled browsers we can use css & sprite image preloading.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image preload</title>
<script type="text/javascript">
function preload_images(){
	img_length=preload_images.arguments.length;
	for(var i=0;i<img_length;i++){
		src=preload_images.arguments[i];
		img=new Image();
		img.src=src; //here we make http request
	}
}
// we are calling the function there by making HTTP request for images before page body loads
//here we use function argument property for multiple images
//remember all the image paths can be absolute or relative
preload_images('myimg.gif','urimg.jpg');
</script>
</head>
<body>
</body>
</html>

download source code

image-preloading-javascript-source-code

Popularity: 8% [?]

Tags: ,

More
5 comments
Page 2 of 212