填写所有字段后提交表格

凯瑟琳·米歇尔

当用户单击导航上的一个名为“订阅”的按钮后,我的标题上方就会出现一个表单。

当用户单击此按钮时,订阅表单将在页眉顶部打开。
我正在尝试使用它,以便用户在填写所有字段之前不能提交表单。

使用我现在编写的代码,当用户单击“订阅”时,该表单甚至都无法打开-没有任何反应。

以前,一切正常,但是如果不填写任何内容,表单仍会提交。

如何更改我的代码,以便在用户单击“订阅”按钮时再次打开订阅表单;如何获取它,以便在所有字段都填满之前不能提交表单?

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 $formSubmit = $('#signup-submit'),
  $signupForm = $('.form-show'),
  $formReplace = $('#thank-you');

$formReplace.hide();

if (!$formSubmit.valid()) {
  return false;
} else {
  $formSubmit.on('click', function() {
    $signupForm.hide();
    $formReplace.show();
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

克尔兹斯托夫·贾尼斯泽夫斯基

干得好

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>

那么它是怎样工作的?

该方法实际上非常简单。

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;
}

这条线

var empty = $(this).find("input, select, textarea").filter(function() {
  return this.value === "";
});

assignes变量empty所有inputselecttextarea领域不具有任何价值,他们ERGO是空的。

接下来我们检查empty可变长度的长度,告诉我们有多少个空字段。

如果等于或小于0,则表示没有空字段,因此我们可以提交表单。

如果不是(大于0),则表示仍然有空字段,因此我们返回falseergo没有任何反应。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

填写完所有字段后如何提交JavaScript

强制用户在启用表单提交之前填写所有字段

除非所有字段都填写,否则停止提交表单

提交前如何填写所有输入字段

提交后删除重力表格文件附件但保留所有其他字段?

填写所有Google输入字段后提醒“嗨”

为什么我的表格显示填写所有字段,即使我填写了它们

仅在所有字段均已填写时启用提交按钮

VBA填写微软表单,但提交时所有字段都是空白

为什么在填写所有字段之前重新启用我的提交按钮?

如何禁用表单提交按钮,直到所有输入字段均已填写?ReactJS ES2015

填写后如何使用Selenium Python提交角度表格

提交 React js 后清除所有字段

填写完所有必填字段后使用 Bootstrap Modal

仅在填写所有输入字段后启用元素。可重用功能

填写所有必填字段后如何更改按钮值

填写表单字段后启用提交按钮

仅当填写了表单的所有必填字段时,如何更改提交表单按钮的值(JS)

填写第一个表格并单击提交按钮后,显示“隐藏”表格

在 Django 中填写所有字段时“此字段是必需的”

阻止提交订单而不填写所有输入内容?

提交后清除有效表格

如何提交所有克隆的表格?

打开pdf时,所有可填写的字段均会清除

如何让Firefox填写所有表单字段?

如何确保所有字段都填写了php?

Selenium一次填写所有输入字段Java

提交表单angularjs后,对所有无效字段显示红色边框

提交一次后,使所有输入字段保持原始状态