表单增强与验证——提交按钮（禁用提交按钮）

最新推荐文章于 2023-12-26 14:15:37 发布

原创最新推荐文章于 2023-12-26 14:15:37 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在特定情况下禁用表单的提交按钮，以防止重复提交和确保数据完整。主要涉及脚本初始加载时、表单已提交后的禁用逻辑，并提供了HTML、utilities.js及disable-submit.js的相关示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下情况禁用提交按钮：

脚本初始载入时。（change事件会再脚本被改变时查看是否有值，以此启用提交按钮）
表单被提交后。（防止表单被多次提交）

HTML

            <label for="pwd">New password:</label>
            <input type="password" id="pwd" />
            <input type="submit" id="submit" value="submit" />
     <script src="js/utilities.js"></script>
    <script src="js/disable-submit.js"></script>

utilities.js

// Helper function to add an event listener
function addEvent (el, event, callback) {
  if ('addEventListener' in el) {                  // If addEventListener works
    el.addEventListener(event, callback, false);   // Use it
  } else {                                         // Otherwise
    el['e' + event + callback] = callback;         // CreateIE fallback
    el[event + callback] = function () {
      el['e' + event + callback](window.event);
    };
    el.attachEvent('on' + event, el[event + callback]);
  }
}

// Helper function to remove an event listener
function removeEvent(el, event, callback) {
  if ('removeEventListener' in el) {                      // If removeEventListener works
    el.removeEventListener(event, callback, false);       // Use it 
  } else {                                                // Otherwise
    el.detachEvent('on' + event, el[event + callback]);   // Create IE fallback
    el[event + callback] = null;
    el['e' + event + callback] = null;
  }
}

disable-submit.js

(function(){
  var form      = document.getElementById('newPwd');  // The form
  var password  = document.getElementById('pwd');     // Password input
  var submit    = document.getElementById('submit');  // Submit button

  var submitted = false;                            // Has form been submitted?
  submit.disabled = true;                           // Disable submit button
  submit.className = 'disabled';                    // Style submit button
  console.log(submit.className);
  
  // On input: Check whether or not to enable the submit button
  addEvent(password, 'input', function(e) {         // On input of password
    var target = e.target || e.srcElement;          // Target of event
    submit.disabled = submitted || !target.value;   // Set disabled property
    // If form has been submitted or pwd has no value set CSS to disabled
    submit.className = (submitted || !target.value) ? 'disabled' : 'enabled';
  }); 

  // On submit: Disable the form so it cannot be submitted again
  addEvent(form, 'submit', function(e) {            // On submit
    if (submit.disabled || submitted) {             // If disabled OR sent
      e.preventDefault();                           // Stop form submitting
      return;                                       // Stop processing function
    }                                               // Otherwise continue...
    submit.disabled = true;                         // Disable submit button
    submitted = true;                               // Update submitted var
    submit.className = 'disabled';                  // Update style

    // Demo purposes only: What would have been sent & show submit is disabled
    e.preventDefault();                             // Stop form submitting
    alert('Password is ' + password.value);         // Show the text
  });
}());