Title: Trigger JS code snippet on button click
Last modified: March 4, 2021

---

# Trigger JS code snippet on button click

 *  Resolved [jassyjas](https://wordpress.org/support/users/jassyjas/)
 * (@jassyjas)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/)
 * I want to have an onclick code snippet which will implement the following when
   I click on a button with a specific id. eg: “book_now_button”
 * `<a href="javascript:void(0)" onclick="saloniq.loader.openIFrame()">BOOK ONLINE
   </a>`
 * Can you help me with what to put in a code snippet for this?
    -  This topic was modified 5 years, 3 months ago by [jassyjas](https://wordpress.org/support/users/jassyjas/).
    -  This topic was modified 5 years, 3 months ago by [jassyjas](https://wordpress.org/support/users/jassyjas/).
    -  This topic was modified 5 years, 3 months ago by [jassyjas](https://wordpress.org/support/users/jassyjas/).

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/page/2/?output_format=md)

 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14134266)
 * Hi [@jassyjas](https://wordpress.org/support/users/jassyjas/),
 * Am I correct in understanding that you want the snippet to do something when 
   the link is clicked on? What sort of thing should it do?
 *  Thread Starter [jassyjas](https://wordpress.org/support/users/jassyjas/)
 * (@jassyjas)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14137489)
 * Hi! NO… I have the html link working fine.
    I’d like the same thing to happen
   when I click a button. I can’t use the html code in my button. Hope that makes
   sense? I was advised to create a code snippet which would trigger the same function
   onclick. The JS code snippet is already in my Code snippets. I can send a ‘loom’
   recording if I’m not explaining it well enough. Thank you
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14138611)
 * If you give the button an ID:
 * `<button id="book_online_button">Book Online</button>`
 * You should be able to register an event listener with JavaScript
 *     ```
       document.getElementById('book_online_button').addEventListener( 'click', function () {
       	// do your JS code here
       } );
       ```
   
 *  Thread Starter [jassyjas](https://wordpress.org/support/users/jassyjas/)
 * (@jassyjas)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14138973)
 * thank you… I’m trying to follow your instructions but clearly I have something
   wrong. Can you tell me what I what’s wrong as I get errors
    [https://loom.com/i/642f326840b648acbce8931ddbf02d3f](https://loom.com/i/642f326840b648acbce8931ddbf02d3f)
 * `document.getElementById(‘book_button’).addEventListener(“click”, function (){
   add_action( ‘wp_head’, function () { ?>
    <script type=’text/javascript’>!function(
   b,c){b.saloniqid=’ac589142-60bc-4acd-acdd-fccf491bf729′,b.saloniqsite=’[https://bookings.saloniq.co.uk&#8217](https://bookings.saloniq.co.uk&#8217);;
   var d,g,e=’onlinebookingwidget-loader’,f=c.getElementsByTagName(‘script’)[0];
   c.getElementById(e)||(d=c.createElement(‘script’),d.id=e,d.async=!0,d.src=b.saloniqsite
   +’/scripts/onlinebookingwidget-loader.js?d=’+Date.now(),g=f?f.parentNode:c.getElementsByTagName(‘
   head’)[0],g.insertBefore(d,f))}(window,document);</script> ?php});
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14139041)
 * There’s a problem with how you’ve mixed the PHP and JS code. Here’s a better 
   way to do that:
 *     ```
       add_action( 'wp_head', function () { ?>
       <script type='text/javascript'>
       !function(b,c){b.saloniqid='ac589142-60bc-4acd-acdd-fccf491bf729',b.saloniqsite='https://bookings.saloniq.co.uk';var d,g,e='onlinebookingwidget-loader',f=c.getElementsByTagName('script')[0];c.getElementById(e)||(d=c.createElement('script'),d.id=e,d.async=!0,d.src=b.saloniqsite+'/scripts/onlinebookingwidget-loader.javascripts?d='+Date.now(),g=f?f.parentNode:c.getElementsByTagName('head')[0],g.insertBefore(d,f))}(window,document);
   
       document.getElementById( 'book_button' ).addEventListener( 'click', function () {
       	window.saloniq.loader.openIFrame();
       } );
   
       </script>
       <?php } );
       ```
   
 *  Thread Starter [jassyjas](https://wordpress.org/support/users/jassyjas/)
 * (@jassyjas)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14139091)
 * Thank again… I’ve used that as a code snippet without error. I have placed a 
   TEST button in my header here:
 *  [https://staging.creationshairandbeauty.com/contact-us/](https://staging.creationshairandbeauty.com/contact-us/)
 * Clearly the button widget on my page (the big white one) has no link url included
   as I want the code snippet to run when I click the button. But nothing is happening..
   What should I put in expected link URL field for the button? a # or something
   else?
 * Thanks again… Super happy to donate to your plugin when this is working.
 *  Thread Starter [jassyjas](https://wordpress.org/support/users/jassyjas/)
 * (@jassyjas)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14142599)
 * [@bungeshea](https://wordpress.org/support/users/bungeshea/) any further help
   you can provide here would be really appreciated. Thank you
 *  Thread Starter [jassyjas](https://wordpress.org/support/users/jassyjas/)
 * (@jassyjas)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14154433)
 * Hi Shea – are you able to help me any further with this or point me in the right
   direction? Thank you
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14154509)
 * It looks like you’re using a link that looks like a button, instead of an actual`
   <button>` element. As this is the case, you should just be able to set the link
   URL to this instead of using the snippet I suggested above:
 * `javascript:window.saloniq.loader.openIFrame();`
 *  Thread Starter [jassyjas](https://wordpress.org/support/users/jassyjas/)
 * (@jassyjas)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14154681)
 * Oh no, that’s where I started. I know I have a the link working and looking like
   a button… But I WANT an actual button to work and that’s what I’m asking for 
   help with. Sorry if I was not clear.
    It’s this big white button (screenshot –
   [https://loom.com/i/75611d8b5dbf4cd68c6bd5dbe096ffd3](https://loom.com/i/75611d8b5dbf4cd68c6bd5dbe096ffd3))
   not the one above…. on this page [https://staging.creationshairandbeauty.com/contact-us/](https://staging.creationshairandbeauty.com/contact-us/)
 * This is where the button ID is set
    [https://loom.com/i/af16208d486f4d30b0126da37d2e99ea](https://loom.com/i/af16208d486f4d30b0126da37d2e99ea)
 * This my snippet as per your help above
    [https://loom.com/i/836456041354463da379b6bb0aa2eef5](https://loom.com/i/836456041354463da379b6bb0aa2eef5)
 * But it doesn’t work 🙁
 * Thanks again
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14154790)
 * The big white button is definitely a link! If you paste this line in the Link
   field in the settings in your second screenshot, it should work:
 * `javascript:window.saloniq.loader.openIFrame();`
 *  Thread Starter [jassyjas](https://wordpress.org/support/users/jassyjas/)
 * (@jassyjas)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14154968)
 * I’m literally feeling so stupid… But hoping I am just being stupid. I’ve done
   what you’ve suggested but still no luck. Here;s a super quick loom to show you.
 * I appreciate I’m asking a lot from your support. THANK YOU
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14155025)
 * Hmm, it doesn’t look like Elementor is displaying the link correctly. If we instead
   return to the original idea of using a code snippet to make the button work, 
   then you might have more luck with this one:
 *     ```
       add_action( 'wp_head', function () { ?>
       <script type='text/javascript'>
       !function(b,c){b.saloniqid='ac589142-60bc-4acd-acdd-fccf491bf729',b.saloniqsite='https://bookings.saloniq.co.uk';var d,g,e='onlinebookingwidget-loader',f=c.getElementsByTagName('script')[0];c.getElementById(e)||(d=c.createElement('script'),d.id=e,d.async=!0,d.src=b.saloniqsite+'/scripts/onlinebookingwidget-loader.javascripts?d='+Date.now(),g=f?f.parentNode:c.getElementsByTagName('head')[0],g.insertBefore(d,f))}(window,document);
       </script>
       <?php } );
   
       add_action( 'wp_footer', function () { ?>
       <script>
       document.getElementById( 'book_button' ).addEventListener( 'click', function () {
       	window.saloniq.loader.openIFrame();
       } );
       </script>
       <?php } );
       ```
   
 * In the Elementor settings, you will want to set the Link URL value to `#` to 
   make sure that it stays on the same page.
 *  Thread Starter [jassyjas](https://wordpress.org/support/users/jassyjas/)
 * (@jassyjas)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14155587)
 * It works it works it works.
    Thank you so much…
 * Why did the addition of the add_action wp_footer make the difference do you know?
 * Anyway – Amazing!
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/#post-14156078)
 * Glad to hear it’s working!
 * The JavaScript code was running in the page `<head>` section, before the rest
   of the page had been fully loaded, so it was trying to link into a button element
   that did not exist yet.

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/page/2/?output_format=md)

The topic ‘Trigger JS code snippet on button click’ is closed to new replies.

 * ![](https://ps.w.org/code-snippets/assets/icon.svg?rev=2148878)
 * [Code Snippets](https://wordpress.org/plugins/code-snippets/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/code-snippets/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/code-snippets/)
 * [Active Topics](https://wordpress.org/support/plugin/code-snippets/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/code-snippets/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/code-snippets/reviews/)

 * 21 replies
 * 2 participants
 * Last reply from: [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * Last activity: [4 years, 10 months ago](https://wordpress.org/support/topic/trigger-js-code-snippet-on-button-click/page/2/#post-14751335)
 * Status: resolved