单击或按Enter键的按钮

时间:2014-01-17 18:43:18

标签: javascript jquery

我只能通过创建2个单独的事件来获得工作按钮:

 $('#loginSubmit').click (function ()
 {
            var userName = $('#userName').val();
            var password = $('#password').val();
                            event.preventDefault();
                            $.ajax({
                                            type: "POST",
                                            url: "auth.php",
                                             data:"userName="+userName+"&password="+password,
                                            success: function(result)
                                            {
                                                    //$('#mainBody').html(result);
                                                    window.location.replace('chooseGroup.php');
                                            }
                                    })
 });


 $('input').keypress(function(event)
 {
   if (event.which == 13) {

            var userName = $('#userName').val();
            var password = $('#password').val();
                            event.preventDefault();
                            $.ajax({
                                            type: "POST",
                                            url: "auth.php",
                                            data: "userName="+userName+"&password="+password,
                                            success: function(result)
                                            {
                                                    //$('#mainBody').html(result);
                                                    window.location.replace('chooseGroup.php');
                                            }
                                    })
                    }
    })
    });

HTML:

 <div class='Lrow'><input type='button' id='loginSubmit' value='Login'></div>

我知道可能有更好的方法。我很乐意听到它。无论如何,如果我使用mozilla浏览器,在按键功能中“事件”是未定义的。这在chrome中运行良好。有什么想法吗?

3 个答案:

答案 0 :(得分:4)

将公共代码放入函数中。

var mySubmitFunction (event) {
    //the code
}

$('#loginSubmit').on("click", mySubmitFunction );
$('input').keypress(function(event){
    if (event.which == 13) {
        mySubmitFunction(event);
    }
});

但是没有收听点击/输入键有更好的方法。更好的方法是让表单按照自己的意愿行事。

在您正确撰写时,表格将在回车时提交。您只需添加提交按钮和onsubmit事件。您取消了那里的提交并进行Ajax调用。设置要提交的按钮类型,它应该工作。奖励是如果JS被禁用,表单仍然提交给服务器。

$("#YourForm").on("submit", function(event){  /* code here */ });

答案 1 :(得分:0)

将您的代码放入函数Eg:ajaxSubmit()然后使用jquery on来调用您的函数

function ajaxSubmit(){
    var userName = $('#userName').val();
    var password = $('#password').val();
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "auth.php",
        data: "userName="+userName+"&password="+password,
        success: function(result){
            //$('#mainBody').html(result);
            window.location.replace('chooseGroup.php');
        }
    });
}

$('#loginSubmit').on("click", ajaxSubmit );

$('#loginSubmit').on("click", function(event){
    if (event.which == 13) {
        ajaxSubmit(event);
    }
});

答案 2 :(得分:0)

On方法将一个或多个参数作为事件名称,如下所示:

$('#loginSubmit').on("click keypress", function(event){

  if (event.type == "keypress" ) {
     if(event.which == 13)
     {
        put your code here or call function
     }
  }
 else//click event
  {
        put your code here or call function
  }

});