我有一个表单,其中有 2 个按钮,用于增加和减少用户输入的值。表单有一个 action 属性,它将表单的所有数据发送到另一个 PHP 文件。当我尝试按下按钮时,它只是将我引导到该页面而不是增加值。我希望按钮增加值,当单击提交按钮时,页面应该将所有数据发送到另一个 PHP 页面。
提前致谢!!!
按钮是图像
我没有包含 PHP 代码
我的 HTML 代码片段-
<form method="POST" action="cart.php">
<div class="divStyle">
<img src="img.png" height="100px" width="150px">
<br>
<?php echo $_SESSION['book1']; ?>
<br><br>
<?php echo $price1; ?>
<br>
<div class="inputStyle">
<input type="image" src="minus.png" width="50px" height="50px" id="minus1" name="minus1"><input type="number" type="button" min="0" id="Q1" name="Q1" placeholder="Enter Quantity"><input type="image" src="plus.png" height="50px" width="50px" id="plus1" name="plus1">
<br>
</div>
</div>
<div class="divStyle">
<img src="img.png" height="100px" width="150px">
<br>
<?php echo $_SESSION['book2']; ?>
<br><br>
<?php echo $price2; ?>
<br>
<div class="inputStyle">
<input type="image" src="minus.png" width="50px" height="50px" id="minus2" name="minus2"><input type="number" type="button" min="0" id="Q2" name="Q2" placeholder="Enter Quantity"><input type="image" src="plus.png" width="50px" height = "50px" id="plus2" name="plus2">
<br>
</div>
</div>
<div class="divStyle">
<img src="img.png" height="100px" width="150px">
<br>
<?php echo $_SESSION['book3']; ?>
<br><br>
<?php echo $price3; ?>
<br>
<div class="inputStyle">
<input type="image" src="minus.png" width="50px" height="50px" id="minus3" name="minus3"><input type="number" type="button" min="0" id="Q3" name="Q3" placeholder="Enter Quantity"><input type="image" src="plus.png" width="50px" height = "50px" id="plus3" name="plus3">
<br>
</div>
</div>
<br>
<br>
<input type="submit" id="submit1" name="submit1">
</form>
我的 Javascript 代码-
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#plus1').click( function() {
var counter = $('#Q1').val();
if (counter>= 0 && counter<5) {
counter++ ;
$('#Q1').val(counter);
}
});
});
$(document).ready(function(){
$('#plus2').click( function() {
var counter = $('#Q2').val();
if (counter>= 0 && counter<5) {
counter++ ;
$('#Q2').val(counter);
}
});
});
$(document).ready(function(){
$('#plus3').click( function() {
var counter = $('#Q3').val();
if (counter>= 0 && counter<5) {
counter++ ;
$('#Q3').val(counter);
}
});
});
$(document).ready(function(){
$('#minus1').click( function() {
var counter = $('#Q1').val();
if(counter>0 && counter<6){
counter-- ;
$('#Q1').val(counter);
}
});
});
$(document).ready(function(){
$('#minus2').click( function() {
var counter = $('#Q2').val();
if(counter>0 && counter<6){
counter-- ;
$('#Q2').val(counter);
}
});
});
$(document).ready(function(){
$('#minus3').click( function() {
var counter = $('#Q3').val();
if(counter>0 && counter<6){
counter-- ;
$('#Q3').val(counter);
}
});
});
</script>