Javascript validate size file and file extension upload

contoh ini pada framework codeignite, tapi jangan diheroin codeigniternya.. disini kite liat sisi javascript nya aja..

<link href="<?php echo base_url('.../bootstrap/css/bootstrap.min.css')?>" rel="stylesheet">
<link href="<?php echo base_url('.../bootstrap/alert/sweetalert.css')?>" rel="stylesheet">
<script src="<?php echo base_url('.../plugins/jQuery/jquery-2.2.3.min.js')?>"></script>
<script src="<?php echo base_url('.../bootstrap/alert/sweetalert.min.js')?>"></script>
<script src="<?php echo base_url('.../bootstrap/alert/es6-promise.auto.min.js')?>"></script>

<script>
    function su_form() {
    var a = document.forms["mysu_form"]["photo"].value;
        if (a=="") {
            swal("Gagal Simpan", "Pilih File Photo", "warning")
            return false;
        }
    }

    $(document).ready(function() {
        $ ('#photo').bind('change', function() {
            var fileSize = this.files[0].size;
            if (fileSize > 2100000) {
                swal('Size file max 2Mb.','','error');
                $('#photo').val('');
            }
        });
    });

    $(document).ready(function() {
        $ ('#photo').bind('change', function() {
            var filePart = this.files[0].name.split('.').pop().toLowerCase();
            if (filePart!='png' && filePart!='jpg' && filePart!='jpeg' && filePart!='gif' && filePart!='bmp') {
                swal('extensi only jpg png gif bmp','','error');
                $('#photo').val('');
            }
        });
    });
</script>

<?php
echo form_open_multipart('','id="form" class="form-horizontal" name="mysu_form" onsubmit="return su_form()"');
?>
      <div class="form-body">
        <div class="form-group"><label class="col-sm-2 control-label">Pilih File</label>
          <div class="col-sm-10"><input id="photo" type="file" name="photo" class="form-control" accept=".png,.jpg,.jpeg,.gif,.bmp"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" id="btnSave" onClick="save()" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
      </div>
<?php
echo form_close();
?>

Javascript Format Number Dalam form input HTML

<input type="text" class="form-control" name="berat"

onkeypress="return forceNumber(event);" maxlength="11" required>

 

<script>

function forceNumber(e)

{

var keyCode = e.keyCode ? e.keyCode : e.which;

if((keyCode<48||keyCode>58) && keyCode!=8 && keyCode!=9)

{

return false;

}

return true;

}

</script>

