Monday, 11 July 2016

Passing more than one control to single java script function

The Javascript function has built in object called arguments like this pointer in C++. When a function of Java script is called all the arguments, copy to built in arguments array. You use this array as normal as another array following code is a demo of my word..


<!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>Multiple Argument to Java Script Function : Girfa</title>
<script language="javascript">
function read_data()
{

var i;

for(i=0;i<arguments.length;i++)
{
var ob=document.getElementById(arguments[i]);
s1.innerHTML=s1.innerHTML +  ob.value +  '<br>';
}
}
</script>
</head>


<body>
Name : <input type="text" id="name" /><br /><br />
City :  
<input type="text" id="city" /><br /><br />
Sex : <input type="radio" id="sex" name="sex" value="Male" checked="checked" />Male
    &nbsp;&nbsp;&nbsp;
<input type="radio" id="sex"  name="sex" value="Female" />Female<br /><br />
Color : <select id="color">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
        </select>
<br /><br />
<input type="button" value="Pass Data to Javascript Function" onclick="read_data('name','city','sex','color')" />
<h3><span id="s1"></span></h3>
</body>

</html>

Validation with error message


Javascript Function

function validate_empty()
{
 var i;
 var flag=true;
 

  for(i=0;i<arguments.length;i+=2)
  {
  var ob=document.getElementById(arguments[i]);
  if(ob.value=="")
  {
  alert(arguments[i+1] + " is Empty kinly provide sufficient value");
  ob.style.border='solid 2px red';
  ob.focus();
  flag=false;
  break;
  }
  else
  {
   ob.style.border='';
  }
  }
  
  return flag;
}

<form >
<table cellpadding="10px">
<tr>
<td align="right" valign="top">Certificate No. : </td>
<td>
<input type="text" name="c_id" id="certificate"/>
<br /><br />
</td>
</tr>
<tr>
<td align="right" valign="top">Student Name :</td>
<td>
<input type="text" name="s_name" id="sname" />
<br /><br />
</td>
</tr>
<tr>
<td align="right" valign="top">Father Name  : </td>
<td><input type="text" name="f_name" id="fname"/><br /><br /></td>
</tr>
<tr>
<td align="right" valign="top">Date of Birth :  </td>
<td><input type="date" name="dob" id="dob"/><br /><br /></td>
</tr>
<tr>
<td align="right" valign="top">Course Name  : </td>
<td><input type="text" name="course" id="course"/><br /><br /></td>
</tr>
<tr>
<td align="right" valign="top">Session  : </td>
<td><input type="text" name="session" id="session"/><br /><br /></td>
</tr>
<tr>
<td align="right" valign="top">Issued Date  : </td>
<td><input type="date" name="issuedate" id="issuedate"/><br /><br /></td>
</tr>
<tr>
<td align="right" valign="top">
Certificate Image : 
</td>
<td><input type="file" name="file" />
<small style="color:#FF0000"><i>Valid Image Resolution (450X670) Pixel</i></small></td>
</tr>
<tr>
<td colspan="2" align="center" ><br /><input type="submit" value="submit" name="submit" onclick="return validate_empty('certificate','Certificate No.','sname','Student Name','fname','Father Name','dob','Date of Birth','course','Course','session','Session','issuedate','Issuedate','file','Certificate Image')" /></td>
</tr>
</table>
</form>

Next Topic