Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

getElementsByTagName in javascript


<html>
<head>
<title>getElementsByTagName Javascript</title>
<script>
function getElementFtn()
{
 alert(document.getElementsByTagName("p").item(0).innerHTML)
}
</script>
</head>

<body>
<p>this is first tag</p>

<p>this is second</p>

<p id="pID">this is third tag</p>

<p>this is forth tag</p>

<p>this is fifth tag</p>

<a href="javascript:getElementFtn()">check this element</a>
</body>
</html>
READ MORE - getElementsByTagName in javascript

Form parameter validation using javascript(username,password,email,number,alphanumeric))



UserName Password validation

<html>
<head>
<title>Required Validation</title>
<script>
function validate()
{
  var vUser=trim(document.frm.sUser.value);
  var vPwd=trim(document.frm.sPwd.value);

  if(vUser=="")
  {
    alert("User Name Field is Empty");
    document.frm.sUser.focus();
    return false;
  }
  else if(vPwd=="")
  {
   alert("Password Field is Empty");
   document.frm.sPwd.focus();
   return false;
  }
}

function trim(s) {
    return s.replace( /^\s*/, "" ).replace( /\s*$/, "" );
}

</script>
</head>

<body>
<form name="frm" onSubmit="return validate();">
User Name <input type="text" name="sUser" /><br>
Password <input type="password" name="sPwd" /><br>
<input type="submit" name="goTo" value="Submit"/>
</form>
</body>
</html>


----------------------------------------------------------------
Number or Integer Validation

<html>
<head>
<title>Number Integer Validation</title>
<script>

function validate()
{
  var dValidate=document.frm.numberValidate.value;
  if(dValidate=="")
  {
    alert("Number Field is empty")
    return false;
  }
  else if(isDigits(dValidate)==false)
  {
   alert("Field is not numeric")
   return false;
  }
}

function isDigits(argvalue) {
    argvalue = argvalue.toString();
    var validChars = "0123456789";
    var startFrom = 0;
    if (argvalue.substring(0, 2) == "0x") {
       validChars = "0123456789abcdefABCDEF";
       startFrom = 2;
    } else if (argvalue.charAt(0) == "0") {
       validChars = "01234567";
       startFrom = 1;
    }
    for (var n = 0; n < argvalue.length; n++) {
        if (validChars.indexOf(argvalue.substring(n, n+1)) == -1) return false;
    }
  return true;
}
</script>
</head>

<body>
<form name="frm" onSubmit="return validate();">
Number <input type="text" name="numberValidate" />
<input type="submit" name="goTo" value="Number Validate" />
</form>
</body>
</html>


------------------------------------------------------------------
Date Validation

<html>
<head>
<title>Date Validation</title>
<script>
function validate()
{
  var dValidate=document.frm.dateValidate.value;
  if(dValidate!="")
  {
    var arDValidate=dValidate.split("/");
    if(arDValidate.length==3)
    {
      if(arDValidate[0].length!=2 || (arDValidate[0]>32))
      {
         alert("Wrong Date format");
         return false;
      }
      else if(arDValidate[1].length!=2 || (arDValidate[1]>13))
      {
         alert("Wrong Month format");
         return false;
      }
      else if(arDValidate[2].length!=4 || (arDValidate[2]<1900))
      {
         alert("Wrong Year format");
         return false;
      }
      else
      {
        var dateDate=new Date(arDValidate[2],arDValidate[1]-1,arDValidate[0]);
        if((arDValidate[0]!=dateDate.getDate()))
        {
          alert("Wrong Date Enter e.g date month year is not correct 31 feb 2009");
          return false;
        }
      }
    }
    else
    {
    alert("Wrong Format");
    return false;
    }
  }
  else
  {
   alert("Date is blank");
   return false;
  }
}

</script>
</head>

<body>
<form name="frm" onSubmit="return validate();">
mm/dd/yyyy <input type="text" name="dateValidate" />
<input type="submit" name="goTo" value="Date Validate" />
</form>
</body>
</html>


-------------------------------------------------------------------
Email Validation

<html>
<head>
<title>Email Validation</title>
<script>
function validate()
{
  var dValidate=document.frm.emailValidate.value;
  if(dValidate=="")
  {
    alert("Email Field is empty")
    return false;
  }
  else if(checkEmail(dValidate)==false)
  {
   alert("Email Format is not correct")
   return false;
  }
}

