...

View Full Version : changing the default textbox value to "" when clicked on



LJackson
04-30-2009, 10:50 PM
Hi,

I would like to know if it is possible to change the default value of a textbox to "" when it is clicked in, and when the page loads for the default value to be put back as the value of the textbox.

is this possible to do in html or does it have to be javascript?

this is the code i have tried

<input name="search" onFocus="" type="text" value="search and compare" size="37" />


cheers
Luke

The_Return
04-30-2009, 10:53 PM
you need the javascript code which is



<script type="text/javascript" language="javascript">
//clear text box on click
function clearText(field){

if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;

}
</script>


then add this at the end end your input


onfocus="clearText(this)" onblur="clearText(this)"

LJackson
04-30-2009, 10:57 PM
hi mate thanks for the quick reply :)

where do i insert this code please?

i have inserted it in the header and the body sections of my page but its not working, any ideas?

cheers mate

ignore this mate sorry missed the last piece of code.. oops :)

LJackson
04-30-2009, 11:07 PM
thanks mate thats working a treat...

how do i get the textbox value to reset if the page is refreshed as it is currently keeping the current information?

thanks

VIPStephan
05-01-2009, 12:27 AM
I’ll have to chime in and strongly advocate the use of unobtrusive JavaScript (http://en.wikipedia.org/wiki/Unobtrusive_JavaScript)! Refrain from using inline JS events! Not only makes it easier to apply or remove JS and associated functionality, it will also increase the ease of maintenance and makes your code a lot cleaner.

So, use DOM manipulation to retreive the element and value in question and manipulate it from an external script. The easiest way would be to give your input element an ID and apply the effect with the following script:


window.onload = function() {
if (document.getElementById("inp_search")) {
var s = document.getElementById("inp_search");
var v = s.defaultValue;
s.onfocus = function() {if(s.value==v) s.value='';}
s.onblur= function() {if(s.value=='') s.value=v;}
}
}

The above example would assume that the input has an ID of “inp_search”. At first it’s checking if an element with ID “inp_search” exists at all and if yes it applies the function. This way no error will occur if the element doesn’t exist. This all is executed when the page has finished loading through window.onload. The advantage of this is that you can remove or add that script without having to change the HTML and/or causing issues or JS errors because as the name implies, the JS is unobtrusive and won’t get in the way of the HTML.

There are a few better ways (keyword “DOM ready”) but this will do. Note that only one window.onload event can exist so if you have other scripts make sure they don’t interfere with each other.

Remember: Always use unobtrusive JavaScript! In exceptional cases this can even be an internal script (i. e. a script in the head of the HTML document) but by all means avoid inline JS calls like <a onclick="…">

Oh and by the way: Never ever use the language attribute. It’s deprecated, invalid, and unnecessary.

jlhaslip
05-01-2009, 06:16 AM
VIP,

Am I missing something here? (js newbie)



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js demo</title>
<script type="text/javascript">
window.onload = function() {
if (document.getElementById("inp_search")) {
var s = document.getElementById("search");
var v = s.defaultValue;
s.onfocus = function() {if(s.value==v) s.value='';}
s.onblur= function() {if(s.value=='') s.value=v;}
}
}
</script>

</head>
<body>
<form action="">
<input type="text" id="inp_search" name="search" value="Search...">
</form>
</body>
</html>

abduraooft
05-01-2009, 11:01 AM
var s = document.getElementById("search");
should be
var s = document.getElementById("inp_search"); ?

jlhaslip
05-01-2009, 03:46 PM
That was going to be my next choice... :lol:

Thanks for the fix.

VIPStephan
05-01-2009, 05:56 PM
Oops, sorry, I missed that one. I’ve edited my post above. Thanks for the heads up. :)

LJackson
05-25-2009, 08:19 PM
hi guys

sorry been away from this thread for a while as i was happy everything wqs working well which it was now ive come back and seen the discussion that has been going on about using using inline JS events so i have modified my code as suggested above :) its working fine but what i want to know is once the user has entered a value into the search bar how do i set it up so that when the user presses the enter key instead of clicking on a button it navigates to another page?

