0

I am trying to get a JS event listener working and not sure if it is or isn't working. I have edited the original content of this question to add event listener to the form now. But still no joy. My script is running after the plugins script.

jpformsubmit = document.getElementById('tribe-tickets__registration__form');

jpformsubmit.addEventListener('submit', postGift);

function postGift(e) {
  console.log('Helloooo their!!!');
}
<form method="post" id="tribe-tickets__registration__form" action="myurl/checkout" data-provider="tribe_wooticket">
  <div class="tribe-tickets__registration__grid"></div>
  <div class="tribe-tickets__registration__footer">
    <div id="tribe-tickets__notice__attendee-registration">
      <div class="tribe-common-b2 tribe-tickets-notice__content"></div>
    </div>

    <button class="tribe-common-c-btn tribe-common-c-btn--small tribe-tickets__item__registration__submit" type="submit">Save & Checkout</button>
    <button class="tribe-common-c-btn" type="submit">Save & Checkout</button>
  </div>
</form>
Barmar
  • 741,623
  • 53
  • 500
  • 612
John Paul
  • 87
  • 1
  • 8
  • The submit event is sent to the form, not the button. – Barmar Jun 05 '20 at 14:09
  • The code in the snippet works. – Barmar Jun 05 '20 at 15:14
  • thanks for testing Barmar, it works when I have it loaded on a std html form in my code editor. But it will not console.log on the live site. – John Paul Jun 05 '20 at 15:42
  • Is the form being added dynamically by WP? See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Jun 05 '20 at 15:45
  • That is a good point, I did look in the plugin php file that loads the form. The form fields are added dynamically, based on user settings and 'blocks' are called depending upon what fields the user has created for their form. The submit button is also a block and gets called at the bottom of the php file. I therefore assumed that I would be able to target the form on submit as the fields are all loaded and my script runs after the plugins script. The form tags are hard coded in the php file that renders the form though. – John Paul Jun 05 '20 at 16:17
  • Dynamic form fields aren't an issue. Since you're binding to the form itself, the question is whether the form is added dynamically. If it's hard-coded in the PHP, then it shouldn't be a problem. – Barmar Jun 05 '20 at 16:31
  • Also, you would get an error in the console if the form couldn't be found. – Barmar Jun 05 '20 at 16:32
  • great point and I was able to target the form id when using a mouseenter event. – John Paul Jun 05 '20 at 16:33
  • Maybe WP is adding event listeners on the submit buttons that call `preventDefault()` and use AJAX to submit the form. – Barmar Jun 05 '20 at 16:38
  • that would make sense I suppose. I will get a ticket into their desk and ask them. Thanks for this. – John Paul Jun 05 '20 at 17:14
  • Hi, I checked the script from the plugin that produces the form. The script does indeed preventDefault(); It then takes the data and converts the form data to JSON, there is no AJAX POST method, so I am assuming the json data is used to pass back via the REST API. – John Paul Jun 06 '20 at 06:19
  • A REST API is used via AJAX, but it could be GET or PUT rather than POST. – Barmar Jun 06 '20 at 16:53

1 Answers1

0

so I am adding the event listener onto the 'submit' event on the button

<form> elements have submit events. <button> and <input> elements do not.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Hi, that is what I tried in the first place, but could not get that to work either. The form is from a wordpress plugin. I have added the HTML code and orignal JS I had in the original question but couldn't get that to message in the console either. – John Paul Jun 05 '20 at 14:20