Как я могу запустить функцию jquery при нажатии кнопки и при нажатии Enter

У меня есть функция, которая отправляет некоторые данные из формы, используя Ajax.

Чтобы форма не публиковала ее без Ajax, я использую preventDefault(); это также останавливает отправку формы при нажатии enter .

Как я могу убедиться, что нижеприведенная функция запускается при нажатии кнопки (как сейчас), а также при нажатии кнопки enter ?

JQuery:

$("body").on("click",".login-button",function(e){
e.preventDefault();
    loginform = $(".login-form").serialize();

    $.ajax({
     type:'post',
     url:"includes/inloggen.php",
     data:({loginform: loginform}),
     success:function(data){
         var obj = JSON.parse(data);

         var arrayspot = 0;
         for (var i = 0; i < obj.length; i++) {
             var status = obj[i].status;
             var field = obj[i].field;
             if(status == 'error'){
                    var message = obj[i].message;
                    $( 'input[name="' + field + '"]' ).parent().addClass('invalid-input');
                    var errorveld = $( 'input[name="' + field + '"]' ).parent();
                    $( 'input[name="' + field + '"]' ).parent().next('.inputerror').remove();
                    errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
             }else if(status == 'success'){
                    $( 'input[name="' + field + '"]' ).parent().next('.inputerror').remove();
                    $( 'input[name="' + field + '"]' ).parent().removeClass('invalid-input');
             }
             var arrayspot = parseInt(i);
         }
         if(obj[arrayspot].totalstatus == 'error'){
             $( "#loginresult" ).removeClass('positiveresult');
             $( "#loginresult" ).show().empty().append( obj[arrayspot].totalmessage );
         }else if(obj[arrayspot].totalstatus == 'success'){
             window.location.replace("https://website.nl/new/");
         }
     }
 });
});

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

Всего 1 ответ


Вы получаете это поведение бесплатно, если ваши элементы управления содержатся в <form> . Из контекста вашего кода с использованием serialize() выясняется, что это уже так. Таким образом, вы можете просто изменить свою логику, чтобы прослушивать событие submit формы вместо click кнопки отправки. Попробуй это:

$("body").on("submit", ".login-form", function(e) {
  e.preventDefault();
  loginform = $(this).serialize();

  $.ajax({
    type: 'post',
    url: "includes/inloggen.php",
    data: {
      loginform: loginform
    },
    success: function(data) {
      var obj = JSON.parse(data);

      var arrayspot = 0;
      for (var i = 0; i < obj.length; i++) {
        var status = obj[i].status;
        var field = obj[i].field;
        var $errorveld = $('input[name="' + field + '"]').parent();

        if (status == 'error') {
          var message = obj[i].message;
          $errorveld.addClass('invalid-input');
          $errorveld.next('.inputerror').remove();
          $errorveld.after('<div class="inputerror"><i class="fas fa-arrow-up"></i> ' + message + '</div>');
        } else if (status == 'success') {
          $errorveld.next('.inputerror').remove();
          $errorveld.removeClass('invalid-input');
        }
        var arrayspot = parseInt(i);
      }
      if (obj[arrayspot].totalstatus == 'error') {
        $("#loginresult").removeClass('positiveresult').show().empty().append(obj[arrayspot].totalmessage);
      } else if (obj[arrayspot].totalstatus == 'success') {
        window.location.replace("https://website.nl/new/");
      }
    }
  });
});

Также обратите внимание, что я немного привел в порядок логику, удалив ненужное () вокруг свойства data а также кэшировав селектор $('input[name="' + field + '"]').parent() .

Наконец, если MIME-тип ответа установлен правильно, вам не нужно вручную вызывать JSON.parse(data)


Есть идеи?

10000