Abu Faaris Mohd Firdaus: javascript

Showing posts with label javascript. Show all posts

Javascript Papar Textarea Value Newline

Thursday, July 07, 2016

var addrs = $("#alamat").val();
var lines = addrs.split(/\n/);
var texts = []
for (var i=0; i < lines.length; i++) {
  if (/\S/.test(lines[i])) {
    texts.push($.trim(lines[i])+'<br>');
  }
}

alert(JSON.stringify(texts));

$("#dispAlamat").html(texts);

Validate Checkbox

Friday, October 18, 2013

Sama seperti isu sebelum ini. Ini validate di mana user perlu pilih sekurang-kurangnya satu checkbox.

Masalah yang sama timbul. Jika satu sahaja data, array tidak berjalan. Jadi, check dahulu samada array cuma satu data sahaja atau lebih.

 <html>  
  <head>  
   <title>Mi-Scramble</title>  
 <SCRIPT LANGUAGE="JavaScript">  
 <!-- Begin  
 function validatePwd() {  
 if(document.getElementsByName('userassign[]').length == 1)  
 {  
  if(document.myForm.userassign.checked)  
  {  
   return true;  
  } else {  
   alert ("You must select minimum one user! ");  
   return false;  
  }  
 } else {  
  var flag = 0;  
  for (var i = 0; i< document.getElementsByName('userassign[]').length; i++) {  
  if(document.myForm["userassign[]"][i].checked){  
   flag ++;  
   }  
  }  
  if (flag < 1) {  
  alert ("You must select minimum one user!");  
   return false;  
  }  
  return true;  
  }  
 }  
 </script>  
 </head>  
 <body>  
 <form action="assignuserupd.php" method="post" name=myForm onSubmit="return validatePwd()">  
     <table class="responsive table table-striped">  
      <thead>  
      <tr>  
       <th style="">User Name</th>                
       <th>Action</th>  
      </tr>   
      </thead>  
      <tbody>  
 <?php   
 $sqlrtbl="SQL";  
 $resulrtbl=pg_query($sqlrtbl);  
 while($rowr = pg_fetch_assoc($resulrtbl))  
 {  
 ?>           
      <tr>  
       <td><?php echo $rowr['username']; ?></td>     
       <td>  
        <input type="checkbox" name="userassign[]" value="<?php echo $rowr['username']; ?>">  
       </td>  
      </tr>  
 <?php  
 }   
 ?>    
      <tr>  
       <td colspan="2" align="right">  
         <input type="submit" value="Submit" class="btn btn-primary">  
       </td>  
      </tr>   
     </tbody>  
     </table>  
 </form>  
  </body>  
 </html>

Sourcecode for blogspot http://codeformatter.blogspot.com/

Validate Radio Button

Sekiranya cuma ada 1 sahaja radio button, array tak jalan. Tak boleh nak check guna kaedah array. Jadi, pisahkan. Jika jumpa satu, check seperti biasa, jika lebih, baru buat checking guna array.

if(document.getElementsByName('namatbl').length == 1){ }else { }

Dalam isu ni, user mesti pilih satu radio button.

 <html>  
  <head>  
   <title>Mi-Scramble</title>  
 <SCRIPT LANGUAGE="JavaScript">  
 <!-- Begin  
 function validatePwd() {  
 if(document.getElementsByName('namatbl').length == 1)  
 {  
  if(document.myForm.namatbl.checked)  
  {  
   return true;  
  } else {  
   alert ("You must select one table! ");  
   return false;  
  }  
 } else {  
  var flag = 0;                       
  for (var i = 0; i< document.myForm.namatbl.length; i++) {     
  if(document.myForm.namatbl[i].checked){  
   flag++;   
   }  
  }  
  if (flag < 1) {  
   alert ("You must select one table! ");  
   return false;  
  }  
  return true;  
  }  
 }  
 </script>  
 </head>  
 <body>  
 <form action="assignuserselect.php" method="post" name=myForm onSubmit="return validatePwd();">  
     <table class="responsive table table-striped">    
      <tr>  
       <th>Server</th>   
       <th>Database</th>  
       <th>Table</th>  
       <th>Action</th>       
      </tr>  
 <?php   
 $sqlrtbl="SQL";  
 $resulrtbl=pg_query($sqlrtbl);  
 while($rowr = pg_fetch_assoc($resulrtbl))  
 {  
 ?>   
      <tr>  
       <td><?php echo $rowr['server']; ?></td>   
       <td><?php echo $rowr['dbname']; ?></td>  
       <td><?php echo $rowr['dbtbl']; ?></td>  
       <td><input type="radio" name="namatbl" value="<?php echo $rowr['dbtbl']; ?>"></td>                
      </tr>    
 <?php  
 }  
 if(!$namatable)  
 {  
 ?>   
      <tr>  
       <td colspan="4"><font color="red"><center>No scrambled table from you.</center></font></td>              
      </tr>    
 <?php  
 }  
 ?>  
      <tr>  
       <td>&nbsp;</td>   
       <td>&nbsp;</td>  
       <td>&nbsp;</td>  
       <td>  
       <?php if($namatable) { ?>  
        <input class="btn btn-primary" type="submit" value="Submit">  
       <?php } ?>  
       </td>                
      </tr>    
     </table>  
 </form>  
  </body>  
 </html>

