[FIXED] How to use AJAX for different functions when more buttons included in the form

Issue

I have a model as below in PHP.

<div id="Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"  >Block</h4>
   </div>
   <div class="modal-body">
    <form method="post" id="block_form">
     <label>Number</label>
     <input type="text" name="num_block" id="num_block" class="form-control" readonly/>
     <br />
     <label>Updated By</label>
     <input name="blockedBy" id="blockedBy" class="form-control" readonly/>
     <br />

    
     <input type="hidden" name="employee_id_update" id="employee_id_update" />
     <input  type="submit" name="block1" id="block1" value="Block 1" class="btn btn-success" />
      <input  type="submit" name="block2" id="block2" value="Block 2" class="btn btn-success" />
    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>
   </div>
  </div>
 </div>
</div>

I need to click two different buttons; block1 and block2 and do two different functions after submitting the form. Here is my try

 $('#block_form').on("button1", function(event){  
           event.preventDefault();
            
           alert("clicked Btn1");
            
    });

This is not working and page refreshes only. But when I replace $('#block_form').on("submit", function(event){ I can see it works but I can see the same alert for both buttons since the type submit is same for both buttons. Can someone show me how to do this?

Solution

https://api.jquery.com/on/

// can change ".btn-success" by "#block1, #block2"
$('#block_form').on("click", ".btn-success", function(event){  
   event.preventDefault();
   
   var getBtnID = $(this).attr('id');
   
   alert("clicked " + getBtnID);
      
   if (getBtnID == "block1") {
      // do something
   }
   
   if (getBtnID == "block2") {
      // do something else
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"  >Block</h4>
   </div>
   <div class="modal-body">
    <form method="post" id="block_form">
     <label>Number</label>
     <input type="text" name="num_block" id="num_block" class="form-control" readonly/>
     <br />
     <label>Updated By</label>
     <input name="blockedBy" id="blockedBy" class="form-control" readonly/>
     <br />

    
     <input type="hidden" name="employee_id_update" id="employee_id_update" />
     <input  type="submit" name="block1" id="block1" value="Block 1" class="btn btn-success" />
      <input  type="submit" name="block2" id="block2" value="Block 2" class="btn btn-success" />
    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>
   </div>
  </div>
 </div>
</div>

Answered By - SKJ

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)