Disable text input

JavaScript and client side scripting.

Moderator: General Moderators

vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Disable text input

Post by vchris »

I'm sure this question sounds stupid but it seems I can't find the answer anywhere.

I want to disable on page load and once a certain check box is checked the text input is enabled and the select is disabled.

Here's what I got:

Code: Select all

newgscheduleform.alocation.disabled = true;
if(newgscheduleform.awayenable.checked == true){
	newgscheduleform.hlocation.enabled = false;
}
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

so what's the problem, you just had to add a line to disable the combo

Code: Select all

<input type="checkbox" name="awayenable" onclick="update(this.checked)">
--------------------------
<script>
newgscheduleform.alocation.disabled = true; 

function update(state)
{
 if(state)
 { 
   newgscheduleform.alocation.enabled = false; 
   newgscheduleform.locationCOMBO.enabled = true;
 } 
 else
 { 
   newgscheduleform.alocation.enabled = true; 
   newgscheduleform.locationCOMBO.enabled = false;
 }
}
</script>
this will make the checkbox work as a flip-switch
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

I just tried your code and it doesn't work. I double checked the names of the fields and form, everything is fine. My script is at right location.

I have no idea why it wouldn't work...
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

It says I got some errors in my javascript.

Most of them is that my form name is not defined but the name is correct.
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

It says my form name is not defined but it is

Code: Select all

<form name="newgscheduleform" method="post" action="gschedule_new_admin.php">
I can write anything in my script and it doesn't work...
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

hint:

Code: Select all

document.forms['newgscheduleform'].elements['elementname']
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

Still doesn't work...

I got this:

Code: Select all

document.forms['newgscheduleform'].elements['alocation'].disabled = true;
nothing is disabled. I tried also:

Code: Select all

document.forms['newgscheduleform'].elements['alocation'].value = 'hello';
Didn't write anything in the input field...

This is starting to suck. I have a header file. I tried inserting the script in the header file as well as the content file itself and doesn't work...

I added a "document.write = 'hi';
doesn't work...
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

It says "document.forms['newgscheduleform'].elements['alocation'].disabled = true;" has no properties.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

Posting the whole code will help us greater in understanding it....
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

Header file:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Clarence-Rockland Girls Hockey Association</title>
	<meta name="DESCRIPTION" content="Clarence-Rockland Girls Hockey Association">
	<meta name="KEYWORDS" content="hockey, clarence, rockland, hockey association, girls hockey, clarence-rockland girls hockey association">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	
</head>
<body>


<script language="JavaScript1.2">
<!--

var trailLength = 5 // The length of trail (8 by default; put more for longer "tail")
var path = "images/cursor.gif" // URL of your image

// do NOT modify anything beyond this point
var isIE = false,isNav = false,range = "all.",style = ".style",i,d = 0
var topPix = ".pixelTop",leftPix = ".pixelLeft",images,storage
if (document.layers) { // browser sniffer
	isNav = true,range = "layers.",style = "",topPix = ".top",leftPix = ".left"
} else if (document.all) {
	isIE = true
}
function initTrail() { // prepares the script
	images = new Array() // prepare the image array
	for (i = 0; i < parseInt(trailLength); i++) {
		images[i] = new Image()
		images[i].src = path
	}
	storage = new Array() // prepare the storage for the coordinates
	for (i = 0; i < images.length*3; i++) {
		storage[i] = 0
	}
	for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
		(isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + images[i].src + '"></layer>')
	}
	trail()
}
function trail() { // trailing function
	for (i = 0; i < images.length; i++) { // for every div/layer
		eval("document." + range + "obj" + i + style + topPix + "=" + storage[d]) // the Y-coordinate
		eval("document." + range + "obj" + i + style + leftPix + "=" + storage[d+1]) // the X-coordinate
		d = d+2
	}
	for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
		storage[i] = storage[i-2]
	}
	d = 0 // reset for future use
	var timer = setTimeout("trail()",35) // call recursively 
}
function processEvent(e) { // catches and processes the mousemove event 
	if (isIE) { // for IE
		storage[0] = window.event.y+document.body.scrollTop
		storage[1] = window.event.x+document.body.scrollLeft
	} else { // for Navigator
		storage[0] = e.pageY
		storage[1] = e.pageX
	}
}
if (isNav) {
	document.captureEvents(Event.MOUSEMOVE) // Defines what events to capture for Navigator
}
if (isIE || isNav) { // initiates the script
	initTrail() 
	document.onmousemove = processEvent // start capturing
}
//-->
</script>
<table cellspacing="0" cellpadding="0" width="750" align="center" class="maintable">
<tr>
	<td><img src="images/banner_left.jpg" alt="Clarence-Rockland Girls Hockey Association"></td>
	<td><img src="images/banner_right.jpg" alt="Clarence-Rockland Girls Hockey Association"></td>
