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

Question

У меня есть функция, которая отправляет некоторые данные из формы, используя 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 запросов.

Answer 1

Вы получаете это поведение бесплатно, если ваши элементы управления содержатся в пределах <form>. Из контекста вашего кода, использующего serialize(), видно, что это уже так. Таким образом, вы можете просто изменить свою логику c, чтобы прослушивать событие 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/");
      }
    }
  });
});

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

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