Hello, I want to add a clear button to search forms. When I click on the button the input value will be removed.
I added this one but it doesn’t work well:
function baran_add_clear_icon_on_search_forms() {
?>
<style>
.clear-icon:before {
content: "\f112";
font-family: "woodmart-font";
color: black;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.clear-icon {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
</style>
<script type="text/javascript">
jQuery('form.woodmart-ajax-search').append('<div class="clear-icon"></div>');
let clearIcon = jQuery('.clear-icon');
let formInput = jQuery('form.woodmart-ajax-search').find('input[type="text"]');
clearIcon.on('click', function(e) {
e.preventDefault();
formInput.val('').attr('value','');
if (formInput.val().length <= 0) {
jQuery(this).hide();
}
});
if (formInput.val().length > 0) {
clearIcon.show();
} else {
clearIcon.hide();
}
formInput.on('change keydown paste input', function(e) {
let length = e.target.value.length;
if (length > 0) {
clearIcon.show();
} else {
clearIcon.hide();
}
});
</script>
<?php
}
add_action( 'wp_footer', 'baran_add_clear_icon_on_search_forms' );
You can test it on mobile.
-
This topic was modified 7 months, 2 weeks ago by baranozdemir.com. Reason: Added new info