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

I have a model as below in PHP.

<div id="Modal" >
 <div >
  <div >
   <div >
    <button type="button"  data-dismiss="modal">&times;</button>
    <h4   >Block</h4>
   </div>
   <div >
    <form method="post" id="block_form">
     <label>Number</label>
     <input type="text" name="num_block" id="num_block"  readonly/>
     <br />
     <label>Updated By</label>
     <input name="blockedBy" id="blockedBy"  readonly/>
     <br />

    
     <input type="hidden" name="employee_id_update" id="employee_id_update" />
     <input  type="submit" name="block1" id="block1" value="Block 1"  />
      <input  type="submit" name="block2" id="block2" value="Block 2"  />
    </form>
   </div>
   <div >
    <button type="button"  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?

CodePudding user response：

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" >
 <div >
  <div >
   <div >
    <button type="button"  data-dismiss="modal">&times;</button>
    <h4   >Block</h4>
   </div>
   <div >
    <form method="post" id="block_form">
     <label>Number</label>
     <input type="text" name="num_block" id="num_block"  readonly/>
     <br />
     <label>Updated By</label>
     <input name="blockedBy" id="blockedBy"  readonly/>
     <br />

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

CodePudding user response：

I think you can change type="submit" to type="button" instead

$("body").on("click", "#block1", function(event){  
   event.preventDefault();
            
   alert("clicked button1");       
});