javascript - 在填写所有表单输入之前禁用 jquery 提交按钮

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>