Using PrototypeJs or pure JS, how can I avoid a click event but trigger the original handlers later?

Question

I have a Place Order button, that contains a click event that will run some tasks and place the order via ajax.

I would like to add another click event that will be triggered before the original event, and perform some actions and validations.

Depending on the outcome of it:

1. I would like to prevent the other events to be triggered
2. OR if success, just proceed and call the other click listeners.

However I'm struggling a lot to achieve that with PrototypeJS or pure JavaScript.

This would be a simple example, but of course I tried many different approaches, including overrigind Event.observe method, cloning the button, and so on.

Any idea is appreciated.

var button = $('onestepcheckout-place-order-button')

//Original event
button.observe('click', function(e) {
  console.log('Order submitted')
})

// New event (I only have access to modify from here onwards)
button.observe('click', function(event) {

  if (confirm('Are you sure?') === false) {
    console.log('The order should not be submitted')
    event.preventDefault()
    event.stopPropagation()
    return false
  }

  // The other events should be triggered (order submitted)
  button.fire('click')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script>
<button id="onestepcheckout-place-order-button" type="button"><span>Place order</span></button>

Answer 1

It turns out that, although prototype can store the events internally, we cannot have access to it like we can in jQuery.

My solution was to clone the original button and add an event to it and also to the form, using pure javascript.

This way I was able to inject a clone of the original button, but without it events attached, run my function and its validation, and trigger the original button click() event if the validation passes.

Here's what I did:

var button = document.getElementById('onestepcheckout-place-order-button')
var form = document.getElementById('orderForm')


// some code will add one or more event listeners to the original button
button.addEventListener('click', function(e) {
  console.log('Button clicked will submit form via ajax')
  //ajax (the order may be placed via ajax. replace the webhook.site url with yours if you want to see it in action there)
  new Ajax.Request('https://webhook.site/25fab621-3f15-4d9f-ad87-3a746113adf2', {
    method: 'POST',
    data: {
      name: 'John Doe',
      email: '    '
    }
  })
}, false)

// clone the button
var newButton = button.cloneNode(true)

// replace old button for the new button (with no events attached)
button.parentNode.replaceChild(newButton, button)

// just a generic function to validate and prevent default
var validateAndPreventDefault = function(event) {
  event.preventDefault() // prevent the default behavior of the form/button

  if (confirm('Are you sure?') === false) {
    // add condition here
    // if some condition is not met, prevent the form from being submitted
    console.log('The order should not be submitted')

    return false
  }

  console.log('The order will bet submitted')
  button.click() // trigger the click event on the old button
  return true
  // The other events should be triggered (order submitted)
}

// add the event listener to the form and the button, preventing the default behavior in both cases
form.addEventListener('submit', validateAndPreventDefault, false)
newButton.addEventListener('click', validateAndPreventDefault, false)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script>
<form id="orderForm" method="post" action="#">
  <!--    type button-->
  <button id="onestepcheckout-place-order-button" type="button"><span>Place order</span></button>

  <!--    type submit-->
  <button id="onestepcheckout-place-order-button-original" type="submit"><span>Submit button</span></button>
</form>

Answer 2

I think you are running into a protection the browser puts in place, that prevents JS from artificially triggering click events that are not part of an original click event. For example, the browser will prevent you from triggering a click event on an element, if you trigger the event from a mouse move event.

In your scenario, because the confirm() method is triggered that interrupts the "flow" of the click event from one handler to the next.

Here's my suggestion, extract the order submitted handler into a separate method definition, so that method is called while passing the event to that method. The original click event listener can call that method, as well as the new one that has the "are you sure" confirm() call.

function submitorder(event){
   //... original submit order
}

$('onestepcheckout-place-order-button').observe('click',submitorder);
// OR 
$('onestepcheckout-place-order-button').observe('click',function(event){

    if (confirm('Are you sure?') === false) {
        console.log('The order should not be submitted')
        event.preventDefault()
        event.stopPropagation()
        return false
    }

    submitorder(event);
});

Answer 3

you need to attach a click event listener to the "Place Order" button, Then Inside the event listener, first perform some actions and validations using the validateOrder() function. If the validation somehow fails, prevent the default action of the click event, effectively preventing the order from being placed. and If the validation succeeds, we proceed with placing the order by calling the placeOrder() function, where you can put your AJAX call.

i think that will about do it.

//here is an example hope this will help

document.addEventListener('DOMContentLoaded', function() {
       var placeOrderButton = document.getElementById('placeOrderButton');

// Add a click event listener to the "Place Order" button
placeOrderButton.addEventListener('click', function(event) {
    // Perform some actions and validations
    var validationResult = validateOrder();

    // If the validation fails, prevent the default action of the click event
    if (!validationResult) {
        event.preventDefault();
        return false;
    }

    // If the validation succeeds, proceed with placing the order
    placeOrder();
});

// now perform actions and validations
function validateOrder() {
    // Perform your validations here if true=succeed and viceversa
    var isValid = true;
    if (/* Your validation condition */) {
        isValid = false;
    }
    return isValid;
}

// then place the order
function placeOrder() {
    // Perform your AJAX call here like:
    console.log('Order placed!');
}

});