Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – on button click alert is not firing

I need to put an alert on WooCommerce Place Order button.
When I put the code below with id ‘place_order’ it is not working. But when I change this id with any other elements ID and click there it works!

I need this alert to work when I click on the following button: 

jQuery(document).ready(function($) {

  $(function() {
    $('#place_order').click(function() {
      alert("This is a test message... please ignore this.");
    });
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Pay securely with WorldPay</button>

Can you please tell me what am I missing? Is it because the button calls ajax? if yes how can I make this work?

Thanks

Tags:

3

Answers


  1. 0

    This how you do it to a link button or normal button:

    $(document).ready(function(){
    $('#place_order').click(function() {
        alert("This is a test message... please ignore this.");
    });
});

    But you are using a submit button, so the form is submitted and you can’t see the message.
    The is a way to stop the form submission if you need it:

    $(document).ready(function(){
    $('form').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented/stopped.");
    });

    $('#place_order').click(function() {
        alert("This is a test message... please ignore this.");
    });
});

    Hope it helps you

    Login or Signup to reply.
  2. 0

    your code must be somehow like this, you can check what you are missing .

    <!DOCTYPE html>
<html>
        <link rel="stylesheet" type="text/css" href="jQuery_functions.css">
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button type="submit" class="place_order" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Pay securely with WorldPay</button>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
        $('#place_order').click(function(){ alert("This is a test message... please ignore this.");
    });
});
 </script>
</html>

    Hope I could help!

    Login or Signup to reply.
  3. 0

    This how you do it to a link button or normal button:

    $(document).ready(function(){
    $('#place_order').click(function() {
        alert("This is a test message... please ignore this.");
    });
});

    But you are using a submit button, so the form is submitted and you can’t see the message. The is a way to stop the form submission if you need it:

    $(document).ready(function(){
    $('form').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented/stopped.");
    });

    $('#place_order').click(function() {
        alert("This is a test message... please ignore this.");
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search