下载按钮和输入字段在 JavaScript 中单击按钮时没有响应

Posted 2023-05-09

【中文标题】下载按钮和输入字段在 JavaScript 中单击按钮时没有响应

【英文标题】：Download button and input field not responding on button click in JavaScript

【发布时间】：2020-01-09 08:47:05

【问题描述】：

我创建了一个表单，它使用 php、sql 和 javascript 从数据库中显示图像。完整代码如下：

<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 class="col-md-5"><canvas id="imageCanvas"></canvas></div>



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


        <div class="modal-content">
          <div class="modal-header">
            <h4 class="something">
              <?php echo $image['title']; ?>
            </h4>
            <div class="modal-body">


              <form method="post" action="">
                <div class="row">
                  <div class="col-md-12">
                    <input type="text" id="name" placeholder="Name" required />
                  </div>
                  <div class="col-md-12">
                    <input id="download" class="mebutton" type="button" name="button" value="Download">
                  </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, 50, 50);
  

  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);
    );
  


  document.getElementById('download').onclick = function download() 
    convertToImage();
  
</script>


<?php  ?>

问题是表单没有响应，当我将输入字段留空时，输入字段没有显示“必填”错误，并且按钮也没有响应。我的代码有什么问题？

【问题讨论】：

仅在表单提交时通过错误的必需属性，但在这里您使用点击功能将不起作用

@dhamo 我该如何解决它

convertToImage() 在哪里？？

【参考方案1】：

<form method="post" action="" id="form_name">
                <div class="row">
                  <div class="col-md-12">
                    <input type="text" id="name" placeholder="Name" required />
                  </div>
                  <div class="col-md-12">
                    <input id="download" class="mebutton" type="submit" name="button" value="Download">
                  </div>
                </div>
              </form>


<script>
$("#form_name").submit(function()

    convertToImage();
return false

);

</script>

【讨论】：

这不是下载图片，只是重新加载

上面的代码只是验证你的表单。一旦你的表单有效意味着它会调用 convertToImage() 。 convertToImage() 它返回什么？？

对于重载问题，我添加了 return false 声明

当我添加 false 时，它​​不会加载我的图像

它没有加载年龄，它给出了空白图像

【参考方案2】：

如果你想使用需要，你必须有这样的按钮：

 <button type="submit"  name="button" value="Download" class="btn btn-primary" onclick="convertToImage()">Submit</button> 

或者您可以使用 Jquery 来查看输入是否为空，并发出如下警告：

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
$('#download').click(function download() 
       if($.trim($('#name').val()) == '')
      alert('Input can not be left blank');
   else
    convertToImage();
   
  );
</script>

【讨论】：

我使用了你的代码，但是按钮没有下载我页面中的图像

您使用第一选择还是第二选择？

第二。但它没有下载

它也没有下载图片

按钮可以使用，但无法下载图片