Membuat PasswordMatch Disabled submit

Langsung saja, Bagai mana membuat password match dan disabled submit sebelum data terisi maupun data match. berikut codenya.

Form lengkap

1


<!doctype html>
<html>
    <head>
         <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>"/>
        <style>
            body{
                padding: 15px;
            }
        </style>
    </head>
    <body>
        <h2 style="margin-top:0px">Master User <?php echo $button ?></h2>
       <!-- <form action="<?php echo $action; ?>" method="post">-->
        <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data">
     <div class="form-group">
            <label for="varchar">Name <?php echo form_error('nama_lengkap') ?></label>
            <input type="text" class="form-control" name="nama_lengkap" id="nama_lengkap" placeholder="Nama Lengkap" value="<?php echo $nama_lengkap; ?>" />
        </div>
      <input type="hidden" name="username" value="<?php echo $username; ?>" />  
      <input type="hidden" name="level" value="<?php echo $level; ?>" />  

    <div class="form-group">
            <label for="varchar">Photo ( Max 2MB )<?php echo form_error('photo') ?></label>
      <br>
            <a class="fancybox" href="<?=base_url()?>uploads/<?php echo $photo; ?>"><img src="<?php echo base_url('uploads')?>/<?php echo $photo;  ?>" alt=""  width='100px' height='auto'/></a>
   
            <input type="file" class="form-control" name="userfile" id="userfile" placeholder="Photo" value="<?php echo $photo; ?>" />
        </div>
     <div class="form-group">
            <label for="varchar">Email <?php echo form_error('email') ?></label>
            <input type="text" class="form-control" name="email" id="email" placeholder="Email" value="<?php echo $email; ?>" />
        </div>
   
  <div class="form-group">
            <label for="varchar">New Password <?php echo form_error('password') ?></label>
            <input type="password" class="form-control" name="password" id="txtNewPassword" placeholder="Password" value="" />
        </div>
     <div class="form-group">
            <label for="varchar">Retype New Password <?php echo form_error('confirm_password') ?></label>
            <input type="password" class="form-control" name="confirm_password" id="txtConfirmPassword" placeholder="Confirm Password" value="" />
             <div class="registrationFormAlert" id="divCheckPasswordMatch" ></div>
        </div>
  
  
     <!--<input type="hidden" name="username" value="<?php echo $username; ?>" /> -->
     <button type="submit" class="btn btn-primary" id="btn_submit"><?php echo $button ?></button> 
     <a href="<?php echo site_url('master_user') ?>" class="btn btn-default">Cancel</a>
 </form>
    </body>
 
  <script>
  function checkPasswordMatch() {
   var password = $("#txtNewPassword").val();
   var confirmPassword = $("#txtConfirmPassword").val();
  
   if (password != confirmPassword){
    
    $("#divCheckPasswordMatch").html("<span class='pwd'>Passwords tidak sama!</span>");document.getElementById('btn_submit').disabled =true;
    
   }else{
    
    $("#divCheckPasswordMatch").html("");document.getElementById('btn_submit').disabled =false;
   
    
    var isi = document.getElementById('username').value;
     if(isi!=''){
    
     if(isi!='<?php echo $username; ?>'){
      $.post( "<? echo base_url()?>master_user/cek/"+isi, function( data ) {
        //alert( "Data Loaded: " + data );
       if(data=='ada'){
        alert( "The User Name: '" + isi +"' is already in use.");
        document.getElementById('btn_submit').disabled =true;
       }else{
        document.getElementById('btn_submit').disabled =false;      
       }
      });
      }else{document.getElementById('btn_submit').disabled =false;}
     }else{
     alert( "User Namae ready in use");
     document.getElementById('btn_submit').disabled =true;
     } 
   }
  }
  
  $(document).ready(function () {
   document.getElementById('btn_submit').disabled =true;
     $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
     
  });
    
  </script>
  
  
</html>

Code <style> checkPasswordMatch

1

<script>
  function checkPasswordMatch() {
   var password = $("#txtNewPassword").val();
   var confirmPassword = $("#txtConfirmPassword").val();
  
   if (password != confirmPassword){
    
    $("#divCheckPasswordMatch").html("<span class='pwd'>Passwords tidak sama!</span>");document.getElementById('btn_submit').disabled =true;
    
   }else{
    
    $("#divCheckPasswordMatch").html("");document.getElementById('btn_submit').disabled =false;
   }
  }
  
  $(document).ready(function () {
   document.getElementById('btn_submit').disabled =true;
   //document.getElementById('txtNewPassword').disabled =true;
   //document.getElementById('txtConfirmPassword').disabled =true;
     $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch);
     
  });
    
  </script>
<div id="screen"></div>

Cek data button, tambahkan id terlampir.

1

<button type="submit" class="btn btn-primary" id="btn_submit" ><?php echo $button ?></button> 

Code Generator Website

Wednesday, February 28, 2018

Membuat PasswordMatch Disabled submit

No comments:

Post a Comment