here is my js code

<script type="text/javascript" language="javascript">
window.onload = function() {
if (document.getElementById("searchbox")) {
var s = document.getElementById("searchbox");
var v = s.defaultValue;
s.onfocus = function() {if(s.value==v) s.value='';}
s.onblur= function() {if(s.value=='') s.value=v;}
}
}
</script>

and here is my form code

<div class="searchbar">
<input name="searchbox"
type="text"
id="searchbox"
value="Search Here..."
size="35"
onfocus="onload(this)"
onblur="onload(this)"/>
<label>
<select name="category" id="category">
<option value="Everything">All Items</option>
<?php
$optgroups=array('Entertainment'=>array('DVD','CD','Video Games', 'Blu-Ray', 'Books'),
'Computing'=>array('Desktop','Notebook','Netbook','Prnter','Scanner','Software','Accessories'),
'Electronics'=>array('LCD TVs','Plasma TVs','Full HD TVs','MP3 and D.A.P','Digital Cameras',' Home Cinema Systems','DVD Players'));
foreach($optgroups as $key=>$options){
echo "<optgroup label=\"$key\">";
foreach($options as $option){
echo "<option value=\"{$option}\">{$option}</option>";
}
echo "<optgroup>";
}

?></select>
</label>
</div>

<div class="searchSubmit">
<a href="http://www.kernow-connect.com">
<img src="/images/gobutton.png" border="0" alt="Submit" title="Submit" /></a>
</div>

</div>
</div>
<?php }?>

but once the user has finished entering a value and presses enter nothing happens wow do i set it up to link to price_results.php???

please help
thanks
Luke

VIPStephan
05-25-2009, 09:00 PM
At first:





<input name="searchbox"
type="text"
id="searchbox"
value="Search Here..."
size="35"
onfocus="onload(this)"
onblur="onload(this)"/>



This is wrong (the red part) so please remove that. As I said, unobtrusive JavaScript makes any inline JS calls unnecessary. You just have your HTML and your JS separate and you won’t have to care about modifying your HTML and screwing up anything important.

Then I don’t see your form element? There you’d have to add the action:


<form action="price_results.php" method="get">


And please remove language="javascript" from the script element.

LJackson
05-25-2009, 10:55 PM
Hi VIPStephan,

thank you i was missing

<form action="price_results.php" method="get">

its now working :D
i have also removed all the other stuff you said to,

thank you
Luke

LJackson
05-29-2009, 11:28 PM
Hi VIPStephan,

ok i have some ajax code which changes the data displayed within a div but it says it doesnt have an action tag which it doesent but im not sure what to include in the action tag???

at the mo i have

<form>
<div class="storefilter">
<b>Filter Brands By:</b>
<select name="cds" onchange="showCD(this.value)">
<?php
$options=array('entertainment','computing','electronics','clothing', 'misc');
foreach($options as $option){
if(isset($_SESSION['page_category']) && $_SESSION['page_category']==$option)
echo "<option value=\"{$option}\" selected=\"selected\">{$option}</option>";
else
echo "<option value=\"{$option}\">{$option}</option>";
}?>
</select>
</div>
</form>

which is using onchange which as you stared above shouldnt be used but how do i make this work with out the onclick would i just have the action link to the php file where the function is kept?

cheers for your help,

p.s im away for a few days so may not be able to respond for a while :) cheers

