Jump to content

Wordpress Clear Input Field


newseed

Recommended Posts

Hey All,

 

I am baffled as to why I am unable to get this onclick function to work so that it clears the default text value of an input field:

 

$form = '<form name="form1" role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
<input type="text" value="Search for articles...' . get_search_query() . '" onclick="document.form1.s.value ='';" name="s" id="s" />

<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
</div>
</form>';

 

The code I added is in red:

 

$form = '<form name="form1" role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >

<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>

<input type="text" value="Search for articles...' . get_search_query() . '" onclick="document.form1.s.value ='';" name="s" id="s" />

 

<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />

</div>

</form>';

 

 

I'm using Wordpress 3.01.

Link to comment
Share on other sites

I just checked one of my client's sites where the search field clears on click and here's what I found in the source:

 

<form method="get" class="searchform" action="http://www.website.com/" >

<input type="text" value="Search this website" name="s" class="s" onfocus="if (this.value == 'Search this website') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website';}" />

<input type="submit" class="searchsubmit" value="Search" />
</form>

 

Hope this helps! It's a child theme for the Genesis framework, so the search widget is pre-built for me. I don't know why it works, just that it does. :)

Edited by Susie
Link to comment
Share on other sites

I am using WP's default theme which uses WP's default search form and I guess hacking the general-template.php file breaks the site. I went ahead and applied your (Susie's) code as it's own widget and it worked like a charm.

 

Thanks.

 

Oh incase anyone was wondering how the clear form is working here's the url:

 

http://www.barrierreefaquariums.com/aquarium-blog/

Edited by newseed
Link to comment
Share on other sites

A more elegant approach is to use defaultValue property. That way, if you change the value text, you don't need to go and update the onclick event script as well...

 

<form method="get" class="searchform" action="http://www.website.com/" >

<input type="text" value="Search this website" name="s" class="s" onfocus="if (this.value == this.defaultValue) {this.value = '';}" onblur="if (this.value == '') {this.value = this.defaultValue;}" />

<input type="submit" class="searchsubmit" value="Search" />
</form>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...