Sourcecode for blogspot http://codeformatter.blogspot.com/

Form Validation jQuery Ringkas

Saturday, February 09, 2013

Ini contoh mudah bagaimana hendak membuat semakan sama ada input dimasukkan atau tidak pada form menggunakan jquery. Kita anggap html di bawah sudah berada di dalam framework bootstrap. Jadi <div>, <class> semua tu tak perlu diambil kisah.

<html>
<head>
<title>Test</title>

<script type="text/javascript" src="script/jquery-x.x.x.min.js"></script>
<script type="text/javascript">
function checklogin() {
    var userpass,usernama,output = true;

 usernama = document.logmasuk.myusername;
 userpass = document.logmasuk.mypassword;
 $("#userpassMessage").text("").removeClass("label label-danger");
 $("#userpassMessage").text("").removeClass("label label-danger");

    if(!usernama.value) {
        usernama.focus();
        $("#myusername").innerHTML = "required";
        $("#usernamaMessage").text("Masukkan username!").toggleClass("label label-danger");
        output = false;
    }   
    if(!userpass.value) {
        userpass.focus();
        $("#mypassword").innerHTML = "required";
        $("#userpassMessage").text("Masukkan password!").toggleClass("label label-danger");
        output = false;
    }   
    return output;
}
</script> 
</head>
<body>
<form action="checklogin.php" method="post" name="logmasuk" onSubmit="return checklogin();">

 <div class="input-icon right">
  <i class="fa fa-user"></i>
  <input id="myusername" type="text" placeholder="username" class="form-control" name="myusername" />
  <span id="usernamaMessage"></span>
 </div>    

 <div class="input-icon right">
  <i class="fa fa-lock"></i>
  <input id="mypassword" type="password" placeholder="password" class="form-control" name="mypassword" />
  <span id="userpassMessage"></span>
 </div>

 <div class="col-lg-9">
  <button type="submit" class="btn btn-default" name="Submit">Sign In</button>
 </div>

</form>
</body>
</html>

Panggil file js jquery pada header html. Ikutlah versi jquery mana yang disukai tapi pastikan ianya berjalan. Lagi baik yang terkini.

<script type="text/javascript" src="script/jquery-x.x.x.min.js"></script>

Cipta function untuk buat semakan. Sebagai contoh, function checklogin() {}. Function ini boleh dibuat di dalam <head> mahupun <body>. Apa yang penting, file jquery.js mestilah di dalam head, bukan body. Di dalam function ini, letak code untuk buat semakan.

Declare siap-siap dan dapatkan valuenya dengan memanggil data dari form. Dalam jquery, kita gunakan document, diikuti dengan nama form.

var userpass,usernama,output = true;
usernama = document.logmasuk.myusername;
userpass = document.logmasuk.mypassword;

Dalam jquery, bila kita guna tanda ni #,ia merujuk kepada ID sesuatu element dalam html tersebut. Jika dilihat pada code, kita guna <input id="myusername"... dan dalam js kita panggil semula menggunakan $("#myusername")...

removeClass digunakan pada awal code supaya javascript bersihkan dulu jika ada error sebelum ini yang telah terpapar.

Bagi keterangan lanjut dalam hal ini, rujuk jQuery Selectors

Ini digunakan bagi memasukkan text dan class ke dalam html <span id="usernamaMessage">.