</tr>
<tr>
	<td valign="top">
	<div class="navigation">
	<ul class="navlist">
		<?php 
		if(isset($_SESSION['userid'])){
			//Admin Links
			echo '<li><a href="userprofile.php">User Profile</a></li>'; 
			echo '<li><a href="agteam_admin.php">Atom Players</a></li>'; 
			echo '<li><a href="contactlist_admin.php">Committee Contact Info</a></li>';
			echo '<li><a href="feedback_admin.php">Feedback</a></li>';
			echo '<li><a href="links_admin.php">Links</a></li>';
			echo '<li><a href="news_admin.php">News</a></li>';
			echo '<li><a href="schedule_admin.php">Schedule</a></li>';
			echo '<li><a href="standings_admin.php">Standings</a></li>';
			echo '<li><a href="logout.php">Logout</a></li>'; 
		} else {
			//Public Links
			echo '<li><a href="index.php">News</a></li>';
			echo '<li><a href="contactlist.php">Committee Contact Info</a></li>';
			echo '<li><a href="midget_a_tryout_inv.php">Midget A Tryout Invitation</a></li>';
			//echo '<li><a href="atomplayers.php">Atom Teams</a></li>';
			//echo '<li><a href="schedule.php?month=' . (date('n')+1) . '&year=' . date('Y') . '">Schedule</a></li>';
			echo '<li><a href="tournaments.php">Tournament</a></li>';
			//echo '<li><a href="feedback.php">Feedback</a></li>';
			echo '<li><a href="links.php">Links</a></li>';
			echo '<li><a href="login.php">Login</a></li>';
		}
		?>
	</ul>
	</div>
	<img src="images/nav_bottom.jpg" alt="">
	<?php
	if(isset($page) && ($page=="schedule" || $page=="gschedule")) {
		echo '<table cellspacing="1" cellpadding="0" class="legendtable" align="center">
			<tr>
				<th class="tableheader">Legend</th>
			</tr><tr>';
		if($page=="schedule"){
			echo '
				<td><span class="boldred">Clarence Arena</span></td>
			</tr>
			<tr>
				<td><span class="boldgreen">Rockland Arena</span></td>
			';
			
		} else if($page=="gschedule"){
			echo '<td><span class="boldblue">Home Games</span></td>
			</tr>
			<tr>
				<td><span class="boldblack">Away Games</span></td>';
		}
		echo '</tr></table>';
	}
	?>
	</td>
	<td colspan="2" class="content">
Content file:

Code: Select all

<?php session_start(); ob_start(); ?>
<?php include('header.php'); ?>
<script language="javascript" type="text/javascript">

newgscheduleform.alocation.disabled = true;


function update(state){
	if(state){
		newgscheduleform.alocation.enabled = false;
		newgscheduleform.hlocation.enabled = true;
	}else{
		newgscheduleform.alocation.enabled = true;
		newgscheduleform.hlocation.enabled = false;
	}
}
</script>

<?php
if(!isset($_SESSION['userid'])){
	
	//Start defining the URL
	$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']);
	
	//Check for a trailing slash
	if((substr($url, -1) == '/') or (substr($url, -1) == '\\')){
		//Chop off slash
		$url = substr($url, 0, -1);
	}
	//Add the page
	$url .= '/login.php';
	
	header("Location: $url");
	exit();
	
} else {
	//Check if the form has been submitted
	if(isset($_POST['submit_x'])){
		//Include configuration file for error management and such
		require_once('config.php');
			
		//Initialize error array
		$errors = array();
		
		//If everything is OK
		if(empty($errors)){
		
			//Insert feedback in database
			require_once('mysql_connect.php');
		
			//Query the database
			$query = "INSERT INTO gschedule (gdate, gteam, gamelocation, opposingteam) VALUES('" . $_POST['gyear'] . "-" . $_POST['gmonth'] . "-" . $_POST['gday'] . " " . $_POST['ghour'] . ":" . $_POST['gminutes'] . ":00 ','" . $_POST['team'] . "','" . $_POST['hlocation'] . "', '" . $_POST['opposingteam'] . "')";
			
			//Run query
			$result = @mysql_query($query);
		
			//If it ran OK
			if($result){
				//Start defining the URL
				$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']);
				
				//Check for a trailing slash
				if((substr($url, -1) == '/') or (substr($url, -1) == '\\')){
					//Chop off slash
					$url = substr($url, 0, -1);
				}
				//Add the page
				$url .= '/gschedule_admin.php';
				
				header("Location: $url");
				//include('footer.php');
				exit();
			} else {
				echo 'Your new event was not submitted due to a system error.';
				echo '<p>' . mysql_error() . "<br><br>Query:" . $query . '</p>';
				include('footer.php');
				exit();
			}
			mysql_close();
		} else {
			for($i=0 ; $i<sizeof($errors) ; $i++){
				echo $errors[$i];
			}
		}
	} else if(isset($_POST['cancel_x'])){
		//Start defining the URL
		$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']);
		
		//Check for a trailing slash
		if((substr($url, -1) == '/') or (substr($url, -1) == '\\')){
			//Chop off slash
			$url = substr($url, 0, -1);
		}
		//Add the page
		$url .= '/gschedule_admin.php';
		
		header("Location: $url");
		exit();
	}
}

