Js Help With Search Reset Button

[driz]

Hi, I'm building a forum @ http://forum.simplecandy.com/ As you will see in the top right their is a search bar. This search bar has some javascript that detects whether the default value is used or not and displays it if need be. In addition to this, I want to add a simple reset button that will appear when text is entered BUT not when the default value is used.Can someone help? Thanks.

[justsomeguy]

Create the button as normal, and give it a CSS property to hide it. e.g.:<a href="#" onclick="clearText(document.getElementById('q'))" style="display: none;">Reset</a>You'll need a keypress or change event on the textfield that runs a function to check if the value is different than the default value, and either show or hide the button based on that. You can use the style property of the button element to change the display property between none and inline. e.g.:document.getElementById("reset").style.display = "inline";

[driz]

This is the code I have so far:

			function clearText(field){				if (field.defaultValue == field.value) field.value = '';				else if (field.value == '') field.value = field.defaultValue;						}

What I need to the button to do is ONLY delete text that is different to the default value.

[justsomeguy]

How about you just set the text to the default value, regardless of what it is? It doesn't really matter if you set the default value to the default value.

[driz]

How about you just set the text to the default value, regardless of what it is? It doesn't really matter if you set the default value to the default value.

How do I do that? thanks

[justsomeguy]

The clearText function is already doing that, it sets field.value to field.defaultValue if the field is empty.

[driz]

The clearText function is already doing that, it sets field.value to field.defaultValue if the field is empty.

What I meant was how do I get this function to work with my Reset button, and the button ONLY appear when text is inside the field, BUT NOT the default value as that is not classed as content that would be deleted. Thanks

[justsomeguy]

I showed you how to turn the button on and off in post 2. You'll need to make a new function, clearText is just an example of setting the default value.I think I'm confused though.. you said you're building the forum, did you actually build all of it? Is it possible that you can build a forum but not know how to toggle an element's display? I'm operating here on the assumption that you've built that forum and know a little about code.

[driz]

I've began to build the function, but what I don't understand is how to get the function to run ONLY when the field has text inside of it excluding the default text. And also dissapear once the button has been clicked ie when the value returns to the default again. I'm gathering I need a set of if and else statements again. BUT I'm a little confused with it.

		<script>			function clearText(field){				if (field.defaultValue == field.value) field.value = '';				else if (field.value == '') field.value = field.defaultValue;			}			function showHide() {				document.getElementById("reset").style.display = "inline"; 			}		</script>

As for the forum. The code is based off of PunBB legacy version, but some additions of my own. But my PHP is a lot stronger than my JavaScript. My main skills are in CSS/XHTML.

[justsomeguy]

You don't get the function to run on a certain condition. You always run the function (on the change or keydown event), and check the condition inside the function. You can hide the button by setting the display property to "none" instead of inline.

[driz]

You don't get the function to run on a certain condition. You always run the function (on the change or keydown event), and check the condition inside the function. You can hide the button by setting the display property to "none" instead of inline.

Totally confused by what you mean. Can you post a code example? Thanks

[justsomeguy]

<input type="text" onkeydown="check_input(this);"><script type="text/javascript">function check_input(el){  if (...) // check the condition here  {  }}</script>

You said this:

what I don't understand is how to get the function to run ONLY when the field has text inside of it excluding the default text

You don't get the function to ONLY run on a certain condition, you always run the function and check the condition once you get there.