RSS
 

Posts Tagged ‘Javascript’

Validation Form use Javascript

02 Dec

This time i wanna make a documentation bout form authentication. It uses javascript called CSFValidator. You can download it here 

Oks now for the implementation in form, check this souce out :

<script language=”javascript” type=”text/javascript” src=”./include/CSFValidator.js”></script>
<form id=”aa” action=”" method=”post” name=”form_aa” target=”_self”>
 <table  width=”80%” align=”center” border=”0″ cellpadding=”0″ cellspacing=”0″>
<td align=”center” colspan=”2″><strong>Sample Pages</strong></th> </tr>
<tr>
     <td width=”47%”>Nama </td>
    <td width=”43%”><input style=”width:100%” type=”text” name=”nama” id=”nama” csfvRequired=true></td>
   </tr>     
   <tr>
     <td>Password *</td>
     <td><label>
       <input style=”width:100%” name=”pass” id=”pass” type=”password” csfvPassword=true />
       </label></td>
   </tr>
   <tr>
     <td>Re-enter Password *</td>
     <td><input style=”width:100%” name=”re_pass” id=”re_pass” type=”password” />
     <label id=”cekpass”><?=$pass;?></label>       
     </td>
</tr>
   <tr>
     <td>Email *</td>
     <td><input style=”width:100%” name=”email” type=”text” id=”email” csfvEmail=true/></td>
   </tr>         
   <tr> 
     <td colspan=”2″ style=”text-align:center”><input type=”submit” name=”Submit” value=”Register”></td>
    </tr>      
 </table>
</form>

I found a little error when otenticate password and re-password in this CSFValidator. So, I just adding a javascript function in the earlier section of code and called it use event on change on your correlate id’s element

function SubmitForm2(){
if (document.getElementById(‘pass’).value != document.getElementById(‘re_pass’).value)
{
alert(“Password yang anda ketikkan berbeda dengan sebelumnya!”);
document.getElementById(‘pass’).value=”";
document.getElementById(‘re_pass’).value=”";
}
}

 
No Comments

Posted in Web Stuff

 

Add Form Components Use javascript

17 Sep

Last day, I fad to open my last archive bout programming use javascript in ma disc. I found an interesting stuff there.. Yeah for ’bout 5 months ago i search a method to add a form component that i’ll used in ma friend project .

Just try to look it at a glance .. it seems daunting i thougt. But when we see it accuratelly, we can get the algorthm of its code that not complicated as we expect. See jvscript below :

<script type="text/javascript">
  function addElemen(list,jumlah,nama)
  {
    var currNumArea=document.getElementById(jumlah);
    var divToAddArea=document.getElementById(list);
    num= currNumArea.value;
    num++;
    currNumArea.value=num;
    var newDiv=document.createElement('div');
    var tmpNama=nama+num;
    newDiv.setAttribute('id',tmpNama);
    var ePengalaman="<table width=\"100%\"><tr><th id=\"blue\">Object #"+(num)
                    +"</th></tr><tr><td><input type=\"text\" name=\""+tmpNama+
                    "\" size=50 style=\"width:80%\">";
    newDiv.innerHTML=ePengalaman+" <a href=\"javascript:;\" onClick=\"
                     deleteElemen(\'"+list+"\',\'"+tmpNama+"\')\" id=\"delete\">
                     <strong><font color='Maroon'>Delete</font></strong></a></td>
                     </tr><tr><td> </td></tr></table>";
    divToAddArea.appendChild(newDiv);					
  }

function deleteElemen(list,idElemen)
  {
   var divListArea=document.getElementById(list);
   var oldDiv=document.getElementById(idElemen);
   divListArea.removeChild(oldDiv);			
  }
</script>

And here they are the HTML code to call the function :

<html>
<head><title>Add Object</title></head>
<body>
 <a onclick="addElemen('list_object','jumlah_object','object_')" 
 href="javascript:;" id="add"><font color="Maroon"><strong>Tambah Object
 </strong></font></a>	
 
 <div id="list_object">
    <input type="hidden" name="jumlah_object" value="<?=$num;?>">
 </div>
</body>
</html>

hmm but i still rather confuse, the numeric iteration can’t decreased when we delete a component. is there anyone can figure it out for me :D

 
2 Comments

Posted in Computer Stuff, Software, Web Stuff

 
 

Switch to our mobile site