Fatal编程技术网
  • javascript/
  • Javascript 禁用提交按钮，直到填写字段

Javascript 禁用提交按钮，直到填写字段

javascript forms button

Javascript 禁用提交按钮，直到填写字段,javascript,forms,button,disabled-control,Javascript,Forms,Button,Disabled Control,我在3个字段填充后启用按钮时遇到一些问题。我想在填写完所有3个字段后启用Submit按钮。它在页面加载时被成功禁用，但在填写字段后不会变为启用。提前感谢您的帮助 <div class="contact-form"> <form id="contact-form" method="post" action="contact-form-handler.php"> <input name="companyname" type="text" id="companyNa

我在3个字段填充后启用按钮时遇到一些问题。我想在填写完所有3个字段后启用Submit按钮。它在页面加载时被成功禁用，但在填写字段后不会变为启用。提前感谢您的帮助

<div class="contact-form">
 <form id="contact-form" method="post" action="contact-form-handler.php">
  <input name="companyname" type="text" id="companyName" placeholder="  Company Name">
  <br>
  <input name="name" type="text" id="contactName" placeholder="  Contact Person">
  <br>
  <input name="email" type="email" id="Email" placeholder="  Your Email">
                        <br>
                        <input type="tel" id="Phone" name="Phone" placeholder="  Phone Number">
                        <br>
                        <textarea name="message" class='form-control' placeholder="  Write your message here..." style="white-space:pre-wrap; height:200px;width:500px;" row="4"></textarea>
                        <br>
                        <button type="submit" name="form[Submit]" id="Submit" class="rsform-submit-button" onClick="alert('Form submitted');">SEND MESSAGE</button>
                    </form>
                </div>

                <script>
                    function myFunction() {
                            alert("Your message has been sent!");
                    }

                    jQuery("#Submit").prop('disabled', true);

                  var toValidate = jQuery('#companyName, #Email, #contactName'),
                      valid = false;
                  toValidate.keyup(function () {
                      if (jQuery(this).val().length > 0) {
                          jQuery(this).data('valid', true);
                      } else {
                          jQuery(this).data('valid', false);
                      }
                      toValidate.each(function () {
                          if (jQuery(this).data('valid') == true) {
                              valid = true;
                          } else {
                              valid = false;
                          }
                      });
                      if (valid === true) {
                          jQuery("#Submit").prop('disabled', false);
                      } else {
                          jQuery("#Submit").prop('disabled', true);
                      }
                  });
                </script>
        <br>
        <input type="tel" id="Phone" name="Phone" placeholder="  Phone Number">
        <br>
        <textarea name="message" class='form-control' placeholder="  Write your message here..." style="white-space:pre-wrap; height:200px;width:500px;" row="4"></textarea>
        <br>
        <button type="submit" name="form[Submit]" id="Submit" class="rsform-submit-button" onClick="alert('Form submitted');">SEND MESSAGE</button>
    </form>
</div>

<script>
    function myFunction() {
            alert("Your message has been sent!");
    }

    jQuery("#Submit").prop('disabled', true);

  var toValidate = jQuery('#companyName, #Email, #contactName'),
      valid = false;
  toValidate.keyup(function () {
      if (jQuery(this).val().length > 0) {
          jQuery(this).data('valid', true);
      } else {
          jQuery(this).data('valid', false);
      }
      toValidate.each(function () {
          if (jQuery(this).data('valid') == true) {
              valid = true;
          } else {
              valid = false;
          }
      });
      if (valid === true) {
          jQuery("#Submit").prop('disabled', false);
      } else {
          jQuery("#Submit").prop('disabled', true);
      }
  });
</script>
请尝试以下代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <title>Ilan's Test</title>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="contact-form">
                    <form id="contact-form" method="post" action="#">
                        <input name="companyname" type="text" class="form-control vcheck" id="companyName" placeholder="  Company Name">
                        <br>
                        <input name="name" type="text" class="form-control vcheck" id="contactName" placeholder="  Contact Person">
                        <br>
                        <input name="email" type="email" class="form-control vcheck" id="Email" placeholder="  Your Email">
                        <br>
                        <input type="tel" id="Phone" class="form-control vcheck" name="Phone" placeholder="  Phone Number">
                        <br>
                        <textarea name="message" class='form-control' placeholder="  Write your message here..." style="white-space:pre-wrap; height:200px;width:500px;" row="4"></textarea>
                        <br>
                        <button type="submit" name="form[Submit]" id="submit" class="btn btn-primary" disabled="disabled">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

    <script>
        // On change in any of the fields with the class vcheck we run this function
        $('.vcheck').change(function() {
            // We store the values of each input field in a variable
            var company = $('#companyName').val();
            var name = $('#contactName').val();
            var email = $('#email').val();
            var phone = $('#Phone').val();
            // We check for null (empty) values
            if (company == '' || name == '' || email == '' || phone == '') {
                // When we find something blank set or keep the button to disabled
                $('#submit').attr('disabled', 'disabled');
            } else {
                // When all conditions are met and values are good we enable the button
                $('#submit').removeAttr('disabled');
            }
        });
    </script>
</body>

</html>
主要的问题是，您实际上只检查列表中的最后一个元素。每次通过循环时，都会给valid一个新值。因此，如果最后一个是有效的，那么不管之前检查的状态如何，您都认为整个检查是有效的

为了克服这个问题，如果我们之前在这个迭代器中给它一个值，那么应该检查valid的当前值

function myFunction() {
    alert("Your message has been sent!");
}

jQuery("#Submit").prop('disabled', true);

var toValidate = jQuery('#companyName, #Email, #contactName'), valid = false;

toValidate.keyup(function () {
    if (jQuery(this).val().length > 0) {
        jQuery(this).data('valid', true);
    } else {
        jQuery(this).data('valid', false);
    }

    // this indicates that we haven't assigned a true value to valid yet
    var firstCheck = true;

    toValidate.each(function () {
        // if the current element is valid AND this is either the first check OR the previous checks were also valid
        if (jQuery(this).data('valid') == true && (valid || firstCheck)) {
            valid = true;
        } else {
            valid = false;
        }

        // we've assigned a value to valid, so each next time we will know to check that value in addition to the current element
        firstCheck = false;
    });

    if (valid === true) {
        jQuery("#Submit").prop('disabled', false);
    } else {
        jQuery("#Submit").prop('disabled', true);
    }
});
此答案适用于span或div内的输入

HTML

提交 Javascript

document.getElementByIdbutton.disabled=true； var f=document.getElementById'content'； 函数调用{ iff.innerHTML！=null document.getElementByIdbutton.disabled=false；//关闭 iff.innerHTML== document.getElementByIdbutton.disabled=true； }
例如，您是否使用浏览器F12工具调试JavaScript代码？