Halaman

Kamis, 04 Maret 2010

[shared] jQuery serialize only a part of form

baru2 ini di project yang sedang saia kerjakan, saia menemui suatu masalah, intinya saia ingin men-submit suatu bagian dari form yang cukup besar menggunakan ajax untuk mendapatkan nilai yang akan dipakai oleh bagian lain dari form.

secara sederhana kode nya sebagai berikut:

<form>
<input type="text" name="user_name" />
<div id="part1">
<input type="text" name="user_paid_amount" onchange="ajaxRequestToGetPart2ValueBasedOnPart1();" />
<input type="text" name="user_type" onchange="ajaxRequestToGetPart2ValueBasedOnPart1();"/>
</div>
<div id="part2">
<input type="text" name="price_amount" value="" />
</div>
</form>

intinya ketika ada perubahan pada input2 di part1, part2 akan secara otomatis diisi.

namun yang jadi masalah adalah bagaimana cara mengambil value2 dari part1 untuk dikirimkan sebagai parameter..
jquery menyediakan fungsi serialize untuk mengambil semua element dari suatu form (http://api.jquery.com/serialize/), sayangnya hal tersebut tidak dapat dilakukan untuk container selain form, jadi $('#part1').serialize() tidak dapat digunakan..

Solusi 1 - clone(true)

jQuery Serialize a Fieldset
menggunakan clone untuk meng-copy isi div yang kemudian diletakkan pada form yang disembunyikan. form tersebut lalu di-serialize kemudian di-remove.

namun clone merupakan fungsi yang cukup memakan resource.

Solusi 2 - selector

solusi yang ke-2 dengan menggunakan selector :input. kira2 kodenya sebagai berikut:

function serialize(container){
//container: string selector or element of the container
$(':input', container).serialize();
}
serialize('#part1');

lebih simple dan efektif :)

Tidak ada komentar:

Posting Komentar