Как предотвратить двойную отправку с проверкой формы - PullRequest
0 голосов
/ 24 января 2019

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

Я пробовал различные версии кода ниже, которые я нашел по аналогичной проблеме SO ...

                  $(document).ready(function (){
                     $('form').submit(function() {
                    $('#status').attr('disabled', true);
                      });
                    });

В качестве обновления я включил код, описанный ниже:

                $(document).ready(function (){
                  $("#status").click(function() {
                     if(!$("form").hasClass("submitted")){
                       $("form").addClass("submitted");
                       $("form").submit();
                     }
                   });
                 });

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

В случае моего кода я пытаюсь передать значение с помощью кнопки «Отправить», и поэтому использование приведенного выше кода предотвращает передачу значения при его включении. Я использую HTML, как показано ниже:

<button type="submit" class="button15" name="status" id="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>

Если я использую JQuery выше вместе с показанным HTML, они, кажется, конфликтуют, и это все еще не мешает отправке.

Заранее благодарим за любые идеи о том, как я могу включить проверку формы и не дать пользователю дважды щелкнуть форму и отправить ее дважды. Я также видел несколько примеров использования переменных, специфичных для сессии, но надеялся решить с помощью JQuery / Javascript, если это возможно.

Я только что протестировал приведенный ниже код, и он, кажется, выполняется, но форма не отправляется. Ошибок тоже нет.

                $(document).ready(function (){
                  $("#status73").click(function() {
                     if(!$("form").hasClass("submitted")){
                       console.log("hello world");
                       $("form").addClass("submitted");
                       $(window).unbind('beforeunload');
                       $("form").submit();
                     }
                   });
                 });

Привет, мир должен был увидеть, исполняется ли он, и действительно ли это так. Тем не менее, моя форма Django не обрабатывается. Если я использую код выше с этим HTML ...

<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

Форма не отправляется. Если я использовал приведенный выше код с этим HTML, форма будет отправлена ​​....

<button type="submit" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

Разница заключается в типе кнопки. Я снова новичок, поэтому я учусь по ходу дела. Спасибо за ввод.

Я совершенно уверен, что проблема в том, что я не передаю значение Submitted, когда кнопка меняется на тип button from submit. Можно ли как-то передать значение как скрытое, когда пользователь нажимает кнопку отправки? Я пробовал что-то вроде ...

<input type="hidden" name="status" value="Submitted"/>
<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

Но это, похоже, не передает значение статуса в форму. Ничего не происходит.

Я только что проверил свой журнал консоли, и у меня есть следующие ошибки:

Uncaught ReferenceError: checkForm is not defined
    at HTMLFormElement.onsubmit ((index):104)
    at Object.trigger (jquery.min.js:2)
    at HTMLFormElement.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.trigger (jquery.min.js:2)
    at w.fn.init.w.fn.(:8000/book/author/anonymous function) [as submit] (http://127.0.0.1:8000/static/jquery/jquery.min.js:2:85786)
    at HTMLButtonElement.<anonymous> ((index):23)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.y.handle (jquery.min.js:2)

Я также немного поиграл со скрытыми значениями. Изучение ошибок выше.

В моем HTML было оставленное действие по отправке из предыдущих попыток, которое вызывало большую часть моего горя. Я также изменил поле статуса, чтобы оно было скрыто в форме, а не в элементе HTML. Спасибо за всю помощь !!!!!!

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Вы можете изменить тип кнопки на кнопку и добавить класс в форму при ее первоначальной отправке. Если класс присутствует, не отправляйте форму. Это предотвращает отключение кнопки.

См. Приведенный ниже пример использования jQuery. Обратите внимание, что это предполагает, что ваша проверка препятствует отправке формы.

$("#status").click(function() {
    if(!$("form").hasClass("submitted")){
      $("form").addClass("submitted");
      $("form").submit();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="">
  <input type="text"/>
  <button id="status" type="button" value="Submitted">Submit</button>
</form>
0 голосов
/ 24 января 2019

Попробуйте отключить кнопку перед отправкой формы (запомните, измените тип кнопки на button ):

<form id="form_id">
    {{ form }}
    <button type="button" class="button15" id="submit_button_id"><h3 
            class="txtalgn4">Submit</h3></button>
</form>


$( "#submit_button_id" ).click(function() {
    $( "#submit_button_id" ).prop('disabled', true);
    $( "#form_id" ).submit();
 });

Также, если вам нужна проверка браузера: используйте:

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

$( "#submit_button_id" ).click(function() {
    $( "#submit_button_id" ).prop('disabled', true);
    if ( !$("#form_id").valid() ) {
        $( "#submit_button_id" ).prop('disabled', false
    }
    else {
        $( "#form_id" ).submit();
    }
});
...