[SOLVED] function vs inline script problem

next · August 25, 2008

Ok so i have a search form where onclick i need to erase default value ("Search!"):

		<form name="search_form" id="search_form" action="search.php" method="get">
		<input type="text" id="search" name="search" value="Search!" size="30" maxlength="100" />

		<input type="image" src="assets/search_btn.gif" id="search_btn" alt="search" />
	</form>

i want to erase stuff via function and not inline code, but it's not working out and firebug is not returning any errors.

Here's my js code:

			function clear(default_value) {
			alert(this.value);
			if(this.value == default_value) this.value = '';

		return void(0);
		}

html:

<input type="text" id="search" name="search" value="Search!" size="30" maxlength="100" onclick="clear('Search!');" />

the above is not working for some reason, however if i use inline code it works fine. Example:

<input type="text" id="search" name="search" value="Search!" size="30" maxlength="100" onclick="if(this.value == 'Search!') this.value = '';" />

Here's a complete code incase it's needed:

<?php
require('Zend/Config.php');
require('Zend/Db/Adapter/Pdo/Mysql.php');

//load configuration file
$config = new Zend_Config(require($_SERVER['DOCUMENT_ROOT'] . '/MovieTalk_2/config/config.php'));

//connect to database
try {
	$dbh = Zend_Db::factory($config->database);
	$dbh->setFetchMode(Zend_Db::FETCH_OBJ);

} catch(Zend_Exception $e) {
	echo $e->getMessage();
}

require($config->dir->business->forum);
require($config->dir->business->user);

$user = new User();

$loggedIn = true;
$admin = false;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css" />
<link rel="stylesheet" href="styles/general.css" type="text/css" />
<title><?php echo $config->general->site_title; ?></title>
<script language="javascript">
	<!--
		function clear(default_value) {
			alert(this.value);
			if(this.value == default_value) this.value = '';

		return void(0);
		}

		window.onload = function() {
			 if(document.images) {
				var imgNames = new Array("home_btn_h", "login_btn_h", "reg_btn_h", "del_forum_btn", "msgs_btn_h", "new_forum_btn_h", "reg_btn_h", "unread_btn_h");
				var imgs = new Array();

				for(var i=0; i<=imgNames.length; i++) {
					imgs[i] = new Image(87, 30);
					imgs[i].src="assets/" + imgNames[i] + ".gif";
				}
			}
		}
	-->
</script>
</head>

<body id="doc3" class="yui-t4">
<!--*************************
*************************
** Head
contents:
*logo
*spider man image
*navigation
*search
*************************
*************************-->
<div id="hd">
	<!--logo and spider man images-->
	<a href="<?php echo $config->dir->locations->index; ?>"><img src="assets/logo.gif" alt="MovieTalk" /></a>
	<div id="sp_man"></div>

	<!--Search input-->
	<form name="search_form" id="search_form" action="search.php" method="get">
		<input type="text" id="search" name="search" value="Search!" size="30" maxlength="100" onclick="clear('Search!');"/>

		<input type="image" src="assets/search_btn.gif" id="search_btn" alt="search" />
	</form>
	<!--***********************
	*************************
	** Navigation
	*************************
	*************************-->
	<ul id="navi">
		<?php //If non-admin user is logged in
			if($loggedIn && !$admin) { ?>
				<li id="home"><a href="<?php echo $config->dir->locations->index; ?>" class="hidden"><span class="hidden">Home</span></a></li>
				<li id="messages"><a href="#" class="hidden"><span class="hidden">Messages</span></a></li>
				<li id="unread"><a href="#" class="hidden"><span class="hidden">Unread Posts</span></a></li>
				<li id="logout"><a href="#" class="hidden"><span class="hidden">Log out</span></a></li>

			<?php //if admin is logged in
			} else if($loggedIn && $admin) { ?>
				<li id="home"><a href="<?php echo $config->dir->locations->index; ?>" class="hidden"><span class="hidden">Home</span></a></li>
				<li id="messages"><a href="#" class="hidden"><span class="hidden">Messages</span></a></li>
				<li id="unread"><a href="#" class="hidden"><span class="hidden">Unread Posts</span></a></li>
				<li id="new"><a href="#" class="hidden"><span class="hidden">New Forum</span></a></li>
				<li id="delete"><a href="#" class="hidden"><span class="hidden">Delete Forum</span></a></li>
				<li id="logout"><a href="#" class="hidden"><span class="hidden">Log out</span></a></li>

			<?php //guest is viewing the forum.
			} else { ?>
				<form name="login_form" id="login_form" action="' . $_SERVER['PHP_SELF'] . '?login-attempt=true' .  '" method="post">
					<li><label for="username">Username:</label><input type="text" id="username" name="username" size="15" maxlength="50"/></li>
					<li><label for="password">Password:</label><input type="password" id="password" name="password" size="15" maxlength="50" /></li>

					<li>
						<input type="image" id="login" 
						onmouseover="this.src='assets/login_btn_h.gif';"
						onmouseout="this.src='assets/login_btn.gif';" src="assets/login_btn.gif" alt="login" />
					</li>
				</form>
				<li id="register"><a href="#"><span class="hidden">Register</span></a></li>
			<?php } ?>
	</ul>
</div>

haku · August 26, 2008

Before I move on to the solution, I think I need to tell you that both methods you are using are inline methods. If you include the javascript in the html, it's inline. Since you have javascript the html in both your examples, neither is external. This is how you write the external function:

var target = document.getElementById('search')
target.onfocus = function()
{
   if(this.value == 'Search!')
   {
      this.value = ""
   }
}

If you want to be able to use this code with multiple inputs, you can do it like this:

function clear_value(id, default_value)
{
   target = document.getElementById(id)
   if(target.value == default_value)
   {
      target.value = ""
   }
}

function clear_search()
{
   var target = document.getElementById('search')
   target.onfocus = function()
   {
      clear_value('search', 'Search!')
   }
}

window.onload = function()
{
   clear_search()
}

To add other inputs, all you have to do is create a new function in the same form as 'clear_search()', and call that function in the window.onload function, using the applicable ID and search value when calling 'clear_value()'. By setting up your functions this way, you can take ALL javascript (the on___ functions) out of your HTML, as it will all be external.

next · August 26, 2008

Great, thanks!

Sign In

[SOLVED] function vs inline script problem

Recommended Posts

next

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

next

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information