$("#usernamaMessage").text("Masukkan username!").toggleClass("label label-danger");

Di dalam jQuery, biasakan diri menggunakan id berbanding name. Selain untuk elemen form, id juga boleh digunakan untuk elemen-elemen lain dalam html seperti <p>, <span>, <h1> dan lain-lain. Dan jquery boleh bermain dengan semua ini, bukan dengan form sahaja.

Buka Dan Tutup Pop-up Browser

Wednesday, October 20, 2010

Apabila kita perlu membuka page baru tanpa menganggu page sedia ada, biasanya kita akan menggunakan kaedah pop-up. Di bawah adalah contoh mudah bagi situasi sebegini.

Secara ringkasnya, terdapat dua page iaitu main page (index.html) dan child page (test.html). Main page akan berikan akses untuk buka page secara popup, manakala child bersedia untuk ditutup tanpa menganggu page utama.

Pada page index.html, gunakan window.open() dengan nilai atribut _blank supaya ia buka page baru. Nilai height dan width juga ikut saiz screen sedia ada. Jadi, ia akan buka fullscreen. Jika mahu setkan pada saiz tertentu, masukkan sahaja nilai yang kita mahu. Sebagai contoh, height=570,width=520. Ada beberapa lagi spec yang boleh dimasukkan seperti scrollbars, location dan lain-lain.

/* index.html */
<!DOCTYPE html>
<html>
<head>
</head>

<body>
<p>Ini adalah parent page.</p>
<a onclick="window.open('test.html', '_blank', 'height='+screen.height+', width='+screen.width);">Buka Page</a>
</body>
</html>

Pada child page iaitu test.html, sediakan akses untuk menutup page dirinya sendiri iaitu menggunakan code self.close().

/* test.html */
<html>
<head>
</head>

<body>
<p>Ini adalah child page.</p>
<input type="button" value="Close this window" onclick="self.close()"><br>
</body>
</html>

Bagi arahan self.close() ini, ia hanya berfungsi sekiranya ia dipanggil melalui parent page. Jika dibuka secara terus dengan menaip di url, ianya tidak berfungsi.

PHP Array Checkbox

Tuesday, December 23, 2008

actb.js Multiple Suggestion

Friday, March 07, 2008

Penambahan dari http://ayus80.blogspot.com/2007/05/suggestion-pada-input-text.html

Di atas merujuk kepada tiga jenis suggestion box.
Untuk setiap suggestion baru, perlu buat new

suggestion pada input text

Wednesday, May 09, 2007

Pada input text, akan disenaraikan cadangan perkataan utk dimasukkan. Macam nak masukkan alamat e-mail, baru taip "a", dia senaraikan email2 yang ada huruf a sbg cadangan

<?php
$sql="SELECT * FROM ipms_user a, ipms_ref_area b WHERE a.user_type = 'm' AND a.seating_group = 'R' AND a.area_id = b.area_id";
$res = mysql_query($sql) or die(mysql_error());
?>

<form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF'].'?module=aum&op=senaraiSoalanMP&ptrid='.$ptrid.''?>">
<br><br><br>
<strong>Pilih MP :</strong>
<script language="javascript" type="text/javascript" src="actb.js"></script>
<script language="javascript" type="text/javascript" src="common.js"></script>
<?
$i=0;
$senarainama="";

while ($row = mysql_fetch_array ($res))
{
$ar_dato[$i] = $row['full_name']." [".$row['area_name']."]";
$i++;
}

for($i=0; $i<count($ar_dato);$i++) {
$senarainama .= "'".str_replace("'", "\'", $ar_dato[$i])."',";
}
?>
<script>
var customarray=new Array(<? echo $senarainama ?>'');
</script>
<input type='text' style='font-family:verdana;width:300px;font-size:12px' id='tb' name='mp' value=''/>
<script>
var obj = actb(document.getElementById('tb'),customarray);
//setTimeout(function(){obj.actb_keywords = custom2;},10000);
</script>
<p>
<input type="reset" name="Reset" value="Batal">
<input type=hidden name="ade" value=1>
<input type="submit" name="Submit" value=" Pilih MP " onClick="return validate(form1)">
</p>
</form>

ayus dan syuhada
www.nursyuhada.com

Abu Faaris Mohd Firdaus