Не удалось отправить форму при первом событии клика

Question

Ну, я потратил часы на эту проблему и отсканировал весь поток stackoverflow, но до сих пор не знаю, что делать. Но то, что действительно меня раздражает, заключается в том, что такой тривиальный и самый простой в мире не работает. Итак, что у меня сейчас есть форма с входами и кнопками:

<form id="frm" action="/accent/login/enter/"> 
    {% csrf_token %} 
    <div draggable="true" id="panel" class="panel" title=""> 
     <input id="login" name="login" type="text" placeholder="" class="required" /> <br/> 
     <input id="pswd" name="pswd" type="password" placeholder="" class="required" /> <br/> 
     <button id="btn" value="">ENTER</button>    
    </div> 
</form> 

И у меня есть этот код, который предполагается отправить форму:

$('#btn').one("click",function(){ // prevent from multiple submits 
    $('#frm').validate({ // validate the form before submission 
     ...general stuff: rules, messages, etc 
     submitHandler:function(form){ 
      $('#frm').submit(function(e){ //submitted on the second click. why??? 
       ...prepare parameters for ajax call 
       $.ajax({ 
        type:'POST', 
        ...general stuff 
       }); 
       e.preventDefault(); 
      }) 
     } 
    }); 
}); 

Проблемы есть, когда пользователь нажимает на кнопку отправки в первый раз, то форма не отправляется, если, однако, он или она нажимает на нее во второй раз, тогда она отправляется в порядке. Я не могу понять логику такого поведения, реализованного в jquery. Кроме того, я должен сказать, что я пробовал много других хитростей, как:

form.submit(... 
$('#frm')[0].submit(... 

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

EDIT

Я также попробовал этот трюк:

jQuery('#frm').submit(... 

но это работает точно так же, как и первый метод - $('#frm').submit(...

EDIT

я нашел третий метод который работает как предыдущий:

$('form').submit(... 

Подводя итог, у меня есть три разных метода, но все они работают только тогда, когда пользователь нажимает кнопку во второй раз. И у меня есть два метода, которые работают стандартным образом и не позволяют использовать функцию обратного вызова.

Answer 1

Проблема заключается в том, вы регистрируетесь для отправки формы после формы Проверка.

so,
1) При первом нажатии кнопки подтверждения событие отправки регистрируется обработчиком.
2) При втором нажатии кнопки будет вызываться зарегистрированный обработчик. поэтому он отправляется на второй клик. Но учтите, что вы снова регистрируетесь для события отправки. что означает, на третьем щелкните форму будет представлены в два раза, на четвёрте нажмите форма будет представлена ​​трижды ..... и так далее ...

Решения
1) удалить $("#frm").submit() код из submitHandler и вывести его на улицу.
2) используйте e.preventDefault(); в $("#frm").submit(), поэтому действие по умолчанию предотвращено, и страница не перезагружается.
3) поместить код AJAX прямо в submitHandler

$('#btn').one("click",function(){ // prevent from multiple submits 
    $('#frm').validate({ // validate the form before submission 
     ...general stuff: rules, messages, etc 
     submitHandler:function(form){ 
      ...prepare parameters for ajax call 
      $.ajax({ 
       type:'POST', 
       ...general stuff 
      }); 
     } 
    }); 
}); 

$('#frm').submit(function (e) { 

    e.preventDefault(); 
}); 

Answer 2

Возможно, вы используете плагин jqueryvalidation. Если это правда, то использование $().validate() может быть неправильным.

$().validate() функция для инициализации проверки, он говорит сценарий, как validate значения формы и что делать, если проверка проходит (в submitHandler собственности).

Так может быть, вы должны изменить свой код так:

<form id='frm'> 
... 
</form> 

---

$('#frm').validate({ 
    //...general stuff: rules, messages, etc 
    submitHandler: function (form) { 
     //blahblah before doing the submitting... 
     form.submit(); 
    } 
}); 

$('#btn').one('click', function(){ 
    $('#frm').submit(); 
}); 

Но, на самом деле есть еще проблема с обработчиком $btn.one() события: при нажатии на кнопку в то время как значения формы Безразлично Не отвечайте вашим правилам проверки, может быть упущен шанс уволить обработчика, и даже если вы повторно вводите правильное значение, кнопка никогда не ответит на ваш клик, не обновляя страницу.

Так может быть, вы должны проверить свой бизнес-логику снова и перепроектировать форму, направляющее поток, но это не то, что обсуждает этот вопрос, удачи;)