How To Integrate This Textbox Autofill Script?

I haven't found this in my search, but it is not something that is easily defined ...also I am not sure whether this is PHP or more Javascript, so my apologies if I have posted in the wrong place.

Anyway, I have this PHP form:

<?php 

$app       = $this->globals('khxc_display.app');
$eol       = $this->globals('khxc.eol');
$formid    = $app . '--minisearch';
$strid     = $app . '--prodsearch--string';
$link      = $this->link_namespace($app,'prodsearch',array());
$cgi_value = '';

$this->xhtml_quickform_header($formid,$app,'prodsearchp',array());

print '<p class="hidden"><label for="' . $app . '--minisearch--' . $strid . '"';
print '>Search Term</label></p>' . $eol;

print '<p class="inline"><input class="khxc_quickfield" type="text" name="' . $strid;
print '" id="' . $app . '--minisearch--' . $strid . '" value="';
print $cgi_value . '" size="26" maxlength="100" /></p>' . $eol;

$this->xhtml_quickform_footer($formid,'Quick Search by Item Name',1);

print '<a class="unfancy" href="' . $link . '" title="Advanced Search">Advanced Search</a>' . $eol;

?>

...and I am wanting to integrate the following Javascript script into it in order to prefill the search box and have it autoclear when someone clicks on it:

<form name="text_form" action="http://www.codeave.com/html/post.asp" method=post>
<input name=u_input onFocus=clear_textbox() value=" Enter Your Search Here ">
<input type=submit value=Submit>
<input type=reset>
</form>

I have already added the function part of the script...

<script language=JavaScript>
<!-- 
function clear_textbox()
{
if (document.text_form.u_input.value == " Enter Your Search Here ")
document.text_form.u_input.value = "";
} 
-->
</script>

...to my scripts file, but I cannot get the integration of the Javascript side of things to work properly.

So can anyone show us all how to properly integrate the two? - The best I have been able to come up with so far is a broken search box with autofilled text that remains no matter what!! :icon_cheesygrin:

JBLDW

Light Poster

38 posts since Sep 2010

Reputation Points: 14

Solved Threads: 1

1 Year Ago

Here is a example code which uses jquery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script language="javascript">
	$(document).ready(function() {	
		 $("#keyword").val('Enter Your Search Here');		  
		 $("#keyword").bind("focus", function(){
		   if($(this).val() == 'Enter Your Search Here')	   
		   		$(this).val('');		   		
		 });
		 $("#keyword").bind("blur", function(){
		   if($(this).val() == '')	   
		   		$(this).val('Enter Your Search Here');		  
		 });
	});
</script>
</head>

<body>
<input autocomplete="off" id="keyword" name="" style="width:250px;" type="text" />
</body>
</html>

Hope it will help you.

vibhaJ

Posting Shark

925 posts since Apr 2010

Reputation Points: 161

Solved Threads: 182

1 Year Ago

Thanks, vibhadevit,- that looks to be just the kind of thing I need, only it does not seem to work with our setup.

I have tried entering the function into our main Javascript file, and also as is in the head of the template file but no dice - it does not work either way. Other than I feel that introducing the Javascript functionality through the autocomplete and id keys is exactly the way to go with this.

JBLDW

Light Poster

38 posts since Sep 2010

Reputation Points: 14

Solved Threads: 1

1 Year Ago

The following, taken from http://www.webdeveloper.com/forum/showthread.php?t=102876 , did the job for me:

<input type="text" name="name" value="Joe Bloggs" onfocus="this.value = ( this.value == this.defaultValue ) ? '' : this.value;return true;">

For anyone wanting to implement the following into a print statement it will probably need to be entered in the form:

<input type="text" name="name" value="Joe Bloggs" onfocus="this.value = ( this.value == this.defaultValue ) ? \'\' : this.value;return true;">

JBLDW

Light Poster

38 posts since Sep 2010

Reputation Points: 14

Solved Threads: 1

1 Year Ago

If user clicks text should be clear and when user blur that field, then text should again come.. this is ideal case.it is not there in above code.

Yes the code you have used and what i do is the same thing, i used jquery.
Jquery is easy way, because you can just give class name or id to textfield.
and in " $(document).ready(function() {" you can point to that.

if code doesn't work for you check that you include jquery.min.js on top of " $(document).ready(function() {".

you can also check error console of browser to find issue.

vibhaJ

Posting Shark

925 posts since Apr 2010

Reputation Points: 161

Solved Threads: 182

1 Year Ago

Thanks again, vibhadevit, I did not fully understand what I was dealing with (jQuery is not something I use usually), so I failed to include the following line in full, including the src="...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

I have now tried using the function again, with the above library source URI and it worked perfectly - thank-you!

For anyone else new to (or unfamiliar with) jQuery, this link may be of use in helping to understand or implement it: http://en.wikipedia.org/wiki/JQuery

...and for anyone else searching for something like this, the title should really have been something more like: How To Integrate This Textbox Autoclear Script for Integration into PHP Source? - For some reason I cannot add tags to our posts, so hopefully the search can pick up on that amendment instead...

JBLDW

Light Poster

38 posts since Sep 2010

Reputation Points: 14

Solved Threads: 1

1 Year Ago

Hi,
Use JQuery auto complete.
Just get yourself familiar with JQuery and look at autocomplete from JQuery UI

evstevemd

Senior Poster

3,713 posts since Jun 2007

Reputation Points: 462

Solved Threads: 392

1 Year Ago

Thanks, evstevemd, - I will look into that for increasing the functionality of some things which I am having trouble tying to modify with PHP.

I had some issues, too, when trying to get the above script (modified for our store) to work, not least because is not XHTML 1.0 strict and also because id was already in use and constructed dynamically on the PHP side of things.

Anyway, for anyone else trying to use this for PHP applications, and needing it to validate, I ended up with the following:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".khxc_quickfield").val('Enter Item Title Search Term...');

$(".khxc_quickfield").bind("focus", function(){
if($(this).val() == 'Enter Item Title Search Term...')
$(this).val('');
});

$(".khxc_quickfield").bind("blur", function(){
if($(this).val() == '')
$(this).val('Enter Item Title Search Term...');

});
});

</script>

JBLDW

Light Poster

38 posts since Sep 2010

Reputation Points: 14

Solved Threads: 1

This question has already been solved

You