Data Science Made Easy : November 2011

Monday, 28 November 2011

Form in HTML for the Validation

<form id="text_form" method="" action="">
	<table id= "Table_01" width="100%" class="contactformlarge">
	<tr>
	<td align="right" valign="top" class="required">Name*</td>
	<td align="left" valign="top"><input type="text" name="Name" id="Name" value="" size="25" maxlength="128" /></td>

	</tr>

	<tr>
	<td align="right" valign="top" class="required">Email*</td>
	<td align="left" valign="top"><input type="text" name="Email" onblur="echeck(Email.value)"id="Email" value="" size="25" maxlength="128" /> </td>
	</tr>


	<tr>

	<td align="right" valign="top" class="required">Phone</td>
	<td align="left" valign="top"><input type="text" name="Phone" id="Phone" value="" size="25" maxlength="128" />(Optional)</td>
	</tr>

	<tr>
	<td align="right" valign="top" class="required">Country*</td>
	<td align="left" valign="top"><input type="text" name="Country" id="Country" value="" size="25" maxlength="128" /> </td>
	</tr>


	<tr>
	<td align="right" valign="top" class="required">Message*</td>
	<td align="left" valign="top"><textarea name="Message" cols="35" rows="5" id="Message"></textarea> </td>
	</tr>

	<tr>
	<td> </td>
	<td><input id="smitbtn" type="Button" value="Submit Form" onclick="return( Blank_TextField_Validator() && callAjax(this));" /> </td>

	</tr>
	<tr>


	<td> </td>

	<td>*fields Compulsory </td>
	</tr>
	</table>
	</form>

Checking the Form with Help of JS Script

function Blank_TextField_Validator()
	{
	//get the referece for form name text_formCheck the value of the element named text_name
	// from the form named text_form


	var x=document.getElementById("text_form");

	for(var i=0;i<=5;i++)
	{
	if(i==2){
	i=3;
	}
	if(x.elements[i].value=="")
	{

	// If null display and alert box
	alert("Please fill in the text field.");
	// Place the cursor on the field for revision
	x.elements[i].focus();
	//return false to stop further processing
	return (false);
	}
	}//end loop

	// If text_name is not null continue processing

	return (true);

	}

	function echeck(str) {

	var at="@"
	var dot="."
	var lat=str.indexOf(at)
	var lstr=str.length
	var ldot=str.indexOf(dot)
	if (str.indexOf(at)==-1){
	alert("Invalid E-mail ID")
	return false
	}

	if (str.indexOf(at)==-1 \|\| str.indexOf(at)==0 \|\| str.indexOf(at)==lstr){
	alert("Invalid E-mail ID")
	return false
	}

	if (str.indexOf(dot)==-1 \|\| str.indexOf(dot)==0 \|\| str.indexOf(dot)==lstr){
	alert("Invalid E-mail ID")
	return false
	}

	if (str.indexOf(at,(lat+1))!=-1){
	alert("Invalid E-mail ID")
	return false
	}

	if (str.substring(lat-1,lat)==dot \|\| str.substring(lat+1,lat+2)==dot){
	alert("Invalid E-mail ID")
	return false
	}

	if (str.indexOf(dot,(lat+2))==-1){
	alert("Invalid E-mail ID")
	return false
	}

	if (str.indexOf(" ")!=-1){
	alert("Invalid E-mail ID")
	return false
	}

	return true
	}

Wednesday, 23 November 2011

Adding HTML Tags Dynamically and Styling them with help of JavaScript

<html>
<head>
<script type="text/javascript">

function loadDoc()
{
var newelement=document.createElement("P");
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode("HellowWorld"));

var divElement=document.createElement("DIV");
divElement.style.width="100px";
divElement.style.height="100px";
divElement.style.backgroundColor="RED";
//divElement.style.styleFloat="left";   //for I.e property is styleFloat
divElement.style.cssFloat="left";       // for other browsers property is cssFloat
document.body.appendChild(divElement);


}
</script>
</head>
<body>

<div id="myDiv" style=" width:100px; height:100px;">I am in HTML File </div>
<p>This Script is written by Tahir Khalid ALL Right Reversed</p>
<input type="button" onClick="loadDoc()" />

</body>
</html>

Tuesday, 22 November 2011

Using Ajax Comparsion Two Div and Select Tag

<html>
<head>
<title>Comparison</title>

<script type="text/javascript">
function showPage1(str){
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET"," "+str+" ",true);

xmlhttp.send();

}

function showPage2(str){
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint2").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint2").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET"," "+str+" ",true);

xmlhttp.send();

}

</script>

<div class="column1-unit" style="width:655px">

        <div style="width:315px; float:left">
         <select id="ourSelect" onChange="showPage1(this.value)" style="width:150px;" >
        <option >Select a Model</option>
       <option value="HondaAccord.html" >Honda Accord</option>
       <option value="HondaCity.html">Honda City</option>
       <option value="HondaCivic.html">Honda Civic</option>
      <option value="HondaCRV.html">Honda CR-V</option>
      <option value="Mahran.html">Mahran</option>
              <option value="Cultus.html">Cultus</option>
              <option value="Swift.html">Swift</option>
              <option value="Prado.html">Prado</option>
              <option value="GLI.html">GLi</option>
              <option value="XLI.html">XLi</option>
            </select>
          </div>



        <div style="width:315px; float:left">
          <div align="center">
           <select id="ourSelect" onChange="showPage2(this.value)" style="width:150px;" >
              <option selected="selected">Select a Model</option>
              <option value="HondaAccord.html" >Honda Accord</option>
       <option value="HondaCity.html">Honda City</option>
       <option value="HondaCivic.html">Honda Civic</option>
      <option value="HondaCRV.html">Honda CR-V</option>
      <option value="Mahran.html">Mahran</option>
              <option value="Cultus.html">Cultus</option>
              <option value="Swift.html">Swift</option>
              <option value="Prado.html">Prado</option>
              <option value="GLI.html">GLi</option>
              <option value="XLI.html">XLi</option>
              <option value="ToyotaCamry.html">Camry</option>
            </select>
          </div>





        </div>
        <div id="txtHint" Style="width:315px; height:315px; float:left; overflow:scroll; "   >Customer info will be listed here...</div>
<div id="txtHint2" Style="width:325px; height:315px; float:left; margin-left:10px; overflow:scroll;" >Customer info will be listed here...</div>

           

        </div>



</body>
</html>

Loading and Passing Images and Text values to JavaScript Function Dynamically

<html>
<head>
<script type="text/javascript">
function loadDoc(disimg)
{
alert(disimg);
document.write(disimg);
document.write("<p>"+disimg+"</p>");
document.getElementById("myDiv").innerHTML="<p>"+disimg+"</p>";
document.getElementById("myDiv").innerHTML="<img src="+disimg+".jpg"+"/>";
}

function loadDoc2(disimg)
{
alert(disimg);
document.getElementById("myDiv").innerHTML="<img src="+disimg+".jpg"+"/>";
}

</script>
</head>
<body>
<div id="myDiv" style=" width:400px; height:400px;"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadDoc('cat')">Change Content</button>
<button type="button" onclick="loadDoc2('cat')">ChangeImage</button>
</body>
</html>

JavaScript for Fliping images

<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="images/Gas_Final.jpg"
var image2=new Image()
image2.src="images/Chemical_Plant1_Final.jpg"
var image3=new Image()
image3.src="images/Chemical_Plant2_Final.jpg"
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>
</head>
<body onload="slideit()">
<div class="banner_box"><img src="images/banner.jpg" name="slide" alt="">
</div>
</body>
</html>

Data Science Made Easy