newseed Posted November 18, 2010 Report Share Posted November 18, 2010 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 18, 2010 Report Share Posted November 18, 2010 I've tested the code and it seems to work correctly... Do you have a link you could share? (Or PM me the link?) Quote Link to comment Share on other sites More sharing options...
newseed Posted November 18, 2010 Author Report Share Posted November 18, 2010 I'm right in the middle of a site wide search. As soon as I get that done I will reapply the code back into the site and provide a url so you can see what I am seeing. It basically makes the page go blank. Meanwhile, did you test the onclick code on a WP site?? Quote Link to comment Share on other sites More sharing options...
Susie Posted November 18, 2010 Report Share Posted November 18, 2010 (edited) 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 November 18, 2010 by Susie Quote Link to comment Share on other sites More sharing options...
newseed Posted November 19, 2010 Author Report Share Posted November 19, 2010 Thanks Susie. I will try this tomorrow. Quote Link to comment Share on other sites More sharing options...
newseed Posted November 19, 2010 Author Report Share Posted November 19, 2010 (edited) 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 November 19, 2010 by newseed Quote Link to comment Share on other sites More sharing options...
BeeDev Posted November 19, 2010 Report Share Posted November 19, 2010 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.