80s toys - Atari. I still have
Home » Article » Javascript » Cara Mengirim Form Data Menggunakan Link

Cara mengirim Form Data menggunakan link

f_huda19   08 Februari 2015   17:25:37   0 Suka   Favorit

Jika sobat masih bingung dengan judul artikel diatas, ane akan coba jelaskan sedikit. Apabila biasanya sobat membuat form pencarian atau form pengisian data pasti sobat akan menuliskan kode input textbox atau textarea dan diakhiri tombol submit, nah disini Admin akan membuat sedikit berbeda yaitu mengganti tombol submit dengan link.

Emang bisa? Ya kalau ga bisa Admin tidak akan posting kek ginian.. Hhe :) dengan mengganti tombol submit ini diharapkan dapat lebih leluasa dalam mengcostumnya melalui css. Karena tombol submit yang biasa kita gunakan terkadang tampilannya kurang menarik dan terkesan kaku di beberapa browser. Masak mau ngasih gambar aja harus dijadikan background dulu, kan itu namanya tidak efisien. Jika pakai link kan tinggal taruh tag image beres.

Jika sobat sudah mengerti yang Admin maksud, kini saat nya kita mempraktekkan cara pembuatannya. Sebenarnya tidak jauh berbeda dengan form yang biasa kita buat, tapi ya itu tadi tombol submit di ganti dengan link. Udah, cuman itu doang perbedaanya. Jadi jika sobat sudah sering membuat form HTML pasti akan lebih mudah untuk memahaminya. Ngga percaya? Buktikan aja sendiri.

<form name="formdata" method="post" action="/submit.php">
<input type="text" name="user" placeholder="Username"/><br/>
<input type="password" name="pass" placeholder="Password"/><br/>
<a href="#" onclick="document.formdata.submit();return false">Login</a>
</form>

Pada percobaan diatas Admin mengambil contoh form login yang harus diisi oleh user. Yang perlu kita perhatikan adalah pada atribut form itu sendiri, disitu Admin membuat atribut name dengan value formdata yang fungsinya untuk menginisialisasikan pemicu dari .submit()

Selanjutnya di bagian akhir Admin membuat tag a dengan atribut onclick="document.formdata.submit ();return false" formdata adalah value dari atribut name pada form itu tadi yang selanjutnya akan dipicu oleh .submit().

Kita juga dapat membuat tag a di luar dari form tersebut mengingat tag a bukanlah anak dari form, namun karena kita terbiasa membuat tombol submit di dalam form maka Admin buat seperti itu. Kita juga dapat menggunakan tag HTML lain seperti div, span, dll.. untuk pengganti tombol submitnya. Oh iya, cara diatas juga dapat bekerja dengan baik untuk form yang memiliki method POST atau GET.

Artikel diatas adalah sedikit penjelasan bagaimana mengirim form data menggunakan link. Jika sobat masih bingung dengan penjelasan yang Admin berikan silahkan bertanya di komentar. Cukup sekian untuk artikel kali ini semoga artikel diatas dapat bermanfaat untuk kita semua.

KOMENTAR

pdl

pdl 11 Jul 15

Bagaimana jika yang dibuat ling daftar nama berupa tabel

pdl

pdl 11 Jul 15

Terima kasih, Infonya sangat membatu.
tapi bagaimana jika yg dibuat Link berupa daftar nama pada sebuah tabel, sehingga saat di klik salah satu nama maka akan tampil biodata atas nama tersebut.
Saya coba buat tapi linknya tidak berfungsi

f_huda19

Admin 12 Jul 15

biodatanya berupa modal atau berada di halaman lain? coba saya lihat previewnya yang sudah kamu buat

pdl

pdl 12 Jul 15

dropbox.com/s/tfy7q495ygla66o/siswa.png?dl=0

f_huda19

Admin 13 Jul 15

source codenya mana? apakah yang kamu maksud seperti di facebook versi web? jadi jika cursor menyentuh nama profil akan muncul foto profil, nama, keterangan dll? jika iya coba cari di google dengan keyword ajax jquery dan jquery modal

KIRIM KOMENTAR