Member Avatar for JBLDW

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:

  • 3 Contributors
  • 7 Replies
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JBLDW
Member Avatar for vibhaJ

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.

Member Avatar for JBLDW

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.

Member Avatar for JBLDW

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;">
Edited by JBLDW because: n/a
Member Avatar for vibhaJ

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.

Member Avatar for JBLDW

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...

Edited by JBLDW because: n/a
Member Avatar for Stefano Mtangoo

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

Member Avatar for JBLDW

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 <script language="javascript"> 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>
Edited by JBLDW because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.