jQuery .html(), .text() dan .val()
.html() digunakan untuk mengambil/mengubah/menyisipkan elemen berupa kode HTML..text() digunakan untuk mengambil/mengubah/menyisipkan karakter berupa teks..val() digunakan untuk mengambil/mengubah/menyisipkan nilai dari elemen-elemen formulir. Misal: <input>
, <select>
dan <textarea>
.
Kita ambil sebuah contoh, misalnya kita membuat elemen HTML seperti ini:
<div id="elemen"></div>
Setelah itu kita terapkan fungsi .html()
untuk menyisipkan sesuatu ke dalamnya seperti ini:
$('#elemen').html('<h1>Lorem ipsum <mark>dolor sit amet</mark></h1>');
Hasilnya adalah #elemen
akan disisipi beberapa elemen baru seperti ini:
<div id="elemen">
<h1>Lorem ipsum <mark>dolor sit amet</mark></h1>
</div>
Berbeda dengan .text()
:
$('#elemen').text('<h1>Lorem ipsum <mark>dolor sit amet</mark></h1>');
Meskipun kita menyisipkan kode HTML ke dalam fungsi .text()
, hasil yang ditampilkan tetaplah berupa teks bertuliskan tag HTML seperti ini:
.val()
digunakan khusus untuk mengambil data dari dalam elemen-elemen berupa formulir. Sebagai contoh kita buat elemen input
dan kita akan menampilkan nilainya ke dalam tag <h1>
seperti ini:
<input type="text" value="Lorem Ipsum" />
<h1></h1>
// Sisipkan nilai elemen input ke dalam tag heading
var a = $('input').val();
$('h1').html(a);
Pandangan Lebih Jauh
Saya tidak begitu yakin tentang seberapa banyak manfaat dari fungsi ini. Namun fungsi-fungsi jQuery seperti .html()
, .val()
dan .text()
sangat bermanfaat untuk Anda gunakan sebagai konsep dasar pembuatan generator berbasis teks, entah itu generator teks maupun generator HTML seperti ini:
HTML
<div id="target">
<textarea></textarea>
<button class="duplikating">Buat HTML »</button>
</div>
<div id="duplikat"></div>
<div style="clear:both;"></div>
CSS
#target,
#duplikat {
font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
width:40%;
height:250px;
background:#fff;
border:2px solid #666;
padding:15px;
margin:10px 10px 0px 0px;
float:left;
display:inline;
}
#target textarea {
width:98%;
height:200px;
display:block;
margin-bottom:5px;
}
jQuery
$(function() {
$('button.duplikating').click(function() {
var duplikat = $('#target textarea').val(); // Mengambil nilai dari <textarea> kemudian menyimpannya ke dalam variabel
$('#duplikat').html(duplikat); //memproduksi kode HTML dari nilai <textarea>
});
});
13 Comments:
mas mau tanya nih, besar harapan mas menjawab dan menjelaskannya ^_^
saya mau bikin sebuah form daftar alumni, yang didalamnya terdapat input:
photo
nama
angkatan
pekerjaan
dll
nah saya maunya itu satu halaman di blogspot, atau mungkin sebuah post di blogspot, tapi ketika ada orang yang mengisi formulir tersebut, hasil isiannya langsung tampil diatas form tersebut, dan juga masuk dalam pendataan di google docs, bisa ga ya mas, kalo bisa, mohon dijelasin ya mas, sangat diperlukan... ga papa deh di posting lain juga mas, asalkan link-kan di jawaban komentar saya mas :)
Hmmmm... bisa, tapi mungkin untuk sementara, karena kalau sobat keluar dari laman/ mereload laman, maka isi dari form tersebut akan hilang lagi :(
wah mas, kalo seandainya pake sistem kaya komentar gitu kira-kira bisa diterapin ga yah??
*tapi saya juga ga ngerti sistem komentar kaya gimana :o
Kalau begitu harus punya dulu databasenya, untuk menyimpan nama-nama anggota member.
tetapi blogger tidak mendukung progrm PHP. Cobalah Wordpress, di sana sangat banyak sekali hal yang dapat dilakukan :)
iya juga sih yah, saya kira bisa gitu dengan bantuan jquery/ ajax kita ngambil data yang ada di google docs... :)
hoho, mungkin bissa :D Tapi itu sedikit(sangat) rumit, karena kita akan kesulitan saat mengambil datanya, tidak seperti feed blog yang dapat diakses melalui /feeds/posts/default atau sebagainya yang mendukung Json :(
This comment has been removed by the author.
yang paling sederhana, kalau formulir dan sheetnya di iframe saja gimana?
Hmm... itu juga kayaknya belum bisa :( karena mau tidak mau datanya harus disimpan terlebihdahulu ke dalam sebuah database dan jika mau, satu-satunya cara adalah, ya... memasukan data baru secara manusal setiap kali ada data baru yang masuk :(
Bila sudah seperti itu, akan sedikit lebih mudah, kita dapat membuat sebuah halaman yang mengambil data dari database, kemudian menampilkannya dalam bentuk dokumen HTML. Dan barulah kita menempelkannya pada sebuah <IFRAME/> di halaman Blogger. :D
Saya juga dulu mau banget kayak gini tapi emang susah. Moga aja ada cara yang lebih baik :)
emh, kalo sistemnya kaya komentar blogger, gimana yah? :o
Kalau sistem komentar blogger, hasil dari inputannya itu disimpan ke dalam database Blogger, dan dapat diakses dari /feeds/comments/default dengan akhiran json tertentu hingga dapat ditampilkan dengan javascript.
wah, kalo gitu emang harus manual yah mas... oke deh mas, jalan satu-satunya bikin form yang nantinya hasil isiannya dikirim ke email :-)
saya nunggu jawaban dari admin (mas taufik) nih, siapa tau ada solusi lain :)
Post a Comment
<< Home