function checkEmail(emailStr) {
       if (emailStr.length == 0) {
           return true;
       }
       var emailPat=/^(.+)@(.+)$/;
       var specialChars="\\(\\)<>@,;:\\\\\\\"\\.\\[\\]";
       var validChars="\[^\\s" + specialChars + "\]";
       var quotedUser="(\"[^\"]*\")";
       var ipDomainPat=/^(\d{1,3})[.](\d{1,3})[.](\d{1,3})[.](\d{1,3})$/;
       var atom=validChars + "+";
       var word="(" + atom + "|" + quotedUser + ")";
       var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
       var domainPat=new RegExp("^" + atom + "(\\." + atom + ")*$");
       var matchArray=emailStr.match(emailPat);
       if (matchArray == null) {
           return false;
       }
       var user=matchArray[1];
       var domain=matchArray[2];
       if (user.match(userPat) == null) {
           return false;
       }
       var IPArray = domain.match(ipDomainPat);
       if (IPArray != null) {
           for (var i = 1; i <= 4; i++) {
              if (IPArray[i] > 255) {
                 return false;
              }
           }
           return true;
       }
       var domainArray=domain.match(domainPat);
       if (domainArray == null) {
           return false;
       }
       var atomPat=new RegExp(atom,"g");
       var domArr=domain.match(atomPat);
       var len=domArr.length;
       if ((domArr[domArr.length-1].length < 2) ||
           (domArr[domArr.length-1].length > 3)) {
           return false;
       }
       if (len < 2) {
           return false;
       }
       return true;
}
</script>
</head>

<body>
<form name="frm" onSubmit="return validate();">
Email <input type="text" name="emailValidate" />
<input type="submit" name="goTo" value="Email Validate" />
</form>
</body>
</html>

------------------------------------------------------------------
Alpha Character Validation

<html>
<head>
<title>Alpha number Validation</title>
<script>

function validate()
{
  var dValidate=document.frm.alphaValidate.value;
  if(dValidate=="")
  {
    alert("Alpha Field is empty")
    return false;
  }
  else if(isAlpha(dValidate)==false)
  {
   alert("Field is not alpha character")
   return false;
  }
}

function isAlpha(argvalue) {
  argvalue = argvalue.toString();
  var validChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

    for (var n = 0; n < argvalue.length; n++) {
        if (validChars.indexOf(argvalue.substring(n, n+1)) == -1)
         return false;
    }
  return true;
}
</script>
</head>

<body>
<form name="frm" onSubmit="return validate();">
Alpha Character <input type="text" name="alphaValidate" />
<input type="submit" name="goTo" value="Alpha Validate" />
</form>

</body>
</html>

READ MORE - Form parameter validation using javascript(username,password,email,number,alphanumeric))

Enable Disable Radio button Text box in JavaScript


<html>
<head>
<title>Enable Disable Radio button Text box in javascript</title>
</head>
<script>
 function chMd()
 {
  // initialize form with empty field
  document.forms[0].sTextBox.disabled=false;
  document.forms[0].sTextBox.value="";

  document.forms[0].eTextBox.disabled=false;
  document.forms[0].eTextBox.value="";

  document.forms[0].goServer.disabled=false;

  for(var i=0;i<document.forms[0].elements.length;i++)
  {
    if(document.forms[0].elements[i].name=="dOption")
    {
     if(document.forms[0].elements[i].value=="N")
     {
       if(document.forms[0].elements[i].checked==true){

        document.forms[0].sTextBox.disabled=true;
        document.forms[0].eTextBox.disabled=true;

        document.forms[0].sRadio[0].disabled=true;
        document.forms[0].sRadio[1].disabled=true;
        document.forms[0].sRadio[2].disabled=true;

        document.forms[0].goServer.disabled=true;
       }
     }
     else if(document.forms[0].elements[i].value=="T")
     {
       if(document.forms[0].elements[i].checked==true){
        document.forms[0].sTextBox.disabled=false;
        document.forms[0].eTextBox.disabled=false;

        document.forms[0].sRadio[0].disabled=true;
        document.forms[0].sRadio[1].disabled=true;
        document.forms[0].sRadio[2].disabled=true;

        document.forms[0].goServer.disabled=false;
       }
     }
     else if(document.forms[0].elements[i].value=="R")
     {
       if(document.forms[0].elements[i].checked==true){
        document.forms[0].sTextBox.disabled=true;
        document.forms[0].eTextBox.disabled=true;

        document.forms[0].sRadio[0].disabled=false;
        document.forms[0].sRadio[1].disabled=false;
        document.forms[0].sRadio[2].disabled=false;

        document.forms[0].goServer.disabled=false;
       }
     }
    }
  }
 }
</script>

<body>
<form name="fRadio">
  <input name="dOption" value="N" checked="checked" onClick="chMd()" type="radio">
   No Constraints <br />

    <input name="dOption" value="T" onClick="chMd()" type="radio"> Text Box

    <input name="sTextBox" size="10"  disabled="disabled" type="text">
    <input name="eTextBox" size="10"  disabled="disabled" type="text"> <br/>

    <input name="dOption" value="R" onClick="chMd()" type="radio">  Radio Button
    Radio A  <input name="sRadio" value="A" disabled="disabled" type="radio">
    Radio B  <input name="sRadio" value="B" disabled="disabled" type="radio">
    Radio C  <input name="sRadio" value="C" disabled="disabled" type="radio"> <br/>
  <input name="goServer" value="Go" disabled="disabled" type="button">
  </form>
</body>
</html>
READ MORE - Enable Disable Radio button Text box in JavaScript

Selecting all checkboxes using javascript


<html>
<head>
<title>JavaScript - Select All checkbox in form</title>
<script>
var fieldName='chkName';

