Gunakan tautan normal untuk mengirimkan formulir


130

Saya ingin mengirimkan formulir. Tetapi saya tidak akan menggunakan cara dasar menggunakan tombol input dengan tipe kirim tetapi sebuah tautan.

Gambar di bawah ini menunjukkan alasannya. Saya menggunakan tautan gambar untuk menyimpan / mengirim formulir. Karena saya memiliki standar css markup untuk tautan gambar, saya tidak ingin menggunakan tombol masukan kirim.

Saya mencoba menerapkan onClick = "document.formName.submit ()" ke elemen tetapi saya lebih suka metode html.

teks alternatif

Ada ide?


3
gunakan tombol dan css untuk menampilkan gambar atau gunakan javascript, tidak ada cara nyata untuk membuat href sederhana untuk mengirimkan formulir tanpa javascript.
Anton S

Saya kedua itu, sayangnya ini bukan cara yang mudah tanpa javascript
benhowdle89

4
Alasan Anda melakukan ini terdengar seperti ekonomi palsu. Lebih baik hanya datang dengan css standar untuk mengirimkan tombol dan menggunakan bentuk cara mereka dirancang untuk digunakan. Ada tumpukan teknik tombol css yang dijelaskan di sini: tripwiremagazine.com/2009/06/...
dnagirl

Jawaban:


169

Dua arah. Entah buat tombol dan gaya itu sehingga terlihat seperti tautan dengan css, atau buat tautan dan gunakan onclick="this.closest('form').submit();return false;".


55
Aaaaaaa dan berikut ini adalah referensi untuk cara mendesain tombol sebagai tautan: stackoverflow.com/questions/1367409/…
flipchart

3
perhatikan bahwa form.submit()tidak akan berfungsi tanpa JavaScript
baptx

3
@baptx bahkan ponsel pintar lama telah mengaktifkan javascript
Mahdi Jazini

2
@ MahdiJazini banyak orang menonaktifkan JavaScript secara default yang dapat mengganggu dan memengaruhi kinerja dalam beberapa kasus. Jika JavaScript gagal, itu dapat merusak seluruh situs web (misalnya menggunakan CDN tanpa cadangan lokal dan domain pihak ketiga diblokir). Jika ada kesalahan HTML, Anda masih bisa menggunakan situs web. Pengembang harus mengikuti prinsip peningkatan progresif sebagai gantinya.
baptx

3
Jika Anda ingin mendukung pengguna tanpa javascript, lakukan opsi pertama yang dijelaskan dalam jawaban ini, gaya tombol seperti tautan. Misalnya input[type=submit].link { border: none; background: none; display: inline; color: blue; text-decoration: underline; }dan<input type=submit class="link" />
Jan Sverre

87

Anda tidak dapat benar-benar melakukan ini tanpa beberapa bentuk skrip sepengetahuan saya.

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

Contoh dari Sini .


1
dan para pengunjung yang terhormat ... jangan lupa untuk mengatur >>> id = "my_form" itu id bukan nama: D
Mahdi Jazini

Ini harus menjadi jawaban terbaik dan eksplisit, terima kasih!
yehanny

28

Mendesain yang input type="submit"seperti ini cocok untuk saya:

.link-button { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}
<input type="submit" class="link-button" />

Diuji di Chrome, IE 7-9, Firefox


hanya untuk catatan: Anda harus memilih inputelemen yang sesuai menggunakan pemilih CSS tanpa melampirkan kelas ke elemen HTML.
Erik Kaplun

Meskipun komentar Anda adalah cara yang disukai, ini tidak selalu mungkin
Serj Sagan

Mengapa demikian cara yang disukai?
Markus

Ini adalah praktik pengkodean semi-mapan, umumnya menyisihkan html yang lebih bersih ... tapi itu bukan masalah besar
Serj Sagan

1
Jawaban ini tidak bergantung pada javascript baik yang merupakan satu hal yang kurang perlu dikhawatirkan
Matthew Lock


5

menggunakan:

<input type="image" src=".."/>

atau:

<button type="send"><img src=".."/> + any html code</button>

ditambah beberapa CSS


0

Jelas, tidak ada solusi dengan HTML murni untuk mengirimkan formulir dengan atag tautan ( ). HTML standar hanya menerima tombol atau gambar. Seperti yang dikatakan beberapa kolaborator lain, orang dapat mensimulasikan tampilan tautan menggunakan tombol, tapi saya kira itu bukan tujuan dari pertanyaan.

IMHO, saya percaya bahwa solusi yang diajukan dan diterima tidak bekerja.

Saya telah mengujinya di formulir dan browser tidak menemukan referensi ke formulir.

Jadi adalah mungkin untuk menyelesaikannya menggunakan satu baris JavaScript, menggunakan thisobjek, yang mereferensikan elemen yang diklik, yang merupakan simpul anak dari formulir, yang perlu diserahkan. Begitu this.parentNodejuga dengan bentuk simpul. Setelah itu baru memanggil submit()metode dalam bentuk itu. Tidak perlu penelitian dari seluruh dokumen untuk menemukan formulir yang tepat.

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

Misalkan saya masuk dengan nama saya sendiri:

Formulir yang sudah diisi

Saya telah menggunakan getatribut metode formulir karena dimungkinkan untuk melihat parameter yang tepat di URL di laman yang dimuat setelah mengirim.

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

Solusi ini jelas berlaku untuk semua tag yang menerima onclickacara atau kejadian serupa.

thisadalah pilihan yang sangat baik untuk memulihkan konteks bersama dengan eventvariabel (tersedia di semua browser utama dan IE9 dan seterusnya) yang dapat digunakan secara langsung atau diteruskan sebagai argumen ke suatu fungsi.

Dalam hal ini, ganti baris dengan atag dengan garis di bawah ini, menggunakan properti target, yang menunjukkan elemen yang telah memulai acara.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>

@Nathan, saya tidak punya banyak praktik menulis Stackoverflow. Saya harap koreksi Anda membantu saya meningkatkan gaya saya. Bahasa Inggris saya juga tidak bagus.
Paulo Buchsbaum

0

Anda dapat menggunakan OnClick = "document.getElementById ('formID_NOT_NAME'). SUBMIT ()"

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.