?>
<form name="newgscheduleform" method="post" action="gschedule_new_admin.php">
<table cellspacing="1" cellpadding="0" class="topheadertable" align="center">
<tr>
	<th class="tableheader" colspan="2">New Game</th>
</tr>
<tr>
	<th>Team</th>
	<td><select name="team" class="textfield">
	<option value="AG">Atom Girls</option>
	<option value="PG 1">PeeWee Girls 1</option>
	<option value="PG 2">PeeWee Girls 2</option>
	<option value="MG A">Midget Girls A</option>
	<option value="INTG B">Intermediate Girls B</option>
	<option value="BG C">Bantam Girls C</option>
	</select></td>
</tr>
<tr>
	<th>Home Location</th>
	<td><div style="float:left;"><select name="hlocation" class="textfield">
	<option value="Clarence">Clarence</option>
	<option value="Rockland">Rockland</option>
	</select></div>
	<div style="float:right;"><input type="checkbox" name="enableaway" onclick="update(this.checked)"> Away</div></td>
</tr>
<tr>
	<th>Away Location</th>
	<td><input type="text" name="alocation" class="textfield"></td>
</tr>
<tr>
	<th>Date</th>
	<td>
	<select name="gmonth" class="textfield">
	<?php
	$allmonths[0] = 'January';
	$allmonths[1] = 'February';
	$allmonths[2] = 'March';
	$allmonths[3] = 'April';
	$allmonths[4] = 'May';
	$allmonths[5] = 'June';
	$allmonths[6] = 'July';
	$allmonths[7] = 'August';
	$allmonths[8] = 'September';
	$allmonths[9] = 'October';
	$allmonths[10] = 'November';
	$allmonths[11] = 'December';
	
	for($i = 0 ; $i <= 11 ; $i++) {
		if($i == date('m')-1){
			$selected = ' selected';
		} else {
			$selected = null;
		}
		echo '<option value="' . ($i+1) . '"' . $selected . '>' . $allmonths[$i] . '</option>';
	}
	?>
	</select>
	
	<select name="gday" class="textfield">
	<?php 
	for($i = 1 ; $i <= 31 ; $i++) {
		if($i == date('j')){
			$selected = ' selected';
		} else {
			$selected = null;
		}
		echo '<option value="' . $i . '"' . $selected . '>' . $i . '</option>';
	}
	?>
	</select>
	
	<select name="gyear" class="textfield">
	<?php
	for($i = date('Y') ; $i <= date('Y')+1 ; $i++) {
		if($i == date('Y')){
			$selected = ' selected';
		} else {
			$selected = null;
		}
		echo '<option value="' . $i . '"' . $selected . '>' . $i . '</option>';
	}
	?>
	</select>
	
	</td>
</tr>
<tr>
	<th>Time</th>
	<td>
	<select name="ghour" class="textfield">
	<?php
	for($i = 1 ; $i <= 24 ; $i++) {
		echo '<option value="' . $i . '">' . $i . '</option>';
	}
	?>
	</select>
	:
	<select name="gminutes" class="textfield">
	<?php
	for($i = '00' ; $i <= 45 ; $i=$i+15) {
		echo '<option value="' . $i . '">' . $i . '</option>';
	}
	?>
	</select>
	<!---<select name="ampm" class="textfield">
		<option value="am">am</option>
		<option value="pm">pm</option>
	</select>--->
	</td>
</tr>
<tr>
	<td colspan="2" style="text-align:right;">
	<input type="image" name="cancel" src="images/btncancel.jpg" border="0">
	<input type="image" name="submit" src="images/btnadd.jpg" border="0">
	</td>
</tr>
</table>
</form>



<?php include('footer.php'); ?>
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

try adding "document." in front of your form name:

ie:

Code: Select all

document.newgscheduleform.fieldname.whatever
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

don't worry I tried about 10 times.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

this worked for me:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script language="javascript" type="text/javascript"> 

//document.newgscheduleform.alocation.disabled = true; 


function update(state){ 
    if(state.checked){ 
        document.newgscheduleform.alocation.disabled = false; 
        //document.newgscheduleform.hlocation.enabled = true; 
    }else{ 
        document.newgscheduleform.alocation.disabled = true; 
        //document.newgscheduleform.hlocation.enabled = false; 
    } 
} 
</script> 
</head>

<body>
<form name="newgscheduleform">
<input type="text" name="alocation" disabled="disabled">
<input type="checkbox" name="bob" onClick="update(this)">
</form>


</body>
</html>
vchris
Forum Contributor
Posts: 204
Joined: Tue Aug 30, 2005 7:53 pm
Location: Canada, Quebec

Post by vchris »

Is it possible my table inside the form could be creating this problem?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

nope...I would use the function that put up there as it seems to work and just put your disabled attribute right on the form field itself.
Post Reply