Question

我在jQuery中有两个函数，当单击输入表单的提交按钮或在表单上按下“Enter”键时，它们都提交相同的AJAX函数。我有2个相同的表单，ID为“reserve_email_1”和“reserve_email_2”。

如何组合if语句的条件，所以我不需要重复相同的AJAX调用4次？

非常感谢，

主要功能：

$(function(){

  $('#subscribe_1').click(function(){ 

     $("#subscribe_1").text('Sending……');

    var email = $('#reserve_email_1').val();
    var name = $('#reserve_requirement_1').val();

      var regex_email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      if (regex_email.test(email)||email.match(/^\d+$/))
      {

      $.ajax({
          type:"POST",
          url: base_url + "interview/reserve",
          data:{email : email, interview_id: interview_id, name: name}, 
          dataType: "json",
          success: function(data,status){
            if(data.state == 'succ')
            {
              $("#subscribe_1").text(data.msg+'！');
              $('#reserve_email_1').attr('readonly', true);
            }
            else
            {
              $("#subscribe_1").text(data.msg);  
            }
    }
      });

  }

  else
  {
  $("#subscribe_1").text('');
  }

  }); 
 });
 //end of subscribe part 1

并且对于用户按下“enter”的条件，我只需将顶部修改为：

 //beginning of subscribe on subscribe page part 1 with enter key
 $(function(){

  $("#reserve_email_1").bind('keyup', function(event){ 
   if(event.keyCode == 13){ 

     event.preventDefault();

其余的保持不变。但是我在组合这两个条件时遇到了麻烦（“点击按钮”和“按下回车”），所以我不必再次重写整个ajax动作。

由于我有另一个名为reserve_email_2的相同表单，它调用了完全相同的函数，因此情况更加复杂。

非常感谢，

P.S。我之前发过这个问题，但没有得到答案。结果，我清理了我的短语，并希望它更容易解决。

Answer 1

您真的不需要复制代码。首先，您不应该使用click事件进行表单提交，还有一个名为onsubmit的专用表单事件。好处是显而易见的 - 它将在按下提交按钮和按Enter键时触发。所以在你的表格中会是：

<form class="subscribe-form">
    <input type="text" name="email" class="subscribe" />
    <button type="submit" class="btn-subscribe">Send</button>
</form>

JS成为：

$('.subscribe-form').submit(function (e) {

    e.preventDefault();

    var $btn = $(this).find('.btn-subscribe');
    $btn.text('Sending……');

    var $email = $('.subscribe');
    var email = $email.val();
    var name = $('.requirement').val();

    var regex_email = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (regex_email.test(email) || email.match(/^\d+$/)) {

        $.ajax({
            type: "POST",
            url: base_url + "interview/reserve",
            data: {
                email: email,
                interview_id: interview_id,
                name: name
            },
            dataType: "json",
            success: function (data, status) {
                if (data.state == 'succ') {
                    $btn.text(data.msg + '！');
                    $email.attr('readonly', true);
                } else {
                    $btn.text(data.msg);
                }
            }
        });

    } else {
        $btn.text('Send');
    }

});

因此它会自动适用于.subscribe-form类的所有表单。要使其可重复使用，请将相同的类添加到电子邮件字段，例如class="subscribe"。

结合if单击按钮的语句条件并在表单上按下“enter”键

1 个答案: