CODEWITHSUNDEEP
javascriptjquerywordpress
Johnny
Johnny

Reputation: 576

Preventing a search if the default value is in place

I have a site set up using WordPress and the following snippet of code:

<form id="searchform" method="get" action="<?php bloginfo('siteurl')?>/">
  <input type="text" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"class="textbox" value="Search" />
</form>

How can I prevent a search taking place if the default string of 'Search' is being displayed?

Upvotes: 1

Views: 59

Answers (3)

FabioG
FabioG

Reputation: 2986

a placeholder would be better but you can return false onsubmit if the value is 'Search'.

<form id="searchform" method="get" action="<?php bloginfo('siteurl')?>" onsubmit="if(document.getElementById('s').value == 'Search'){return false;}/">
   <input type="text" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"class="textbox" value="Search" />
</form>

Upvotes: 0

feeela
feeela

Reputation: 29932

Not a direct answer, but…

Cant' you just use the placeholder attribute instead of that old method to replace the input value?

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder

<input type="text" name="s" id="s" placeholder="Search" class="textbox" value="" />

Upvotes: 1

Pavel Štěrba
Pavel Štěrba

Reputation: 2912

I suggest you to use placeholder:

<input type="text" name="s" id="s" class="textbox" placeholder="Search" />

See this JSFiddle to check how it works. It will display hint for user until he enter something. Of course, value of input with placeholder is still empty until user interaction.

Upvotes: 3

Related Questions