使用 jQuery 时提交表单不起作用

Posted 2023-05-09

【中文标题】使用 jQuery 时提交表单不起作用

【英文标题】：Submit form not working when using jQuery

【发布时间】：2018-10-25 23:49:18

【问题描述】：

我有一个表单，当用户单击提交时，我希望隐藏表单并显示感谢消息。不幸的是，我拥有的代码不起作用，我不知道为什么。我认为这可能与 jQuery 有关，所以我想尝试使用 vanilla JS 重新编写此函数，但我不确定如何。

这是函数的最后一部分，if (empty.length)，hide form，showthanks you message，这给我带来了问题。其他一切工作正常，所以我想尝试用 javascript 编写这个函数，或者尝试使用 jquery 的另一种方式使其工作。问题是它在我的代码中不起作用，但是当我在 jsfiddle 中打开它时，它不只是隐藏它打开一个新页面的表单并且我得到一个错误。我不希望用户被引导到新页面，我只想关闭表单并显示感谢信息。我对此很陌生，所以如果我的代码混乱，我深表歉意。

更新：我真的认为这里的问题是 jQuery，我可以用纯 JS 编写它吗？可以解决它吗？

var $subscribe = $('#click-subscribe');
var $subscribeContent = $('#subscribe-content');
var $subscribeClose = $('#subscription-close');

$subscribeContent.hide();

$subscribe.on('click', function(e) 
  e.preventDefault();
  $subscribeContent.slideToggle();
);

$subscribeClose.on('click', function(e) 
  e.preventDefault();
  $subscribeContent.slideToggle();
)

var $form = $('#signup-form'),
  $signupForm = $('.form-show'),
  $formReplace = $('#thank-you');

$formReplace.hide();


$form.on('submit', function() 
  var empty = $(this).find("input, select, textarea").filter(function() 
    return this.value === "";
  );

  if (empty.length <= 0) 
    $signupForm.hide();
    $formReplace.show();
   else 
    return false;
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click-subscribe">Show / hide form</button>
<div id="subscribe-content">
  <div class="subscription-signup">
    <div class="subscription-close" id="subscription-close"></div>
    <div class="email-signup">
      <p class="cat-title subscription-text">lorem ipsum</p>
      <p class="subscription-text">lorem ipsum</p>
      <p class="subscription-text">lorem ipsum</p>

      <div class="subscription-form">
        <form id="signup-form" class="form-show" name="signup-form" method="post" action="$URLUtils.url('Newsletter-SubscribeMobile')">
          <div class="form-row salutation header">
            <label for="salutation">Title</label>
            <div class="chzn-row valid salutation">
              <select id="title" name="title" class="chzn-global-select input-select optional required">
                <option value="">--</option>
                <option value="Mr">Mr.</option>
                <option value="Mrs">Mrs.</option>
                <option value="Ms">Ms.</option>
                <option value="Miss">Miss</option>
              </select>
            </div>
          </div>

          <div class="form-row required">
            <label for="firstname">
              <span aria-required="true">First Name</span>
              <span class="required-indicator">*</span>
            </label>
            <input class="input-text required" id="firstname" type="text" name="firstname" value="" maxlength="500" autocomplete="off">
          </div>

          <div class="form-row required">
            <label for="lastname">
              <span aria-required="true">Surname</span>
              <span class="required-indicator">*</span>
            </label>
            <input class="input-text required" id="lastname" type="text" name="lastname" value="" maxlength="500" autocomplete="off">
          </div>

          <div class="form-row required">
            <label for="signup-email" style="display:none;">Email</label>
            <input class="header-signup-email" type="text" id="signup-email-header" name="signup-email" value="" placeholder="Email" />
          </div>
          <div class="form-row text-center">
            <input type="submit" name="signup-submit" id="signup-submit" class="subscribe-submit" value="Submit" />
          </div>
        </form>

        <div id="thank-you">
          <p>Thanks for subscribing!</p>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

你能把你所有的相关代码放到一个jsfiddle中吗？这会让我们更容易。

我看到的问题是，如果您进入 if 的 empty.length <= 0 真相部分，您并没有取消表单提交，因此页面将转移到操作你的形式。当用户离开他们执行提交的页面时，试图在那里显示一些额外的东西并没有真正的意义。

@Taplar 对不起，我对你的意思感到困惑。我将如何解决这个问题？我也尝试编辑并点击 ctrl+m 但没有任何反应。

但是关于我在说什么。当您提交表单时，除非您对他们做一些特别的事情，否则他们通常会离开页面。如果我可能会问，您对 html 和表单行为的熟悉程度如何？

@KatherineMichelle 您的jQuery 代码在哪里放置在您的 html 文件中。

【参考方案1】：

我认为其他一些 javascript/jQuery 代码在运行代码时出现问题，为了简单的解决方案，请将您的代码作为插件并像下面这样调用它。

创建名为 validation.js 的新 js 文件

(function($)
    $.fn.validation = function()        
        var $subscribe = $('#click-subscribe');
        var $subscribeContent = $('#subscribe-content');
        var $subscribeClose = $('#subscription-close');

        $subscribeContent.hide();
        $subscribe.on('click', function(e) 
            e.preventDefault();
            $subscribeContent.slideToggle();
        );
        $subscribeClose.on('click', function(e) 
            e.preventDefault();
            $subscribeContent.slideToggle();
        );

        var $form = $('#signup-form'), $signupForm = $('.form-show'), $formReplace = $('#thank-you'); $formReplace.hide();
       this.on('submit', function(e)
            var empty = $(this).find("input, select, textarea").filter(function() 
                return this.value === "";
            );
            if(empty.length == 0)
                $signupForm.hide();
                $formReplace.show();
            
            e.preventDefault();
        );        
    ; 
)(jQuery);

现在，请拨打validation.jshead，如下所示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="validation.js"></script>
<script type="text/javascript">
$(function()
    $('#signup-form').validation();
);
</script>

【讨论】：

@KatherineMichelle，我已经更新了答案，现在检查一下