[SOLVED] Input Field intitial text

[scottybwoy]

Hi peeps,

 

I'd like to create an input field that has some text in that dissapears on click and re-appears if no text was added and also go blank if the form is sent.  Like this example where it says "refine your search"

 

Does anyone know what the initial input text label is called, or have a tutorial I can follow to do it. Or just show me

 

Thanks for your help

[JasonLewis]

Why don't you take a look at their source code? They are using two event handlers, onblur and onfocus. It's just a matter of setting the appropriate JavaScript in them.

 

<input type="text" name="something" id="something" value="Search..." onfocus="javascript:if(this.value=='Search...'){ this.value = ''; }" onblur="javascript: if(this.value == ''){ this.value = 'Search...'; }" />

[scottybwoy]

OK Thanks,

 

I have copied their code, made a few ammendments and stuck it in my script.  But IE7 gives an object expected error on the $ character on the line pointed out in the code below :

<<!-- This line here //--> $(document).ready(
function() {
	searchBox();
}
);

function searchBox() {
$("#subQuery").focus(
	function() {
		if(this.value=='<?php echo REDIFINE_RESULTS; ?>') {
			this.value='';
		}
	}
);

$("#subQueryButton").click(
	function() {
		if($("#subQuery").val()=='<?php echo REDIFINE_RESULTS; ?>') {
			$("#subQuery").val('');
		}
	}
);

$("#subQuery").blur(
	function() {
		if(this.value=='') {
			this.value='<?php echo REDIFINE_RESULTS; ?>';
		};
	}
);
}

// Here is the HTML

<input id="subQuery" type='text' name='keywords' value="<?php echo REDIFINE_RESULTS; ?>" class='fieldValue' style='width:42%; border:1px solid #3f547f;'>
<?php echo tep_image_submit('button_search.gif', IMAGE_BUTTON_SEARCH, 'name="subsearch"') . tep_draw_hidden_field('search_in_description', '1');

 

Sorry my javascript expertise is very basic,  I don't even know why there is a $ character or what it means?  So can anyone point me out in the right direction?  Thanks

[KevinM1]

OK Thanks,

 

I have copied their code, made a few ammendments and stuck it in my script.  But IE7 gives an object expected error on the $ character on the line pointed out in the code below :

<<!-- This line here //--> $(document).ready(
function() {
	searchBox();
}
);

function searchBox() {
$("#subQuery").focus(
	function() {
		if(this.value=='<?php echo REDIFINE_RESULTS; ?>') {
			this.value='';
		}
	}
);

$("#subQueryButton").click(
	function() {
		if($("#subQuery").val()=='<?php echo REDIFINE_RESULTS; ?>') {
			$("#subQuery").val('');
		}
	}
);

$("#subQuery").blur(
	function() {
		if(this.value=='') {
			this.value='<?php echo REDIFINE_RESULTS; ?>';
		};
	}
);
}

// Here is the HTML

<input id="subQuery" type='text' name='keywords' value="<?php echo REDIFINE_RESULTS; ?>" class='fieldValue' style='width:42%; border:1px solid #3f547f;'>
<?php echo tep_image_submit('button_search.gif', IMAGE_BUTTON_SEARCH, 'name="subsearch"') . tep_draw_hidden_field('search_in_description', '1');

 

Sorry my javascript expertise is very basic,  I don't even know why there is a $ character or what it means?  So can anyone point me out in the right direction?  Thanks

 

Their code is using a framework, most likely Prototype or jQuery.  Look at their script tag(s)...do they include any other JavaScript files?

[RichardRotterdam]

It's jQuery they have a more css approach compared to mootools and prototype. just include the jquery.js

[scottybwoy]

Thats great, cheers for that. I got the latest from the jQuery site, and will look into other fancy things it can do.