Bagaimana cara menonaktifkan tombol kirim setelah mengklik?

13

Drupal tampaknya tidak mencegah banyak pengiriman formulir, bahkan pada halaman node. QA ini menyarankan untuk memperbaikinya di sisi server.

Bagaimana saya bisa menonaktifkan tombol kirim setelah mengklik?

Ada solusi lain?

7 forms kamu
sumber
Tidakkah API Formulir Drupal mencegah pengiriman ganda berkat pemeriksaan nilai token bentuknya? Tidak dapat mengirim formulir dengan token yang sama dua kali?
Johnathan Elmore

Jawaban:

12

Ini hanya di dev tetapi modul Sembunyikan Kirim akan melakukan trik. Salah satu fiturnya adalah:

Sembunyikan (atau nonaktifkan) tombol kirim setelah diklik

Saya baru saja menginstalnya di situs dev dan tampaknya berfungsi dengan baik untuk simpul menambahkan formulir; ketika Anda mengklik tombol kirim itu disembunyikan dan diganti dengan memuat gambar dan pesan 'Harap tunggu ...', sebelum formulir akhirnya dikirim. Saya belum mencobanya pada formulir lain.

Clive
sumber
Adakah gagasan tentang cara mendapatkan modul kirim sembunyikan untuk bekerja pada formulir di modul khusus Anda sendiri? Saya berharap ini akan menjadi situs yang luas, tetapi sepertinya tidak demikian.
user785179
@ user785179 lihat bagaimana mengimplementasikan hook_form_alter()- jika menggunakan hook_form_FORMID_alter(), alihkan ke generik hook_form_alter(). Jika generik hook_form_alter()dengan jika di dalam, menambahkan beberapa or's dalam hal ini if.
Mołot
Hati-hati dengan solusi ini - modul sembunyikan pengiriman memecah unggahan ajax, menyebabkan masalah pelengkapan otomatis, dan dalam beberapa kasus menyebabkan tombol kirim tidak melakukan apa-apa sama sekali pada klik pertama. Saya hanya perlu menghapusnya dari sebuah situs.
jenlampton
@ Jen Strange, saya sudah menggunakannya di puluhan situs selama bertahun-tahun tanpa melihat masalah seperti itu. Mungkin Anda memiliki modul lain yang terpasang yang mengganggu modul ini
Clive
10

Berikut adalah solusi untuk Drupal 7. Kode adalah versi disederhanakan dari modul Sembunyikan Kirim.

Kode ini berfungsi dengan baik bahkan dengan tombol "Tambah lagi" dan formulir AJAX.

Drupal.behaviors.hideSubmitButton = {
  attach: function(context) {
    $('form.node-form', context).once('hideSubmitButton', function () {
      var $form = $(this);
      $form.find('input.form-submit').click(function (e) {
        var el = $(this);
        el.after('<input type="hidden" name="' + el.attr('name') + '" value="' + el.attr('value') + '" />');
        return true;
      });
      $form.submit(function (e) {
        if (!e.isPropagationStopped()) {
          $('input.form-submit', $(this)).attr('disabled', 'disabled');
          return true;
        }  
      });
    });
  }
};
Eugene Fidelin
sumber
Saya ingin menerapkan ini dalam tema adminimal. Membuat file sitename.js dan menyalin kode di atas ke dalamnya. Ini tidak bekerja. Haruskah saya mengatur beberapa hal?
Justme
@Justme di mana Anda meletakkan file sitename.js Anda? Jika dalam modul atau subtema Anda harus menambahkannya ke file .info sehingga dimuat, atau panggil drupal_add_js () di tempat lain untuk mendapatkannya di halaman. Bisakah Anda melihatnya ditambahkan di sumber halaman?
jenlampton
Thxs menyelesaikannya. Saya tidak tahu bahwa ini harus antara: (function ($) {and}) (jQuery); dalam file js. Bekerja seperti sharm !!
Justme
0

Cara termudah adalah dengan melakukan solusi javascript berbasis tema untuk menonaktifkan tombol setelah pengiriman formulir. Dalam file theme.info, letakkan file javascript Anda sehingga dapat dimuat oleh api tema.

scripts[] = js/themename-script.js

Sekarang di themename-script.js tambahkan ke bagian Drupal.behaviors.themename agar terlihat seperti berikut:

Drupal.behaviors.themename = function()
{
  $('.node-form').submit(function(){
    $('#edit-submit').attr("disabled", "disabled");
    $('#edit-preview').attr("disabled", "disabled");
  });
}

Jadi alurnya adalah sebagai berikut:

  1. Tema memuat javascript
  2. Nama Drupal.behaviors.themen dipecat saat memuat halaman
  3. Pada pengiriman formulir simpul menambahkan formulir (kelas berdasarkan contoh di atas, dapat disesuaikan pada jenis formulir) menonaktifkan tombol kirim (kirim dan pratinjau) sehingga tidak dapat diklik lagi

Saya yakin jika ada beberapa pemrosesan ajax yang di atas bisa berbahaya dan pengiriman formulir tidak akan pernah bisa dilakukan lagi jika ada kesalahan dalam validasi form_api, jadi lakukan pengujian ini dan sesuaikan untuk memenuhi kebutuhan Anda. Saya menonaktifkan kedua tombol karena Anda masih bisa mengklik tombol pratinjau saat tombol kirim dinonaktifkan. Jelas jarak tempuh saya bervariasi.

Mayday
sumber
2
Anda menggunakan Drupal.behaviorsgaya deklarasi lama ; itu tidak akan berfungsi untuk Drupal 7. Itu perlu Drupal.behaviors.themename = { attach: function (context, settings) { // .... Lihat Mengelola JavaScript di Drupal 7 untuk info lebih lanjut
Clive
Gaya deklarasi diperbaiki
Eugene Fidelin
Nilai apa yang harus diganti dari skrip ini 'bentuk-simpul'?
pal4life
Saya mencoba menjalankan ini dalam tema adminimal tetapi tidak berhasil. Ganti nama nama file dengan adminimal dan salin kode lengkap di sitename.js dan tambahkan ini ke file info tema. Tetap saya mendapatkan lebih banyak pengiriman dengan bentuk yang sama.
Justme