Karakter	heksadesimal	Nilai ANSI ASCII	Keterangan
NUL	0000	0	Null (tidak tampak)
SOH	0001	1	Start of heading (tidak tampak)
STX	0002	2	Start of text (tidak tampak)
ETX	0003	3	End of text (tidak tampak)
EOT	0004	4	End of transmission (tidak tampak)
ENQ	0005	5	Enquiry (tidak tampak)
ACK	0006	6	Acknowledge (tidak tampak)
BEL	0007	7	Bell (tidak tampak)
BS	0008	8	Menghapus satu karakter di belakang kursor (Backspace)
HT	0009	9	Horizontal tabulation
LF	000A	10	Pergantian baris (Line feed)
VT	000B	11	Tabulasi vertikal
FF	000C	12	Pergantian baris (Form feed)
CR	000D	13	Pergantian baris (carriage return)
SO	000E	14	Shift out (tidak tampak)
SI	000F	15	Shift in (tidak tampak)
DLE	0010	16	Data link escape (tidak tampak)
DC1	0011	17	Device control 1 (tidak tampak)
DC2	0012	18	Device control 2 (tidak tampak)
DC3	0013	19	Device control 3 (tidak tampak)
DC4	0014	20	Device control 4 (tidak tampak)
NAK	0015	21	Negative acknowledge (tidak tampak)
SYN	0016	22	Synchronous idle (tidak tampak)
ETB	0017	23	End of transmission block (tidak tampak)
CAN	0018	24	Cancel (tidak tampak)
EM	0019	25	End of medium (tidak tampak)
SUB	001A	26	Substitute (tidak tampak)
ESC	001B	27	Escape (tidak tampak)
FS	001C	28	File separator
GS	001D	29	Group separator
RS	001E	30	Record separator
US	001F	31	Unit separator
SP	0020	32	Spasi
!	0021	33	Tanda seru (exclamation)
"	0022	34	Tanda kutip dua
#	0023	35	Tanda pagar (kres)
$	0024	36	Tanda mata uang dolar
%	0025	37	Tanda persen
&	0026	38	Karakter ampersand (&)
‘	0027	39	Karakter Apostrof
(	0028	40	Tanda kurung buka
)	0029	41	Tanda kurung tutup
*	002A	42	Karakter asterisk (bintang)
+	002B	43	Tanda tambah (plus)
,	002C	44	Karakter koma
-	002D	45	Karakter hyphen (strip)
.	002E	46	Tanda titik
/	002F	47	Garis miring (slash)
0	0030	48	Angka nol
1	0031	49	Angka satu
2	0032	50	Angka dua
3	0033	51	Angka tiga
4	0034	52	Angka empat
5	0035	53	Angka lima
6	0036	54	Angka enam
7	0037	55	Angka tujuh
8	0038	56	Angka delapan
9	0039	57	Angka sembilan
:	003A	58	Tanda titik dua
;	003B	59	Tanda titik koma
<	003C	60	Tanda lebih kecil
=	003D	61	Tanda sama dengan
>	003E	62	Tanda lebih besar
?	003F	63	Tanda tanya
@	0040	64	A keong (@)
A	0041	65	Huruf latin A kapital
B	0042	66	Huruf latin B kapital
C	0043	67	Huruf latin C kapital
D	0044	68	Huruf latin D kapital
E	0045	69	Huruf latin E kapital
F	0046	70	Huruf latin F kapital
G	0047	71	Huruf latin G kapital
H	0048	72	Huruf latin H kapital
I	0049	73	Huruf latin I kapital
J	004A	74	Huruf latin J kapital
K	004B	75	Huruf latin K kapital
L	004C	76	Huruf latin L kapital
M	004D	77	Huruf latin M kapital
N	004E	78	Huruf latin N kapital
O	004F	79	Huruf latin O kapital
P	0050	80	Huruf latin P kapital
Q	0051	81	Huruf latin Q kapital
R	0052	82	Huruf latin R kapital
S	0053	83	Huruf latin S kapital
T	0054	84	Huruf latin T kapital
U	0055	85	Huruf latin U kapital
V	0056	86	Huruf latin V kapital
W	0057	87	Huruf latin W kapital
X	0058	88	Huruf latin X kapital
Y	0059	89	Huruf latin Y kapital
Z	005A	90	Huruf latin Z kapital
[	005B	91	Kurung siku kiri
\	005C	92	Garis miring terbalik (backslash)
]	005D	93	Kurung sikur kanan
^	005E	94	Tanda pangkat
_	005F	95	Garis bawah (underscore)
`	0060	96	Tanda petik satu
a	0061	97	Huruf latin a kecil
b	0062	98	Huruf latin b kecil
c	0063	99	Huruf latin c kecil
d	0064	100	Huruf latin d kecil
e	0065	101	Huruf latin e kecil
f	0066	102	Huruf latin f kecil
g	0067	103	Huruf latin g kecil
h	0068	104	Huruf latin h kecil
i	0069	105	Huruf latin i kecil
j	006A	106	Huruf latin j kecil
k	006B	107	Huruf latin k kecil
l	006C	108	Huruf latin l kecil
m	006D	109	Huruf latin m kecil
n	006E	110	Huruf latin n kecil
o	006F	111	Huruf latin o kecil
p	0070	112	Huruf latin p kecil
q	0071	113	Huruf latin q kecil
r	0072	114	Huruf latin r kecil
s	0073	115	Huruf latin s kecil
t	0074	116	Huruf latin t kecil
u	0075	117	Huruf latin u kecil
v	0076	118	Huruf latin v kecil
w	0077	119	Huruf latin w kecil
x	0078	120	Huruf latin x kecil
y	0079	121	Huruf latin y kecil
z	007A	122	Huruf latin z kecil
{	007B	123	Kurung kurawal buka
¦	007C	124	Garis vertikal (pipa)
}	007D	125	Kurung kurawal tutup
~	007E	126	Karakter gelombang (tilde)
DEL	007F	127	Delete
	0080	128	Dicadangkan
	0081	129	Dicadangkan
	0082	130	Dicadangkan
	0083	131	Dicadangkan
IND	0084	132	Index
NEL	0085	133	Next line
SSA	0086	134	Start of selected area
ESA	0087	135	End of selected area
	0088	136	Character tabulation set
	0089	137	Character tabulation with justification
	008A	138	Line tabulation set
PLD	008B	139	Partial line down
PLU	008C	140	Partial line up
	008D	141	Reverse line feed
SS2	008E	142	Single shift two
SS3	008F	143	Single shift three
DCS	0090	144	Device control string
PU1	0091	145	Private use one
PU2	0092	146	Private use two
STS	0093	147	Set transmit state
CCH	0094	148	Cancel character
MW	0095	149	Message waiting
	0096	150	Start of guarded area
	0097	151	End of guarded area
	0098	152	Start of string
	0099	153	Dicadangkan
	009A	154	Single character introducer
CSI	009B	155	Control sequence introducer
ST	009C	156	String terminator
OSC	009D	157	Operating system command
PM	009E	158	Privacy message
APC	009F	158	Application program command
	00A0	160	Spasi yang bukan pemisah kata
¡	00A1	161	Tanda seru terbalik
¢	00A2	162	Tanda sen (Cent)
£	00A3	163	Tanda Poundsterling
¤	00A4	164	Tanda mata uang (Currency)
¥	00A5	165	Tanda Yen
¦	00A6	166	Garis tegak putus-putus (broken bar)
§	00A7	167	Section sign
¨	00A8	168	Diaeresis
©	00A9	169	Tanda hak cipta (Copyright)
ª	00AA	170	Feminine ordinal indicator
«	00AB	171	Left-pointing double angle quotation mark
¬	00AC	172	Not sign
­	00AD	173	Tanda strip (hyphen)
®	00AE	174	Tanda merk terdaftar
¯	00AF	175	Macron
°	00B0	176	Tanda derajat
±	00B1	177	Tanda kurang lebih (plus-minus)
²	00B2	178	Tanda kuadrat (pangkat dua)
³	00B3	179	Tanda kubik (pangkat tiga)
´	00B4	180	Acute accent
µ	00B5	181	Micro sign
¶	00B6	182	Pilcrow sign
·	00B7	183	Middle dot

Perhitungan Angka Tanpa klik Submit

<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      $("#diskon").keyup(function(){
        var harga  = Number($("#harga").val().replace(/\./g,""));
        var diskon = Number($("#diskon").val().replace(/\./g,""));
        var total  = Number(((diskon-harga)/harga)*100).toFixed(2);
        $("#totBayar").val(total +' %');
      });
  });
</script>

<table border="0" cellpadding="5" align="center" bgcolor="#00ff00">
  <form action="" method="post">
     <tr>
        <td>Harga awal:</td>
        <td><input type="text" id="harga" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);"></td>
     </tr>
     <tr>
        <td>Harga perubahan :</td>
        <td><input type="text" id="diskon" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);"></td>
     </tr>
     <tr>
        <td>Persentase perubahan Harga :</td>
        <td><input type="text" id="totBayar" disabled /></td>
     </tr>  </form>
</table>
<script>
 function tandaPemisahTitik(b){
 var _minus = false;
 if (b<0) _minus = true;
 b = b.toString();
 b=b.replace(".","");
 b=b.replace("-","");
 c = "";
 panjang = b.length;
 j = 0;
 for (i = panjang; i > 0; i--){
 j = j + 1;
 if (((j % 3) == 1) && (j != 1)){
 c = b.substr(i-1,1) + "." + c;
 } else {
 c = b.substr(i-1,1) + c;
 }
 }
 if (_minus) c = "-" + c ;
 return c;
 }
 function numbersonly(ini, e){
 if (e.keyCode>=48){
 if(e.keyCode<=57){
 a = ini.value.toString().replace(".","");
 b = a.replace(/[^\d]/g,"");
 b = (b=="0")?String.fromCharCode(e.keyCode):b + String.fromCharCode(e.keyCode);
 ini.value = tandaPemisahTitik(b);
 return false;
 }
 else if(e.keyCode<=105){
 if(e.keyCode>=96){
 //e.keycode = e.keycode - 47;
 a = ini.value.toString().replace(".","");
 b = a.replace(/[^\d]/g,"");
 b = (b=="0")?String.fromCharCode(e.keyCode-48):b + String.fromCharCode(e.keyCode-48);
 ini.value = tandaPemisahTitik(b);
 //alert(e.keycode);
 return false;
 }
 else {return false;}
 }
 else {
 return false; }
 }else if (e.keyCode==48){
 a = ini.value.replace(".","") + String.fromCharCode(e.keyCode);
 b = a.replace(/[^\d]/g,"");
 if (parseFloat(b)!=0){
 ini.value = tandaPemisahTitik(b);
 return false;
 } else {
 return false;
 }
 }else if (e.keyCode==95){
 a = ini.value.replace(".","") + String.fromCharCode(e.keyCode-48);
 b = a.replace(/[^\d]/g,"");
 if (parseFloat(b)!=0){
 ini.value = tandaPemisahTitik(b);
 return false;
 } else {
 return false;
 }
 }else if (e.keyCode==8 || e.keycode==46){
 a = ini.value.replace(".","");
 b = a.replace(/[^\d]/g,"");
 b = b.substr(0,b.length -1);
 if (tandaPemisahTitik(b)!=""){
 ini.value = tandaPemisahTitik(b);
 } else {
 ini.value = "";
 }
 return false;
 } else if (e.keyCode==9){
 return true;
 } else if (e.keyCode==17){
 return true;
 } else {
 //alert (e.keyCode);
 return false;
 }
 }
</script>

Mencegah, Disable Klik kanan & Menyembunyikan View Source

<!-- Kode menampilkan peringatan untuk mengaktifkan javascript -->
<div align="center"><noscript>
   <div style="position:fixed; top:0px; left:0px; z-index:3000; height:100%; width:100%; background-color:#FFFFFF">
   <div style="font-family: Arial; font-size: 17px; background-color:#00bbf9; padding: 11pt;">Mohon aktifkan javascript pada browser untuk mengakses halaman ini!</div></div>
</noscript></div>

<!--Kode untuk mencegah seleksi teks, block teks dll. -->
<script type="text/javascript">
function disableSelection(e){if(typeof e.onselectstart!="undefined")e.onselectstart=function(){return false};else if(typeof e.style.MozUserSelect!="undefined")e.style.MozUserSelect="none";else e.onmousedown=function(){return false};e.style.cursor="default"}window.onload=function(){disableSelection(document.body)}
</script>

<!--Kode untuk mematikan fungsi klik kanan di blog -->
<script type="text/javascript">
function mousedwn(e){try{if(event.button==2||event.button==3)return false}catch(e){if(e.which==3)return false}}document.oncontextmenu=function(){return false};document.ondragstart=function(){return false};document.onmousedown=mousedwn
</script>
 
<!--Kode untuk mencegah shorcut keyboard, view source dll. -->
<script type="text/javascript">
window.addEventListener("keydown",function(e){if(e.ctrlKey&&(e.which==65||e.which==66||e.which==67||e.which==73||e.which==80||e.which==83||e.which==85||e.which==86)){e.preventDefault()}});document.keypress=function(e){if(e.ctrlKey&&(e.which==65||e.which==66||e.which==67||e.which==73||e.which==80||e.which==83||e.which==85||e.which==86)){}return false}
</script>
<script type="text/javascript">
document.onkeydown=function(e){e=e||window.event;if(e.keyCode==123||e.keyCode==18){return false}}
</script>

Konfirmasi hapus data php javascript

Pastinya kita sudah memiliki database dan table untuk menghapus row yang terdapat dalam table.

buat file php, dan copy paste script berikut

<a href="url/id_yg_dihapus" onClick="return konfirmasi('');"> Hapus </a>

<script type="text/javascript">
function konfirmasi(lokasi)
{
 if(confirm("Anda yakin akan menghapus data ini ?")){ 
  return true;
  location.href = lokasi;
 }else{
  return false;
 }
}
</script>

Silakan running script di atas....

Tombol radio dari form input teks menggunakan java script

Hai,

saya memiliki tombol radio dan kolom teks

jika tombol radio dipilih bidang teks dinonaktifkan

dan jika tombol radio dari kolom teks yang dipilih bidang teks diaktifkan

<?php

$image=$_POST['image'];

$Objection=$_POST['Objection'];

if(isset($image))

{ echo"$image <br> $Objection";}

?>

<script type="text/javascript">

var textbox = function(me,field){

  if(me.checked == false){

    var textb = document.createElement('input');

    textb.type = "text";

    textb.name = field;

    me.parentNode.appendChild(textb);

  }

  setInterval(function(){

    if(me.checked == false){

       me.parentNode.removeChild(textb);

       return false;

    }

  }, 50);

};

</script>

<body>

<form action="noldepan.php" method="post">

<table width="100%">

<tr bgcolor="#e8e8e8">

<TD WIDTH="36%">

Pilih</TD>

<TD WIDTH="64%" valign="top">

<input name="Objection" type="radio" value="3">3 in evidence.<br />

<input name="Objection" type="radio" value="2">2 in evidence.<br />

<input name="Objection" type="radio" value="1">1 in evidence.<br />

<input name="Objection" type="radio" value="0">0 in evidence.<br />

<input name="Objection" type="radio" onmouseup="textbox(this,'Objection')"/>Other:<noscript>

<input name="Objection" type="text" width="250" required/></noscript>

</TD>

</tr>

<tr>

<td>       <input type="submit" value="Submit" name="image"></td>

</tr>

</table>

</form>