Question

禁用jquery提交按钮，直到填写完所有表单输入为止。

我正在与Jquery一起工作，我一直在尝试实现禁用表单提交按钮，直到填满整个表单输入为止。我已经尝试过这里找到的大多数解决方案，但不能解决问题。谢谢

$('.postbtn_video').click(function() {

  var element = $(this);
  var ID = element.attr('id');

  var msg = $('#status').val();
  var title = $('#title').val();
  var video = $('#video').val();
  var stat = $('#stat').val();

  if (title == "") {

    alert('Please Enter video Post Title?');

  } else if (msg == "") {
    alert('Please Enter Video Post Description');

  } else if (video == "") {
    alert('Enter Youtube Video Link');


  } else if (stat == "") {
    alert('Select Status');

  } else {

    var postData = "post=" + msg + "&title=" + title + "&video=" + video + "&stat=" + stat;

    $("#loader").show();
    $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading Update...</span>');

    $.ajax({

      type: "POST",
      url: "posts.php",
      data: postData,
      cache: false,
      success: function(html) {

        $("ul#updatepost").prepend(html);
        $("ul#updatepost li:first").slideDown("slow");
        $('#status').val('');
        $('#loader').hide();

      }

    });

  }

  return false;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="statusform">
  <label>Video Post Title </label>
  <input type="text" name="title" id="title" class="form-control" placeholder="Enter Post Title">

  <p></p>

  <label>Video Post Description</label>
  <textarea style="width:100%" name="status" class="status form-control" id="status" placeholder="Share what you like " title="What's on your mind?">
    </textarea>

  <label>Youtube Video Link</label>
  <input style="width:100%" name="video" class="form-control" id="video" placeholder="Youtube Video Link">



  <label>status</label>
  <select style="width:100%" name="stat" class="form-control" id="stat">
    <option value="ok">ok</option>
  </select>

  <p></p>

  <input name="post" type="submit" value="Share Video Updates" class="postbtn_video" style="background:black;color:white; height:30px;float:left" />

</form>

Answer 1

首先将disabled="disabled"应用于按钮：

<input name="post" type="submit" value="Share Video Updates" class="postbtn_video" disabled="disabled" />

第二，您需要一个函数来检查每个字段是否为空！

检查以下代码：

$(document).ready(function(){
    $('form > input').keyup(function() {
                
        var empty = false;
        $('form > input').each(function() {
if(!empty){ // this will only check next inputs if empty is false, but once its set to true no further check will be made
            if ($(this).val() == '') {
                empty = true;
            }
}
        });
        if (empty) {
            $('.postbtn_video').attr('disabled', 'disabled');
        } else {
            $('.postbtn_video').removeAttr('disabled');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" name="statusform">
    <label>Video Post Title </label>
    <input type="text" name="title" id="title" class="form-control" placeholder="Enter Post Title">

    <p></p>

    <label>Video Post Description</label>
    <textarea style="width:100%" name="status" class="status form-control" id="status" placeholder="Share what you like " title="What's on your mind?"></textarea>

    <label>Youtube Video Link</label>
    <input style="width:100%" name="video" class="form-control" id="video" placeholder="Youtube Video Link">



    <label>status</label>
    <select style="width:100%" name="stat" class="form-control" id="stat">
        <option value="ok">ok</option>
    </select>

    <p></p>

    <input name="post" type="submit" value="Share Video Updates" class="postbtn_video" disabled="disabled" />

</form>

Answer 2

首先，您需要默认为input按钮添加一个禁用的属性，例如：

<input disabled name="post" type="submit" value="Share Video Updates" class="postbtn_video" style="background:black;color:white; height:30px;float:left" />

然后在您的jquery中，您需要启动一个验证函数，该函数将检查所有输入，如果它们不为空，则可以从disabled按钮中删除input属性，例如：

 $(document).on('keyup', "input:not([type='submit']", function () {

          //set it to true by default
          var valid = true;

     //getting all the inputs except input submit
      var inputTextboxes = $("input:not([type='submit'])");

      inputTextboxes.each(function(e) {

     //it enters this only if the valid is true for any one value, if valid is set to false at any point it won't check it for next inputs - works for first time
    if (valid != false){

        if ($(this).val()) {
          valid = true;
        }else{
          valid = false;
        }
    }
else{
    break; //breaks the loop
     }
      });

      if (valid) {
        $("input[type=submit]").prop("disabled", false);
      } else {
        $("input[type=submit]").prop("disabled", true);
      }
    }

希望这会有所帮助

Answer 3

也许这会有所帮助。您可以操纵“表单禁用”属性：

var checkboxes = document.getElementsByTagName('input');

//check all check all input elements to see if they are check-boxes
for (var i = 0; i < checkboxes.length; i++) {
//If the input is a check-box run script else skip over
    if (checkboxes[i].type == 'checkbox') {
    //If it is a check-box ensure the box is unchecked
    checkboxes[i].checked = false;
    }
}

$(document).ready(function()
{
  //define Element by ID and create variable
    var $checked = $('#field_human');

  //define default state for attribute before handler function trigger
  $("#submit").attr("disabled", !$checked.checked)
  //On element handler trigger define function to execute each time handler is triggered
  $checked.click(function()
  {
      //State to define instance on method 
      if ($checked.prop('checked'))
      {
          //return true
          //remove element attribute state 'disabled'
          $('#submit').removeAttr('disabled');
      }
      if($('#contactForm input').val() != '')
      {
        $('#submit').removeAttr('disabled');
      }
      
      else {
          //return false
          //set element attribute state 'disabled'
          $("#submit").attr("disabled", !$checked.checked);
      }
      //return to ready-state to wait for handler to trigger again
      return;
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<form class="form-horizontal" role="form" method="post" action="" id="contactForm" name="contactForm">
  <div class="form-group">
    <label for="inputblk" class="col-sm-3 control-label">Input Block</label>
    <div class="col-sm-9">
      <input name="inputblk" class="form-control" />
    </div>
  </div>
  <div class="form-group">
    <label for="human" class="col-sm-3 control-label">Are You <strong><u>Human</u>?</strong></label>
    <div class="col-sm-9">
      <input id="field_human" class="field_human" type="checkbox" name="human" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-9 col-sm-offset-3">
      <button id="submit" name="submit" type="submit" class="btn btn-dark btn-block btn-lg">Send</button>
    </div>
  </div>
</form>

Answer 4

第一：您认为需要的输入，请输入！如下所示：

<input style="width:100%" name="video" class="form-control" id="video" placeholder="Youtube Video Link" required >

第二：基于此属性进行选择，并检查这些输入的值是否不为空。如果这样，请禁用提交按钮。

第三名：将事件监听器设置为具有监听用户输入所需属性的所有输入。

类似这样的东西：

var l = $("[required='']");
function enableSubmit(l) {
    if (l.length == 0) {
        $("[name=post]").removeAttr('disabled');
    } else {
        for (var m = 0; m < l.length; m++) {
            if (l[m].value.length == 0) {
                $("[name=post]").attr("disabled", "disabled");
                return;
            }
        }
        $("[name=post]").removeAttr('disabled');
    }
}
for (var m = 0; m < l.length; m++) {
    l[m].addEventListener('input', function () {
        enableSubmit(l);
    });
}

禁用jQuery提交按钮，直到填写完所有表单输入

4 个答案: