Haiders WebSpace » JavaScript

Flipping an image vertically or horizontally using the Select tag (IE Only)

Haider al-Khateeb — Thu, 14 Jan 2010 21:38:43 +0000

FlipV and FlipH filters can be used to flip images vertically or horizontally in IE (These filters works in IE only). the following code shows you how to control an image by using the HTML Select Tag to FlipV, FlipH or Apply both filters at the same time.

<html> 
<head> 
 
<title>Applying FlipV and FlipH using the Select tag (IE Only)</title> 
 
<script language="JavaScript">
	function change()	
	{
var sel = document.getElementById("SelectFilter");
var SelectV = sel.options[sel.selectedIndex].value;
 
if (SelectV == 'NoFilter')
{ document.getElementById("x").style.filter = '' }
 
else if (SelectV == 'FlipVH')
{ document.getElementById("x").style.filter = 'Filter: flipV + Filter: flipH' }
 
else
{ document.getElementById("x").style.filter = (SelectV == 'FlipH') ? 'FlipH' : 'FlipV'; }
	}
</script>
 
</head> 
 
<body> 
 
<br><br>
<select id="SelectFilter" onChange="change()">
<option value="NoFilter">No Filter
<option value="FlipH">Flip H
<option value="FlipV">Flip V
<option value="FlipVH">Both
</select>
<br><br><br>
<img src="image-name.jpg" id="x">
<br><br>
 
</body> 
 
</html>

JavaScript Injection (Form Editing)

Haider al-Khateeb — Thu, 07 Jan 2010 20:40:52 +0000

JavaScript codes can be injected in the address bars of web browsers to edit online forms before submitting them, bellow I am posting an example for archiving purposes.

Assuming the page has a contact form, where submitted data is sent to an email address included in a hidden HTML input tag as in the following code:

…
<form name="ContactForm" action="submit.php" method="post">
<input type="hidden" name="Email" value="admin@website.com" />
…

To change the email address to: myemail@hotmail.com, the following code can be injected:

javascript:void(document.ContactForm.Email.value="myemail@hotmail.com");

Where ContactForm is the name of the form and Email is the name of the input tag.

To check that the value has actually been changed, view it with:

javascript:alert(document.ContactForm.Name.value);

If the form has no name, check the form order in the page, if it is the first, you may refer to it using: forms[0]. Same thing applies to the input tag, you may refer to it using: elements[0].

This way, assuming the form is the first, and the order of the input tag in that form is 4, our codes will be:

javascript:void(document.forms[0].elements[3].value="myemail@hotmail.com");

and

javascript:alert(document.forms[0].elements[3].value);

Javascript Injection (Cookie Editing)

Haider al-Khateeb — Thu, 07 Jan 2010 00:51:52 +0000

Your browser’s address bar (URL bar) can be used to inject JavaScript code directly into the webpage you are visiting without reloading the page. The following codes are useful to do cookie editing:

First, visit the targeted webpage and inject the following code to view realted cookie’s fields and the values assigned to them.

javascript:alert(document.cookie);

Second, to edit a certain value use:

javascript:void(document.cookie="Field=myValue");

For example, if the following field exist:

active=no

The value can be changed to yes with the following code:

javascript:void(document.cookie="active=yes");

If the field’s name does not exist, it will be created.
To have more control over cookies, refer to a proper tutorial and inject the codes in a similar way.

In addition, there are cookies editors available online such as the following PlugIn for Mozilla FireFox:

Add N Edit Cookies
Homepage: http://addneditcookies.mozdev.org.
Download latest release from: https://addons.mozilla.org/en-US/firefox/addon/573.

Basic Form Validation

Haider al-Khateeb — Fri, 13 Mar 2009 05:57:02 +0000

Who doesnt need to implement a data validation technique along with every online form?

Bellow is a basic javascript code to check that no form is submitted with empty fields:

<html>
<head>
<script Language="JavaScript">
head>
 
<body>
<center>
<form name="Signup" action = "submit_form.php" method = "post" 
onsubmit="return Validator(this)" >
Username: <input type ="text"  name="UserName" size="20"> <b>-b> 
Password: <input type ="text"  name="Password" size="20"> <b>-b> 
Fullname: <input type ="text"  name="FullName" size="20"> <b>-b> 
<input name="Submit" type="submit" value="Submit">
form>
center>
body>
html>

Limit the number of ticks allowed for a list of check boxes

Haider al-Khateeb — Sun, 01 Mar 2009 05:28:51 +0000

As part of an experiment for testing a new authentication mechanism for web applications (will post more about it sometime in the future) I needed my users to select only four images out of many while filling a form.

I used a CheckBox beside every image and developed a JavaScript code to limit the number of checkboxes allowed to be ticked.

I am posting the code here followed by a Demo of how it works:




 
<script type="text/javascript">
function CheckBoxF(x) {
var total=0;
var i=0;
do { 
if(document.SelPicForm.ChkBox[i].checked){
total =total +1;
}
if(total > 4){
alert("Please select only four")
document.SelPicForm.ChkBox[x].checked = false ;
return false;
}
i++;
}while(i < document.SelPicForm.ChkBox.length)
}
script>

 

 




You may select four pictures only!


(Picture 1)


(Picture 2)


(Picture 3)




(Picture 4)


(Picture 5)


(Picture 6)




(Picture 7)


(Picture 8)


(Picture 9)

Demo for the above code is as follows:

You may select four pictures only!
(Picture 1)	(Picture 2)	(Picture 3)
(Picture 4)	(Picture 5)	(Picture 6)
(Picture 7)	(Picture 8)	(Picture 9)