How to specify the action attribute to specific input buttons?

Question

I have a form in which I have 2 buttons which increase and decrease the values entered by the user. The form has an action attribute which sends all the data of the form to another PHP file. When I try to press the button, it just directs me to that page instead of increasing the value. I want the buttons to increase the value and when the submit button is clicked, the page should send all the data to the other PHP page.

Thanks In Advance!!!

the buttons are images

I have not included the PHP code

My HTML Code Snippet-

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

My Javascript Code-

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

score 2 · Answer 1 · answered Jan 11 '20 at 14:34

It sounds like the form is being submitted early because your inputs are perhaps triggering the forms submit method.

We can simplify it a lot by using buttons to wrap our increment and decrement actions (attach your onclick event handlers to these buttons), and use a single input to hold the value for each form field (your event handlers will be changing the values on these inputs). You can disable or hide these inputs to ensure changes to form data must pass through your event handlers and can't be entered directly into the input.

button elements will try and submit it's parent form element by default, so you need to use type="button" to prevent that.

Then, when your data is ready to submit, provide a single button or input with type="submit".

This may also clean up the payload you receive in your php context as well, because the form action will try to wrap up every input and their values. It seems you're only interested in the $price, so let's make sure your form only encodes that data.

An example of the markup for each of your questions could look like this:

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

mscdeveloper · Accepted Answer · 2020-01-11T15:34:32.667

Maybe Like This:

$(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>

Changed buttons to images – mscdeveloper Jan 11 '20 at 15:35 — mscdeveloper, Jan 11 '20 at 15:35

How to specify the action attribute to specific input buttons?

2 Answers2