[Fermé] Placeholder + Search button for [wpv-filter-search]

[Auteur]

Publications

[Ole Andreas Vekve]

Hello,

I am trying to make placeholder and search button for [wpv-filter-search-box].

I currently have it like the image searchform.jpg

But I would like to have something like searchform2.jpg

I have made my searchform by combining [wpv-filter-search-box] and [wpv-filter-submit] like this:

	[wpv-filter-search-box id="srch-inpt-box"]
	[wpv-filter-submit name="Søk" type="input" class="btn-lg"]

wpv-filter-search-box is set to width 80%, and was thinking about setting wpv-filter-submit to width 20%. So that the area would be filled up, but thats not what I would like. Then they are two buttons, I would like them to be as one. Like the image. Also when pressing enter after typing, it does not search. I need to press the button to make it search.

I have read these, but nothing have solved my problem:
https://toolset.com/forums/topic/placeholder-wpv-filter-search-box/
https://toolset.com/forums/topic/wpv-filter-search-box-with-default-text-in-the-searchbox/
https://toolset.com/forums/topic/styling-search-box-for-filter/

You can see demo here: hidden link

Any solutions?

Looking forward to hear from you,

[Nigel Supporter Languages: Anglais (English ) Espagnol (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Ole

You have 3 questions here

1. adding placeholder text
2. having the search form submit when hitting enter
3. styling the inputs

For the record I will describe what is required below, but skip to the end to understand why this is not working.

1. You can use JS to set the placeholder attribute on the form text input

I tried the solution in the first of your links and it worked okay, so let me repeat it here.

In your search view where you have added the [wpv-filter-search-box] shortcode, add the following to the custom JS box:

jQuery(document).ready(function(){
  jQuery("input[name='wpv_post_search']").attr("placeholder", "Search here");
});

Edit this to replace the placeholder text as desired.

2. It should do already, it is standard HTML form behaviour, and it does on my test site. It doesn't matter what you views settings are.

3. To be honest, I couldn't quite understand what your issue here was, but you can add classes when inserting the shortcodes to style the inputs, and when you add the shortcode for the submit button you can specify whether you want the markup to be an input or a button.

Why isn't the above working?

Because you have inserted the shortcodes into your page layout outside the context of a search form. You need to create a custom search view and insert the text search and submit inputs as filter controls in that view.

From your link it looks like you already have the search form in the sidebar. Your text search field needs to be part of that search form.

[Nigel Supporter Languages: Anglais (English ) Espagnol (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Ole

I'm also working on your other ticket and reading through that I can see that your text box is, I think, part of the same form as that which is in the 'sidebar', you have split the form across columns, yes?

So, that won't account for why things are not working.

I'm asking for more details on the other ticket which will inform what I do here...