function selectall(){
  var i=document.frm.elements.length;
  var e=document.frm.elements;
  var name=new Array();
  var value=new Array();
  var j=0;
  for(var k=0;k<i;k++)
  {
    if(document.frm.elements[k].name==fieldName)
    {
      if(document.frm.elements[k].checked==true){
        value[j]=document.frm.elements[k].value;
        j++;
      }
    }
  }
  checkSelect();
}
function selectCheck(obj)
{
 var i=document.frm.elements.length;
  for(var k=0;k<i;k++)
  {
    if(document.frm.elements[k].name==fieldName)
    {
      document.frm.elements[k].checked=obj;
    }
  }
  selectall();
}

function selectallMe()
{
  if(document.frm.allCheck.checked==true)
  {
   selectCheck(true);
  }
  else
  {
    selectCheck(false);
  }
}
function checkSelect()
{
 var i=document.frm.elements.length;
 var berror=true;
  for(var k=0;k<i;k++)
  {
    if(document.frm.elements[k].name==fieldName)
    {
      if(document.frm.elements[k].checked==false)
      {
        berror=false;
        break;
      }
    }
  }
  if(berror==false)
  {
    document.frm.allCheck.checked=false;
  }
  else
  {
    document.frm.allCheck.checked=true;
  }
}
</script>
</head>

<body>
<form name="frm">
select all :<input type="checkbox" name="allCheck" onClick="selectallMe()">
<hr><br>
1  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
2  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
3  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
4  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
5  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
6  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
7  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
8  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
9  :<input type="checkbox" name="chkName" onClick="selectall()"><br>
10 :<input type="checkbox" name="chkName" onClick="selectall()"><br>
</form>
</body>
</html>
READ MORE - Selecting all checkboxes using javascript

Get Checkbox Value using javascript


<html>
<head>
<title>JavaScript select checkbox</title>
<script>
function selectCheckBox()
{
  var e= document.frm.elements.length;
  var cnt=0;

  for(cnt=0;cnt<e;cnt++)
  {
    if(document.frm.elements[cnt].name=="id"){
     alert(document.frm.elements[cnt].value)
    }
  }
}
</script>
</head>

<body>
<form name="frm">
<input type="checkbox" name="id" value="1">
<input type="checkbox" name="id" value="2">
<input type="checkbox" name="id" value="3">
<input type="checkbox" name="id" value="4">
<input type="checkbox" name="id" value="5">
<input type="button" name="goto" onClick="selectCheckBox()" value="Check">
</form>
</body>
</html>

The example is showing how to get value from separate name checkbox in JavaScript.

<html>
<head>
<title>JavaScript select checkbox</title>
<script>
function selectCheckBox()
{
     alert(document.frm.id1.value)
     alert(document.frm.id2.value)
     alert(document.frm.id3.value)
}
</script>
</head>

<body>
<form name="frm">
<input type="checkbox" name="id1" value="1">
<input type="checkbox" name="id2" value="2">
<input type="checkbox" name="id3" value="3">

<input type="button" name="goto" onClick="selectCheckBox()" value="Check">
</form>
</body>
</html>
READ MORE - Get Checkbox Value using javascript

More than one form in HTML page


<html>
<head>
<title>Use more than one form in html page</title>
</head>

<body>
<form name="frm1" action="actionPage1.jsp">

<input type="text" name="txtName">
<input type="submit" name="goSubmit" value="Submit">

</form>

<form name="frm2" action="actionPage2.jsp">

<input type="text" name="txtName">
<input type="submit" name="goSubmit" value="Submit">

</form>

<form name="frm3" action="actionPage3.jsp">

<input type="text" name="txtName">
<input type="submit" name="goSubmit" value="Submit">

</form>
</body>
</html>
READ MORE - More than one form in HTML page

Confirm function in Javascript


<html>
<head>
<title>Confirm javascript</title>
<script>
    function validate()
    {
      var confirmMessage="Are you sure to move Yahoo home page!";

      if(confirm(confirmMessage)==false)
      {
          return false;
      }
    }
</script>
</head>

<body>
    <form name="frm" action="http://yahoo.com" onSubmit="return validate()">
       <input type="submit" name="goSubmit" value="Submit" />
    </form>
</body>
</html>
READ MORE - Confirm function in Javascript

Calling href using JavaScript


<html>
<head>
<title>Calling JavaScript Href</title>
<script>
function callHref()
{
  alert("Function is called from Href");
}
</script>
</head>

<body>
<a href="javascript:callHref()">Calling JavaScript Href </a>
</body>
</html>
READ MORE - Calling href using JavaScript

How to Submit a Form Using JavaScript


<html>
<head>
<title>Submit form using javascript</title>
<script>
function goSubmit()
{
  document.frm.submit();
}
</script>
</head>

<body>
<form name="frm">
 <a href="javascript:goSubmit()">Submit form </a>
 <br>
 <input type="button" name="btn" value="Submit" onClick="goSubmit()">
</form>
</body>
</html>
READ MORE - How to Submit a Form Using JavaScript

 
 
 
 


Copyright © 2012 http://codeprecisely.blogspot.com. All rights reserved |Term of Use and Policies|