输入字段为空时禁用按钮在javascript中不起作用答案

【问题标题】：disabling button when input field is empty not working in javascript输入字段为空时禁用按钮在javascript中不起作用
【发布时间】：2020-04-27 18:40:09
【问题描述】：

当该字段为空时，当用户键入仅应显示的名称时，我试图禁用我的下载按钮。因为无需输入文本，用户也可以下载图像。我已经完成了以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">




<div class="container">
  <div style="margin-top: 5%; " class="row">

    <?php
            require('db_config.php');
$id=$_GET['editid'];

            $sql = "SELECT * FROM image_gallery where id='$id'";
            $images = $mysqli->query($sql);


            while($image = $images->fetch_assoc()){


            ?>
      <div style="margin-left: 5%;" class="col-md-5"><canvas id="imageCanvas"></canvas></div>




      <div style="margin-left: 2%; margin-top: 10%;" class="col-md-5 col-sm-8">


        <div class="modal-content">
          <div class="modal-header">
            <h4 class="something"><span class="sims">Card Name: &nbsp</span>
              <?php echo $image['title']; ?>
            </h4>
            <div class="modal-body">


              <form method="post" action="" id="form_name">
                <div class="row">
                  <div class="col-md-12">
                    <input class="lolan" type="text" id="name" placeholder="Full Name" required />
                    <!-- <label for="name" class="form__label">Full Name</label> -->
                  </div>
                  <div id="chumma" class="col-md-12">

                    <button id="download" type="submit" onclick="download_image()" name="button" value="Download" class="btn btn-primary">Download</button>


                  </div>
                </div>
              </form>



            </div>
          </div>
        </div>

      </div>

  </div>
</div>





<script type="text/javascript">
  var text_title = "Heading";

  var canvas = document.getElementById('imageCanvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  // img.crossOrigin = "anonymous";

  window.addEventListener('load', DrawPlaceholder)

  function DrawPlaceholder() {
    img.onload = function() {
      DrawOverlay(img);
      DrawText(text_title);
      DynamicText(img)
    };
    img.src = 'uploads/<?php echo $image['
    image '];?>';

  }

  var canvas = document.getElementsByTagName('canvas')[0];
  canvas.width = 500;
  canvas.height = 500;


  function DrawOverlay(img) {

    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);


    ctx.fillStyle = 'rgba(230, 14, 14, 0)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  function DrawText(text) {
    ctx.fillStyle = "black";
    ctx.textBaseline = 'middle';
    ctx.font = "50px 'Montserrat'";
    ctx.fillText(text, 150, 250);
  }

  function DynamicText(img) {
    document.getElementById('name').addEventListener('keyup', function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      DrawOverlay(img);
      text_title = this.value;
      DrawText(text_title);
    });
  }


  function download_image() {
    var canvas = document.getElementById("imageCanvas");
    image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    var link = document.createElement('a');
    link.download = "my-image.png";
    link.href = image;
    link.click();
  }
</script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    validate();
    $('#name').change(validate);
  });

  function validate() {
    if ($('#name').val().length > 0 && {
        $("#download").prop("disabled", false);
      }
      else {
        $("#download").prop("disabled", true);
      }
    }
</script>


<?php } ?>

但这不会使按钮在输入为空时禁用。谁能告诉我我的代码有什么问题。提前致谢

【问题讨论】：

标签： javascript php html sql button

【解决方案1】：

您的代码有一些语法错误，您应该使用keyup 事件：

$(document).ready(function() {
    validate();
    $('#name').keyup(validate);
});

function validate() {
    if ($('#name').val().length > 0) {
        $("#download").prop("disabled", false);
    }
    else {
        $("#download").prop("disabled", true);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name">
<button id="download">Download</button>

【讨论】：

【解决方案2】：

我注意到您的 JavaScript 代码中有两件事：

$('#name').change(validate); 仅在您退出（模糊）该字段时触发。
相反，您可以使用：
$('#name').keyup(validate);

有语法错误：
if ($('#name').val().length > 0 && {
你应该像这样关闭括号：
if ($('#name').val().length > 0 ) {

希望这会有所帮助！

【讨论】：