Solution:
There’s two issues in your code. Firstly the right-side panel which contains the #secondaryButton
element doesn’t exist in the DOM when the page loads, so you need to use a delegated event handler.
Secondly, you need to invoke the click()
method on the button
element directly, not through jQuery. To do that use [0]
to retrieve the Element from the jQuery object:
$("button.elementor-search-form__submit")[0].click();
However, in this case better practice to submit the form
element would be to invoke the submit
event on that element, not the click of its button:
jQuery(function($) {
$(document).on('click', '#secondaryButton', e => {
$("form.elementor-search-form")[0].submit();
});
});
That being said, the best practice would be to completely remove the need for any JS hacks to form a relationship between your form
and an external submit button. If you rearrange your HTML so that the clickable ‘Search’ element is a <button />
element within the form
then you get the behaviour you require by default, without the need for any JS.