Kategori: Javascript

Membatasi jumlah kata dengan jquery

$("input[name='limited_input']").keyup(function(e) {
var text = $(this).val();
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {//ijinkan karakter aplhanumerik saja
var length_txt = text.length-1;
$(this).val(text.substring(0,length_txt));
}
if (e.keyCode == 32) { //kode tombol utk 'spasi'
//batasi hanya 2 kata saja, setelahnya hilangkan
if((1*$(this).val().split(' ').length) > 3){
text = text.split(' ',3);
$(this).val(text.join(' '));
}
}
});

Memindahkan Context console Firebug pada iframe HTML

Kita dapat melakukan ujicoba javascript secara langsung di halaman html, yaitu dengan menggunakan console firebug. Kami pernah mengalami kesulitan dalam melakukan ujicoba javascript, yang mana javascript tersebut diload di salah satu halaman iframe html. Dan ini sebagai catatan kami ketika lupa, jalankan skrip ini di console firebug. Skrip ini bertujuan untuk memindahkan context console firebug ke iframe HTML tertentu:


javascript:with(_FirebugCommandLine){

cd($$("#mainFrame")[0].contentWindow)

};

dimana #mainFrame adalah iframe yang akan diuji. Setelah itu lakukan pengujian skrip di iframe tersebut. Semoga bermanfaat.

.reset() form jQuery

Lakukan:


$('#idForm')[0].reset();

nilai pada input didalam form dengan id=’idForm’ di reset.

Source code nya:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#b_refresh').click(function(){
$('#idForm')[0].reset();
});
});
</script>
</head>
<body>
<form id='idForm'>
Nama: <input type='text' name='nama' value=''><br>
Alamat: <input type='text' name='nama' value=''><br>
No. Telpon: <input type='text' name='nama' value=''><br>
Gaji: <input type='text' name='nama' value=''><br>
<input type='submit' value='Go'>&nbsp;<input type='button' id='b_refresh' value='Reset'>
</form>
</body>
</html>

Demo disini.

Corat-coret 06 – jquery.live()

Dengan menggunakan jquery.live():

$(".tombol_dgn").live("click", function(){
$('#dgn_live').after("<button class='tombol_dgn'>Tombol dengan live</button>");
});

Dengan menggunakan jquery.click():

$(".tombol_bkn").click(function(){
$('#bkn_live').after("<button class='tombol_bkn'>Tombol tanpa live</button>");
});

Skrip lengkap untuk demo:

<html>
<head>
<title>Live Jquery</title>
<script src='jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".tombol_dgn").live("click", function(){
$('#dgn_live').after("<button class='tombol_dgn'>Tombol dengan live</button>");
});

$(".tombol_bkn").click(function(){
$('#bkn_live').after("<button class='tombol_bkn'>Tombol tanpa live</button>");
});
});
</script>
</head>
<body>
<div id='dgn_live'>
<button class='tombol_dgn'>Tombol dengan live</button>
</div>
<div id='bkn_live'>
<button class='tombol_bkn'>Tombol tanpa live</button>
</div>
</body>
</html>

Lihat Demo

corat-coret05


$("#vtype").change(function(){
var select_supplier = "";
var $dialog;

$.post("supplier_ppob.php",{vtype: $(this).val()},function(data){
if(data.error){
select_supplier = "Error:"+data.error;
alert(select_supplier);
}else{
var i;
select_supplier = "Pilih Supplier: <select id='select_supplier' name='select_supplier'>";
for(i = 0; i < data.supplier.length; i++){
select_supplier += "<option value='"+data.vtype_h2h[i]+"'>"+data.supplier[i]+"</option>";
}
select_supplier += "</select>";
$("#popup").html(select_supplier);
$dialog = $("#popup").dialog({
buttons : {
'Ok' : function() {
$("#supplier").val($("#select_supplier").val());
$(this).dialog("destroy");
},
'Batal' : function() {
$(this).dialog("destroy");
}
},
draggable : false,
hide : 'slide',
modal : true,
autoOpen : false
});
$dialog.dialog("open");
}
},"json");
});