如何在单击按钮并按 Enter 时启动 jquery 功能

Question

I have a function that sends some data from a form using Ajax.

To prevent the form from posting it without Ajax I use preventDefault(); this also stops the form from submitting when pressing enter .

How can I make sure the function below is started when clicking the button (as it is now) and also when pressing the enter button?

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/");
         }
     }
 });
});

I've tried copying the entire function but this time start it on enter press but there must be another way with fewer lines of code? Without sending double ajax requests.

Answer 1

You get this behaviour for free when you have your controls contained within a <form> . From the context of your code using serialize() it appears this is already the case. As such you can simply amend your logic to listen for the submit event of the form instead of the click of the submit button. Try this:

$("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/");
      }
    }
  });
});

Also note that I tidied the logic a little by removing the unnecessary () around the data property and also caching the $('input[name="' + field + '"]').parent() selector.

Finally, if the MIME type of the response is set correctly you shouldn't need to manually call JSON.parse(data)