отменить привязку события отправки в обратном вызове AJAX

Если флажок не установлен, я предупреждаю и предотвращаю отправку формы (нажатие кнопки отправки или Enter) с привязкой false. Мне нужно отменить привязку обратного вызова AJAX, но я не могу этого сделать.

HTML:

<form action="act.php" onsubmit="formSubmit()" id="TypeForm" name="TypeForm" method="POST">
<label>
<input type="radio" name="Type" value="1">
<span>Type 1</span>
</label>
<label>
<input type="radio" name="Type" value="2">
<span>Type 2</span>
</label>
<input type="submit" name="submit" id="submit" value="Next" />
</form>

Javascript/JQuery:

<script>
  function formSubmit() {
    var self=this;
    $(self).bind('submit', false);
    if ($('#TypeForm').find('input:radio:checked').length == 0) {
      alert('A selection is required.');
    } else {
        $.ajax({
          type: "POST",
          url: "add.php",
          success: function() {
            $(self).unbind();
          }
        });
    }
  }
</script>

Заранее спасибо за вашу помощь!


jquery callback unbind
person rhill    schedule 04.07.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Может быть, вы забыли название события - $(self).unbind('submit');?

person dmirkitanov    schedule 04.07.2011
comment
Я оставил пример кода в максимально общей форме, чтобы отменить привязку всех событий, связанных с JQuery. Ранее я пытался отменить привязку конкретного события (.submit), а также создал отдельный обработчик и попытался отменить привязку только к этому обработчику - ни один из них не отвязывался и не разрешал отправку формы. - person rhill; 05.07.2011

arrow_upward
1
arrow_downward

Вы хотите остановить обычную отправку формы, когда пользователь нажимает Enter или кнопку отправки? Затем вам нужно запретить event выполнять действие по умолчанию. Попробуй это:

function formSubmit(event) {
    var self=this;

    event.preventDefault();

    if ($('#TypeForm').find('input:radio:checked').length == 0) {
      alert('A selection is required.');
    } else {
        $.ajax({
          type: "POST",
          url: "add.php",
          success: function() {
            $(self).unbind();
          }
        });
    }
  }

Редактировать: И, как упоминает Тревор, вы должны использовать jQuery для привязки вашей функции, чтобы event правильно настроить для работы в разных браузерах. Код может быть:

$(function() {
  $('#TypeForm').submit(formSubmit);
});

Но я бы переписал ваш код так (НЕ проверено):

<script>

  $(function() {
    $('#TypeForm').submit(function (event) {
      var self=this;

      event.preventDefault();

      if ($(this).find('input:radio:checked').length === 0) {
        alert('A selection is required.');
        return false;
      }

      $.ajax({
        type: "POST",
        url: "add.php",
        success: function (data) {
          alert('success, data: ' + data); // optional
          // no need for this: $(self).unbind();
        }
      });
    }
  });

</script>

И удалите onsubmit="formSubmit()" из вашего HTML.

person Jorge Gajon    schedule 04.07.2011
comment
Я только пытаюсь предотвратить отправку формы, когда ни один переключатель не был нажат. Если щелкнуть один из них, я хочу, чтобы был выполнен вызов AJAX (добавить запись БД) и отправить форму, которая продолжается на следующей странице. Я переписал код в соответствии с приведенным вами примером (за исключением того, что отсутствует ); в последнем }, но preventDefault не позволяет отправить форму и перейти к act.php. - person rhill; 05.07.2011

arrow_upward
0
arrow_downward

Во-первых, var self=this;

Должно быть

var self=$(this)

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

Пример:

$(function() { // short hand document ready call
   $('form-name').submit(function(formSubmit());
}

Кроме того, почему вы хотите отвязать его?

person Trevor    schedule 04.07.2011
comment
Есть ли разница?, это то же самое (я имею в виду изменение self=this на self=$(this)) - person Jorge Gajon; 04.07.2011
comment
Нет, но для удобства чтения это полезно. Не говоря уже о том, что гораздо проще обрабатывать свойства и методы объектов, если вам нужно использовать их несколько раз в ходе выполнения функции. Обычно люди присваивают $(this) переменной с именем $this. - person Trevor; 04.07.2011
comment
Справедливо, просто ваш ответ звучит так, будто это изменение обязательно для того, чтобы все работало. - person Jorge Gajon; 04.07.2011
comment
@Trevor - спасибо, в какой-то момент у меня был синтаксис self=$(this) (я пробовал много итераций в течение нескольких часов), но не добавил его во вставку кода - извините - спасибо за совет. Что касается привязки формы к действию отправки - я не мог правильно понять синтаксис, пытаясь использовать приведенный пример. Цель отвязки заключалась в том, чтобы продолжить и отправить форму после завершения вызова AJAX - (чтобы перейти к act.php). - person rhill; 05.07.2011
comment
Конечно. Попробуйте использовать Firebug, чтобы проверить, правильно ли работает функция, и выяснить, правильно ли $(this) извлекает объект. console.log($(это)); внутри функции formSubmit. Удачи. - person Trevor; 05.07.2011