Как указать атрибут действия для c кнопок ввода?

Question

У меня есть форма, в которой у меня есть 2 кнопки, которые увеличивают и уменьшают значения, введенные пользователем. Форма имеет атрибут действия, который отправляет все данные формы в другой файл 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>

Answer 1

Звучит так, как будто форма отправляется рано, потому что ваши входные данные, возможно, запускают метод отправки form.

Мы можем значительно упростить его, используя button s, чтобы обернуть наш прирост и уменьшение действия (прикрепите обработчики событий onclick к этим кнопкам) и используйте один input для хранения значения для каждого поля формы (ваши обработчики событий будут изменять значения в этих input с). Вы можете отключить или скрыть эти input s, чтобы гарантировать, что изменения в данных формы должны проходить через ваши обработчики событий и не могут быть введены непосредственно в элементы 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>

Answer 2

Может быть вот так:

$(document).ready(function(){
	$('.cls-btn-plus-minus').click(function(){
		var cur_val = $(this).parent().find('.cls-q').val();
		cur_val = parseInt(cur_val)||0;
    var role = $(this).attr('role');

		if(role == 'plus'){
			if(cur_val>= 0 && cur_val<5) {
			  cur_val++;
			  $(this).parent().find('.cls-q').val(cur_val);
			}
		}

		if(role == 'minus'){
			if(cur_val> 0 && cur_val<6) {
			  cur_val--;
			  $(this).parent().find('.cls-q').val(cur_val);
			}
		}

	});
});

.cls-btn-plus-minus{
   height:50px;
   width:50px;
   cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="cart.php">
  <div class="divStyle">
    <!--img src="img.png" height="100px" width="150px"-->
    <br>
    book1
    <br><br>
    price1
    <br>
    <div class="inputStyle">
      <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">  
      <input type="number" class="cls-q" min="0" id="Q1" name="Q1" placeholder="Enter Quantity">
            <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
      <br>
    </div>
  </div>

  <div class="divStyle">
    <!--img src="img.png" height="100px" width="150px"-->
    <br>
    book2
    <br><br>
    price2
    <br>
    <div class="inputStyle">
            <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">  
      <input type="number" class="cls-q" min="0" id="Q2" name="Q2" placeholder="Enter Quantity">
      <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
      <br>
    </div>
  </div>

  <div class="divStyle">
    <!--img src="img.png" height="100px" width="150px"-->
    <br>
    book
    <br><br>
    price3
    <br>
    <div class="inputStyle">
            <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/minus.png" role="minus">  
      <input type="number" class="cls-q" min="0" id="Q3" name="Q3" placeholder="Enter Quantity">
      <img class="cls-btn-plus-minus" src="https://img.icons8.com/pastel-glyph/64/000000/plus.png" role="plus">
      <br>
    </div>
  </div>
  <br>
  <br>
<input type="submit" id="submit1" name="submit1" value="GO">
</form>