Monday, 15 June 2015

DOM

<!DOCTYPE html>
<html>
<head>
<style>
p {
width:100px;
}

   .err {
color:red;
font-style:italic;
font-size:10px;
   }
 </style>
 <script>
   function cek(){
status_oke = true;
// cek NIM tidak boleh kosong
if (surat.nama.value.trim() == ""){
 document.getElementById("err_nama").innerHTML="Nama Harus Diisi";
 status_oke = false;
} else {
 document.getElementById("err_nama").innerHTML="";
}  
// cek nama tidak boleh kosong
if (surat.email.value.trim() == ""){
 document.getElementById("err_email").innerHTML="Email Harus Diisi";
 status_oke = false;
} else {
 document.getElementById("err_email").innerHTML="";
}
// cek komentar tidak boleh kosong
if (surat.komen.value.trim() == ""){
 document.getElementById("err_komen").innerHTML="komentar Harus Diisi";
 status_oke = false;
} else {
 document.getElementById("err_komen").innerHTML="";
}
     return status_oke;
   }

function validateForm()
{
var x=document.forms["surat"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
 {
 alert("Not a valid e-mail address");
 return false;
 }
}
function tutup_form_komen(){
document.getElementById("komen").innerHTML="";
  }
  function form_komen(){
    cForm  = "<form action='#' method='post' onsubmit='return cek(), validateForm();' name='surat'>";
    cForm += "email : <input type='text' name='email' /><span class = 'err' id='err_email' ></span><br/>";
cForm += "Nama : <input type='text' name='nama' /><span class = 'err' id='err_nama' ></span><br/>";
    cForm += "Komentar : <br/>";
    cForm += "<textarea name='komen'></textarea><span class = 'err' id='err_komen' ></span><br/>";
    cForm += "<br/><input type='submit' value='Publish' />";
    cForm += "</form>";
    document.getElementById("komen").innerHTML=cForm;
  }
</script>
</head>
<body>
  <input type="button" value="Komen" onClick="form_komen()">
  <input type="button" value="Tutup Komen" onClick="tutup_form_komen()">
  <div id="komen"></div>

</body>
</html>

No comments:

Post a Comment