Support ForumAdding onclick code to button – Support Forum

Adding onclick code to button

evolmusiq — Fri, 31 Oct 2014 16:48:39 +0000

Hello,

I have a JavaScript code in the header that I want to trigger when someone clicks on specific buttons. How can I add an onclick code to individual buttons? Would it be different with the vc-buttons vs. ish-buttons?

Thanks!

Reply To: Adding onclick code to button

IshYoBoy — Mon, 03 Nov 2014 06:24:23 +0000

Hey,

The easiest way would be to add a custom css class or a unique ID to the element and then use this class or ID in your JavaScript selector to activate the on click functionality.

All our shortcodes do have “Advanced Global Attributes” so you can set either the ID or the class name. The regular VC shortcodes, however, have only “Element Class” attribute that could be set.

Hope I managed to describe it clearly. If not. Just let us know :)

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Adding onclick code to button

evolmusiq — Mon, 03 Nov 2014 17:01:52 +0000

Hello again,

I’m not very familiar with code so I need a little more help please. Let’s say my element ID for a button is abcbutton.

Would I then go to the child theme and create a custom js file?

If so what would that file look like with an onclick code? For example, the code would look like this:
onclick=”javascript:function(parameters);

Reply To: Adding onclick code to button

IshYoBoy — Mon, 03 Nov 2014 18:15:58 +0000

Hey,

The JavaScript code would be something like this:

// Call the code only when the site is ready loading
jQuery(document).ready(function($) {

	// Find the right button by ID
	var my_btn_1 = jQuery('#abcbutton');

	// First let's check if the button exists
	if ( my_btn_1.length > 0 ) {
		
		// Let's bind a function to be called when the button gets clicked
		my_btn_1.click( function(e){
		
			// Stop the innitial function of the link so that it does not reload the page or jump
			e.preventDefault();

            // Do your magic below this line

        });
	}
});

// Call the code only when the site is ready loading

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

// Find the right button by ID

var my_btn_1 = jQuery('#abcbutton');

// First let's check if the button exists

if ( my_btn_1.length > 0 ) {

// Let's bind a function to be called when the button gets clicked

my_btn_1.click( function(e){

// Stop the innitial function of the link so that it does not reload the page or jump

e.preventDefault();

// Do your magic below this line

});

}

});

You can use the RAW JS page element to paste it on the page where the button is used so that the code does not load in every page. Also make sure that there is no error in your JavaScript code as it will stop many other functions on the page.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Adding onclick code to button

evolmusiq — Mon, 03 Nov 2014 22:50:24 +0000

Thanks! You guys rock!

Reply To: Adding onclick code to button

IshYoBoy — Tue, 04 Nov 2014 05:00:05 +0000

Many thanks, pal! Glad we could help!

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market