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

Question

我有一个表单，其中有 2 个按钮，用于增加和减少用户输入的值。该表单有一个 action 属性，它将表单的所有数据发送到另一个 PHP 文件。当我尝试按下按钮时，它只是将我定向到该页面，而不是增加值。我希望按钮增加值，并且当单击提交按钮时，页面应将所有数据发送到其他 PHP 页面。

提前致谢!!!

the buttons are images

I have not included the PHP code

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

Answer 1

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

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

默认情况下，

button 元素将尝试提交其父 form 元素，因此您需要使用 type="button" 来防止这种情况.

然后，当您的数据准备好提交时，提供一个按钮或带有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>