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..
<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
<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>
No comments:
Post a Comment