Home How to use AJAX for different functions when more buttons included in the form

Questions

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

August 7, 2022

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>