时间戳

首页 > 解决方案 > 如何为特定的输入按钮指定动作属性？

javascript - 如何为特定的输入按钮指定动作属性？

问题描述

我有一个表单，其中有 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>

标签： javascriptphpjquerysession

解决方案

听起来表单正在提前提交，因为您的输入可能会触发forms submit 方法。

我们可以通过使用buttons 来包装我们的增量和减量操作（将您的onclick事件处理程序附加到这些按钮）来简化它，并使用单个input来保存每个表单字段的值（您的事件处理程序将更改这些inputs上的值）。您可以禁用或隐藏这些inputs 以确保对表单数据的更改必须通过您的事件处理程序并且不能直接输入到input.

button默认情况下，元素会尝试提交它的父form元素，因此您需要使用它type="button"来防止这种情况。

然后，当您的数据准备好提交时，提供单个button或input带有type="submit".

这也可能会清理您在 php 上下文中收到的有效负载，因为该form操作将尝试包装每个input及其值。看来您只对 感兴趣$price，所以让我们确保您的表单仅对该数据进行编码。

您的每个问题的标记示例如下所示：

<input id="my-input-1" type="number" value="0" disabled>
<button type="button" name="increment-my-input-1">
  <img src="/my-plus-button-image.png" />
</button>
<button type="button" name="decrement-my-input-1">
  <img src="/my-minus-button-image.png" />
</button>

推荐阅读