Berbagi Itu Menyenangkan: JavaScript

Showing posts with label JavaScript. Show all posts

Teknik Toggle Pada JQuery

Resep Masakan Mantap 12:12:00 PM Add Comment

Teknik toggle jquery adalah teknik untuk menyembunyikan/menampilkan suatu element, disini saya mempunyai sebuah button dengan id btntoggle, dan sebuah div dengan id divtoggle.

Berikut ini adalah sourcecode nya:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btntoggle").click(function(){
$("#divtoggle").toggle();
});
});
</script>

<button id="btntoggle">Klik Disini Untuk Menyembunyikan/Menampilkan Paragrap</button>

<div id="divtoggle">Ini Paragrapnya Yang Mau Di Sembunyikan/Tampilkan</div>

Penjelasan:

Konsepnya ketika btntoggle di klik maka divtoggle akan Di Sembunyikan/Tampilkan.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>: ini diperlukan untuk memanggil jquery.
$("#btntoggle").click(function(): dibaca jika di click maka.
$("#divtoggle").toggle(): dibaca toggle id divtoggle

Catatan:

id pada jquery/javascript ditandai dengan #, sedangkan class dengan tanda .(titik)
anda bisa memperlambat toggle dengan menambahkan angka pada toggle() menjadi toggle(1000), anda bisa mengubah angka 1000 tersebut sesuai selera anda.

Semoga Bermanfaat, silahkan bertanya di kolom komentar :-D

Cara Menampilkan Value Yang Pilih Pada Combobox Javascript(onChange)

Resep Masakan Mantap 12:52:00 PM Add Comment

Resep Masakan Mantap

Hari minggu alhamdulillah masih sempet buat nulis artikel lagi, seperti judul di atas kali ini saya mau ngasih koding Javascript Cara Menampilkan Value Yang Pilih Pada Combobox.

Beikut ini adalah Contoh Kasusnya:

Saya mempunyai combobox(select) yang berisi valeu berupa warna-warna dengan id combobox (warna), kemudian saya ingin menampilkan hasil pilihan saya di <div id='tampil_warna'></div>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<select id="warna" onchange="pilihanku()">
<option value=''>Silahkan Pilih Warna Yang Anda Suka</option>
<option value='Merah'>Merah</option>
<option value='Kuning'>Kuning</option>
<option value='Hijau'>Hijau</option>
</select>
<div id="tampil_warna"></div>

<script>
function pilihanku() {
var x = document.getElementById("warna").value;
document.getElementById("tampil_warna").innerHTML = "Wow pilihan warnamu adalah: " + x;
}
</script>

Penjelasan:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>: Jquery versi 1.12.2
onchange="pilihanku()": event javascript ketika data diubah.
document.getElementById("warna").value: Mengambil value dari id 'warna'.
document.getElementById("tampil_warna").innerHTML: Tampilkan data di id 'tampil_warna'

Saya kira cukup jelas ya, untuk pertanyaan silahkan berikan komentar pada form dibawah. Semoga Bermanfaat :-D

Set Selected pada combobox apabila klik button Javascript HTML

ILMU JavaScript

Resep Masakan Mantap 2:27:00 PM Add Comment

Resep Masakan Mantap

Kali ini saya mau bagi koding javascript nih, agak bingung juga ngasih judulnya tapi yasudahlah hiraukan saja judulnya..hehe

oke jadi konsepnya gini..
Saya punya combo box dengan id country, nah dibawah combo boxnya saya punya beberapa button, nah kalo buttonnya itu di klik nanti selected combo boxnya tuh otomatis berubah.. gituuuuuu

nah ini dia scriptnya:

<script type="text/javascript">

$(document).ready(function(){

$("#isSelect").click(function () {

alert($('#country').val());

});

$("#selectChina").click(function () {

$("#country").val("China");

});

$("#selectUS").click(function () {

$("#country").val("United State");

});

$("#selectMalaysia").click(function () {

$("#country").val("Malaysia");

});

$("#disableUS").click(function () {

$("#country option[value='United State']").attr("disabled", true);

});

$("#enableUS").click(function () {

$("#country option[value='United State']").attr("disabled", false);

});

});
</script>
</head><body>

<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>

<br/>
<br/>
<br/>

<input type='button' value='Display Selected' id='isSelect'>
<input type='button' value='China' id='selectChina'>
<input type='button' value='Select US' id='selectUS'>
<input type='button' value='Select Malaysia' id='selectMalaysia'>
<input type='button' value='Disable US' id='disableUS'>
<input type='button' value='Enable US' id='enableUS'>

Demo Program