Перехватить форму onSubmit

Question

Есть ли способ перехватить событие onsubmit формы html? В моем веб-приложении есть несколько экранов, содержащих формы и т. Д. Проблема, с которой мы сталкиваемся, - это когда пользователь нажимает любую кнопку несколько раз, сервер перегружается с помощью тех же запросов. Некоторые из форм имеют прикрепленные к ним обработчики событий (например, onSubmit, button.onClick и т. Д.). Одним из способов может быть «ввод» моей кнопки, чтобы отключить код, пройдя все экраны.

Но то, что я ищу, является общим решением, которое можно применять ко всем экранам, просто включив скрипт, где написана функция.

Я знаю, что могу настроить обратный вызов с помощью jQuery (захват onSubmit для формы), но в этом случае в этом случае, если на каком-либо экране уже зарегистрирован onSubmit, он не может быть вызван.

Любая помощь в этом отношении ценится!

Answer 1

Если у вас уже есть jQuery, я предлагаю вам использовать его ... Все, что вам нужно сделать, это убедиться, что onsubmit вашей формы не имеет «return false», иначе он может заблокировать отправку jQuery.

Вот что вам нужно сделать:

1. Удалите возвращение ложных от onsubmit вашей формы (если таковые имеются). Не беспокойтесь, мы позаботимся об этом позже в jQuery.

2. Добавьте класс к своим формам ... что-то вроде «disableOnSubmit». Пример:

   <form action="something" onsubmit="yourExistingCode" class="disableOnClick"> 
   </form> 
   

   ИЛИ

   <form action="something" onsubmit="yourExistingCode" class="someOtherClass disableOnClick"> 
   </form> 
   

3. Реализовать код, подобный:

   <script type="text/javascript"> 
       $(document).ready(function(){ 
        $('form.disableOnClick').submit(function(e){ 
         // preventDefault() does the same as "return false;". It 
         // will not submit the form. If you're not using return false 
         // and want the form to be submitted remove the line below 
         e.preventDefault(); 
   
         // Now diable any submit button 
         $('input[type=submit], button[type=submit]').attr('disabled, 'disabled'); 
        }); 
       }); 
   </script> 
   

Answer 2

Я думаю, этот кусок кода является хорошим местом для начала. Он должен быть помещен в отдельный файл и включается, когда вы хотите использовать его (если вы, кажется, есть глобальный список сценариев - его хорошее место для него)

var suppressed_items = []; 

function allowOnlyOne(item,e){ 
    if (jQuery.inArray(item, suppressed_items)==-1){ 
     //hi little item, I haven't saw you before, please go on... but I remember you 
     suppressed_items.push(item); 
     return true; 
    } 
    else{ 
     //Hey, you have been submitted already, stay where you are! 
     return false; //or e.preventDefault(), it's a matter of faith :) 
    } 
} 

jQuery(document).ready(function(){ 
    //don't worry, it won't replace your `ready` handlers, but just append new handler 
    jQuery("from").submit(function(e){ 
     return allowOnlyOne(jQuery(this),e); 
    }); 
}); 

Вы можете использовать функцию allowOnlyOne с любого пункта вы пожелает. Так, например, чтобы одним нажатием на всех гиперссылок, внутри этого ready обработчика добавить:

jQuery("a").click(e){ 
    return allowOnlyOne(jQuery(this),e); 
} 

Я надеюсь, вы получите основную идею: поймать событие, получить идентификатор элемента, которые вызывают его, кормил его AllowOnlyOne вместе с событием.

Конечно, вы можете обернуть его вокруг в прямоприменяемых закрытия для достижения инкапсуляции и так далее ...