abduraooft
05-30-2009, 08:02 AM
ok i have some ajax code which changes the data displayed within a div but it says it doesnt have an action tag which it doesent but im not sure what to include in the action tag??? You need to adopt a progressive enhancement (http://en.wikipedia.org/wiki/Progressive_enhancement) strategy for your pages. ie, they should serve the basic functionalities even in the absence of javascript or any other things.

LJackson
06-01-2009, 04:32 PM
hi mate im back from my weekend away :D

thats an interesting read above, which is very true and something i hadn't even considered up until now. with that being said, how do i solve my original problem and 2/ what would i need to do to make the page with this ajax code accessable to those with js turned off???

thanks for the info
Luke

LJackson
06-02-2009, 11:41 AM
can anyone help me with this?

the problems is i have a form with a list box which when a value is chosen the data in the div below this list box changes by using ajax..

here is the form

<form>
<div class="storefilter">
<b>Filter Brands By:</b>
<select name="cds" onchange="showCD(this.value)">
<?php
$options=array('entertainment','computing','electronics','clothing', 'misc');
foreach($options as $option){
if(isset($_SESSION['page_category']) && $_SESSION['page_category']==$option)
echo "<option value=\"{$option}\" selected=\"selected\">{$option}</option>";
else
echo "<option value=\"{$option}\">{$option}</option>";
}?>
</select>
</div>
</form>

the trouble im having is that it doesnt validate and it says i need an action tag so what i want to know is how do i include an action tag ito this form and what do i set the acton to? as it is working as i want at the mo so im not sure how to keep it working with the inclusion of the action tag?

thanks
Luke

VIPStephan
06-02-2009, 11:53 AM
The question is: If you are pulling and executing this with AJAX, why do you need a form at all? Couldnít it be any kind of element that is just styled like a combo box?

Also for more detailed advice we need to see your entire code.
What I see here and what I can guess from the above code is that what you have currently isnít too user friendly yet. What happens if people have no JavaScript?

So, as proper approach Iíd recommend: Write a plain HTML form with proper PHP processing so that it works without JavaScript. Then use JavaScript to manipulate the form (e. g. by removing certain elements/attributes through DOM manipulation or disabling the default action and using the AJAX functionality instead).

This is progressive enhancement in all its beauty.

LJackson
06-02-2009, 12:03 PM
This is progressive enhancement in all its beauty.

Very beautiful if you know what your doing :D

are you suggesting that i just have the combo/list box there without the form tags? or is there another way to create an element?

i relise that this isnt user friendly yet but to be honest im not sure how to get the same results without the use of js. :(

questions
1/ how do i achieve this without js?
2/ how do i solve the validation error with my current code above? validation error is

Line 142, Column 7: required attribute "action" not specified

<form>



The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>

3/ whats the next step should i solve the current problem with the inclusion of the form action element or should i get the user friendly problem solved first???

thanks
mate
Luke

abduraooft
06-02-2009, 12:06 PM
Don't you know how to submit a form to a php page and process the submitted data for showing some message to the user?

LJackson
06-02-2009, 12:15 PM
it turns out nope :(

here is what ive tried

<form>
<form action="getcd.php" method="post" name="form1" target="_self" id="form1">
<select name="cds">
<?php
$options=array('entertainment','computing','electronics','clothing', 'misc');
foreach($options as $option){
if(isset($_SESSION['page_category']) && $_SESSION['page_category']==$option)
echo "<option value=\"{$option}\" selected=\"selected\">{$option}</option>";
else
echo "<option value=\"{$option}\">{$option}</option>";
}?>

</select>
<input type="submit" name="submit" id="submit" value="Submit" />
</form>

but nothings happening the page refreshes but nothing happens

EDIT
-----

ok i can now get the info to show but it shows on a new page and not on the current one inside the div
here is the code i used

<form action="getcd.php" method="GET">
<div class="storefilter">
<b>Filter Brands By:</b>
<select name="cds">
<?php
$options=array('entertainment','computing','electronics','clothing', 'misc');
foreach($options as $option){
if(isset($_SESSION['page_category']) && $_SESSION['page_category']==$option)
echo "<option value=\"{$option}\" selected=\"selected\">{$option}</option>";
else
echo "<option value=\"{$option}\">{$option}</option>";
}?>
</select>
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</form>


any ideas how i can get the info to display in the current div <div id="storelist"> instead of a blank page???

thanks
Luke

LJackson
06-02-2009, 12:24 PM
here is my getcd.php page

<?php
session_start();
$q=$_GET["q"];

if(isset($_SESSION['page'])){
$page = $_SESSION['page'];
}
if ($page == "stores"){
$querystring = "category = '$q' ORDER BY storeName ASC";
}
elseif($page == "brand"){
$querystring = "category = '$q' AND isbrand = '1' ORDER BY storeName ASC";
}

ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting (E_ALL);?>

<link rel="stylesheet" type="text/css" href="stylesheets/main_category_stores.css"/>
<link rel="stylesheet" type="text/css" href="css/rating.css"/>
<?php


require_once('dbinfo.php');
require('_drawrating.php');
if (!$db_found) {
die('Could not connect: ' . mysql_error());
}

mysql_query("SET NAMES 'utf8'");

$stores = "SELECT *
FROM stores
WHERE $querystring";
$query = mysql_query($stores);
while ($row = mysql_fetch_array($query)){
$name = $row['name'];
$storename = $row['storeName'];
?>

<div class='storecontainer'>

<div class='storeheader'>
<?php print '<img src="' . $row['logo'] .'"
alt="' . $row['storeName'] .'"
title="' . $row['storeName'] .'" />';?>

<div class='featuredRating'>
<?php print rating_bar($name.'total','5','static');?>
</div>

</div>

<div class='desccontainer'>

<div class='storedesc'>
<?php echo htmlspecialchars($row['description']);?>
</div>

<div class='dc_availability'>
<?php
$getcodes = "SELECT *
FROM codes
WHERE storeID = '$name'
AND expireDate >= CURDATE()";
$query2 = mysql_query($getcodes);
if(!$query2){
die(mysql_error());
}
$rows = mysql_num_rows($query2);
if ($rows <> 0){?>
<a href="discount.php?sID=<?php print $row['name'];?>"<img src="images/discount.png" alt="Discount Codes Available Click To See Details" title="Discount Codes Available Click To See Details" border="0" /></a>
<?php }
else {

}
?>
</div>

</div>

<div class='divider'></div>

<div class='storeinfo_link'>

<div class='storeimg'>
<a href="rate.php?sID=<?php print $row['name'];?> ">
<img src="images/ratestore.png"
alt="<?php 'Rate ' . $row['storeName'];?>"
title="<?php print 'Rate ' . $row['storeName'];?>"
border="0" /></a>
</div>

<div class='visitstore'>
<a href="<?php print $row['storeLink'];?>">
<img src="images/visitstore.gif"
alt="<?php 'Visit ' . $row['storeName'];?>"
title="<?php print 'Visit ' . $row['storeName'];?>"
border="0" /></a>
</div>

</div>
</div>

<?php
}?>
</div>

LJackson
06-02-2009, 05:08 PM
ok i have sorted it :)

i have modified my code on my php page so that i no longer need the getcd.php page for this method


<form action="brand.php" method="GET" target="_self">
<div class="storefilter">
<b>Filter Brands By:</b>
<select name="category">
<?php
$options=array('entertainment','computing','electronics','clothing', 'misc');
foreach($options as $option){
//if(isset($_SESSION['page_category']) && $_SESSION['page_category']==$option)
//echo "<option value=\"{$option}\" selected=\"selected\">{$option}</option>";
//else
if(isset($_GET['category']) && $_GET['category']==$option)
echo "<option value=\"{$option}\" selected=\"selected\">{$option}</option>";
else
echo "<option value=\"{$option}\">{$option}</option>";
}?>
</select>
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</form>

i now need to set up a check to see if the user has js enabled and if so set it to run my other form?

thanks
Luke

abduraooft
06-02-2009, 05:18 PM
i now need to set up a check to see if the user has js enabled and if so set it to run my other form? I think it's now as simple as adding onchange="showCD(this.value)" to your <select> element. Isn't it?

LJackson
06-02-2009, 05:54 PM
doesnt seem to work mate, i think because it had an action it needs to be submitted to work?

any ideas.

cheers mate

VIPStephan
06-02-2009, 07:23 PM
You don’t need to check if JS is available/enabled. If it is the form will work. If it isn’t it will work as well, just not as smooth or pretty as with JS. The only thing you’d need to do is check if the form element is there (if(getElementById('…')) {…}) and if yes then prevent the form from submitting and do the AJAX thing instead. If they don’t have JS it just won’t get exectued and the form will work with its basic functionality.

LJackson
06-03-2009, 02:18 PM
thanks guys for your help and assistance, i have solved this problem now thanks

Luke



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum