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

Question

我创建了一个表单，它使用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 } ?>

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

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

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