[Resolved] hide search button once clicked

[Author]

Posts

[nabils]

I am trying to: hide the search button once clicket, and show a message "searching... please wait". So I added this JS to the view.

jQuery(document).ready(function($){
$("form.wpv-filter-form").on("submit", function(e){
if ($('form.wpv-filter-form').valid()) {
$('input.js-wpv-submit-trigger').hide();
$("cc").text("searching... please wait");
} else {
$("input.js-wpv-submit-trigger").show();
}
});
});

In the view: <cc></cc>[wpv-filter-submit name="search" output="bootstrap" class="fusion-button button-small button-default"]

Link to a page where the issue can be seen:
hidden link

I expected to see: When I click on search, the search button should disappear and see a message instead

Instead, I got: search button does not disappear.

Did I do something wrong?

Thank you for helping.

[Christian Cox]

Have you tested your code with console logs?

jQuery(document).ready(function($){
console.log('ready');
$("form.wpv-filter-form").on("submit", function(e){
console.log('submit');
if ($('form.wpv-filter-form').valid()) {
console.log('valid');
$('input.js-wpv-submit-trigger').hide();
$("cc").text("searching... please wait");
} else {
console.log('invalid');
$("input.js-wpv-submit-trigger").show();
}
});
});

Turn on "preserve logs" in your browser and submit the form again to monitor code flow. Let me know what you find in the logs.

[nabils]

Thank you for the suggestion,
I did and got this error:
"TypeError: $(...).valid is not a function "
It refers to 5th line: if ($('form.wpv-filter-form').valid()) {

I am using Avada theme. I used similar code in another website (with Enfold theme) and it was working.

[Shane]

Hi Nabils,

Christian is currently on holidays but he will be back tomorrow to assist you with this further. However taking a look it seems the $ is throwing the error.

What I would like for you to do is to replace all the '$' with jQuery.

Thanks,
Shane

[nabils]

Hi
Thank you but did not understand your point, I am using already jquery as you can see in in my code.

Regards
NS

[Christian Cox]

It's actually the .valid() part throwing the error. The valid method isn't a built-in jQuery method. It depends on the jQuery validation plugin, which isn't included with Toolset. If it worked on another site, it may be because that site's theme or other plugin files include the jQuery Validation plugin:
hidden link

I recommend using validation that does not rely on another plugin (or remove the validation altogether), and using jQuery selectors that are more specific. $('form.wpv-filter-form') can refer to multiple forms on the same page. You can usually use the form "name" attribute or a unique CSS class name to target a single form.