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

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

var text_title=“Heading”；
var canvas=document.getElementById（'imageCanvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
//img.crossOrigin=“匿名”；
window.addEventListener（'load'，DrawPlaceholder）
函数DrawPlaceholder（）{
img.onload=函数（）{
绘图覆盖（img）；
DrawText（文本和标题）；
动态文本（img）
};
img.src='uploads/'；
}
var canvas=document.getElementsByTagName（'canvas'）[0]；
画布宽度=500；
高度=500；
功能绘图覆盖（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）；
}
函数DrawText（文本）{
ctx.fillStyle=“黑色”；
ctx.textb基线='中间'；
ctx.font=“50px‘蒙特塞拉特’”；
ctx.fillText（文本，50,50）；
}
函数动态文本（img）{
document.getElementById（'name'）。addEventListener（'keyup'，function（）{
clearRect（0，0，canvas.width，canvas.height）；
绘图覆盖（img）；
text_title=this.value；
DrawText（文本和标题）；
});
}
document.getElementById（'download'）。onclick=函数下载（）{
convertToImage（）；
}

如果您想使用所需的，您必须有如下按钮：

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

$（'#下载'）。单击（函数下载（）{
if（$.trim（$（'#name'）.val（））==''）{
警报（“输入不能为空”）；
}否则{
convertToImage（）；
}
});

$（“#表单名称”）.submit（函数（）{
convertToImage（）；
返回错误
});

只有在表单提交时才出现必需的属性错误，但在这里您使用的是单击功能，它不会出现错误work@dhamo我如何修复它convertToImage（）在哪里？我使用了你的代码，但按钮没有在我的页面下载图像。你使用第一个或第二个选项？第二个。但是它没有下载它也没有下载图像按钮正在工作但它没有下载图像这不是下载图像，它只是重新加载上面的代码只是验证你的表单。一旦你的表单有效，它将调用convertToImage（）。convertToImage（）返回的内容？？对于重新加载问题，我添加了return false语句当我添加false时，它不会加载我的图像它不会加载o，age，它会给出空白图像

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