1 Replies - 656 Views - Last Post: 20 January 2011 - 10:40 AM

#1 mufasa  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 44
  • Joined: 12-February 10

Trouble trying to re-disable a form input

Posted 20 January 2011 - 10:13 AM

I'm trying to make an editable form, as in you view information in it and you can edit it if you wish. Currently, javascript-wise I'm just trying to enable all the fields by pressing the edit button and then disable them all again by hitting either the cancel changes button or save changes button. This is my first time using javascript, so I'm probably just unable to find the problem which is most likely glaringly obvious to everyone else. But my question is this, can you disable a button with javascript and then enable it again? Or is there some problem with this?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<title>
				Fly Info
			</title>
		
		<link rel="stylesheet" href="css/flyStockInfoPanel.css" type="text/css" />

		<!--Scripts-->		
		<script type="text/javascript">
			<!--
				function edit(){
					toggleFormInputStates();
				}

				function saveChanges(){
					toggleFormInputStates();
				}

				function cancelChanges(){
					toggleFormInputStates();
				}
				
				function toggleFormInputStates(){
					var frm=document.forms['flyInfo'].elements;
					for(var i=0; i<frm.length; i++){
						frm[i].disabled = !frm[i].disabled;
					}
				}
				
				function moveToFlyStock(var1){
					var url=document.location.href;
					var indexOfID=url.search("stockID");
					if(indexOfID < 0){
						alert("You haven't searched for a stock yet!");
					}else{
						var indexOfstrnShrtHnd=url.search("&strnShrtHnd");
						var mainURL=url.substring(0, indexOfID);
						var index=url.substring(indexOfID, indexOfstrnShrtHnd);
						var newIndex=(index + var1);
						if(newIndex < 1){
							alert("This is the first stock!");
						}else{
							var newURL=mainURL.concat(newIndex);
							document.location.href=newURL;
						}
					}
				}

			//-->
		</script>
		
	</head>

	<body>

		<div id="content">
			<div id="infoTable">
				<div id="flyStockInfoPanel">
					<form action="lookUpFlyStock.php" method="get" name="flyInfo">
						
						<!--group 1-->
						<div id="idInfo">
							<span class="padding">
								<label for="stockID">
									Stock ID:
								</label>
								<input type="text" name="stockID" disabled />
							</span>
							
							<span class="padding">
								<label for="strnShrtHnd">
									Strain Shorthand
								</label>
								<input type="text" name="strnShrtHnd" size="50" disabled />
							</span>
							
							<span class="padding">
								<input type="checkbox" name="dcsd" disabled />
								<label for="dcsd">
									Deceased
								</label>
							</span>
						</div>
						
						<br />
						<!--end group 1-->
						
						<!--group 2-->
						<div id="chromosomes">
							<div id="aChromosomes">
								<span class="padding">
									<label for="chrm1a">
										Chromosome 1a:
									</label>
									<input type="text" name="chrm1a" disabled />
								</span>

								<span class="padding">
									<label for="chrm2a">
										Chromosome 2a:
									</label>
									<input type="text" name="chrm2a" disabled />
								</span>
								
								<span class="padding">
									<label for="chrm3a">
										Chromosome 3a:
									</label>
									<input type="text" name="chrm3a" disabled />
								</span>
							</div>

							<br />

							<div id="bChromosomes">
								<span class="padding">
									<label for="chrm1b">
										Chromosome 1b:
									</label>
									<input type="text" name="chrm1b" disabled />
								</span>
								
								<span class="padding">
									<label for="chrm2b">
										Chromosome 2b:
									</label>
									<input type="text" name="chrm2b" disabled />
								</span>

								<span class="padding">
									<label for="chrm3b">
										Chromosome 3b:
									</label>
									<input type="text" name="chrm3b" disabled />
								</span>
							</div>

							<br />
						</div>
						<!--end group 2-->
						
						<!--group 3-->
						<div id="notes">
							<span class="padding">
								<label for="notes">
									Notes:
								</label>
								<textarea name="notes" rows="4" disabled="disabled"></textarea>
							</span>
							
							<span class="padding">
								<label for="keywords">
									Keywords:
								</label>
								<textarea name="keywords" rows="4" disabled="disabled"></textarea>
							</span>
							
							<br />

						</div>
						<!--end of group 3-->
						
						<!--group 4-->
						<div id="extraFlyStockInfo">
							<span class="padding">
								<label for="stckSrc">
									Source:
								</label>
								<input type="text" name="stckSrc" disabled />
							</span>
							
							<span class="padding">
								<label for="dtEntrd">
									Date Entered:
								</label>
								<input type="text" name="dtEntrd" disabled />
							</span>
							
							<span class="padding">
								<label for="entrdBy">
									Entered By:
								</label>
								<select name="entrdBy" disabled>
									<option value="-">----------</option>
									<option value="Bob">Bob</option>
									<option value="Judy">Judy</option>
									<option value="Nancy">Nancy</option>
									<option value="Fred">Fred</option>
								</select>
							</span>
							

							
							<br />
						</div>
						<!--end of group 4-->
						
						<!--group 5-->
						<div id="flyLookupButtons">
							<span class="padding">
								<input type="button" value="Previous" name="previous" onclick="moveToFlyStock(-1)"/>
							</span>
							<span class="padding">
								<input type="button" value="Next" name="next" onclick="moveToFlyStock(1)"/>
							</span>
							<br />
							<span class="padding">
								<input type="button" value="Edit" name="editButton" onclick="edit()"/>
							</span>
							<span class="padding">
								<input type="button" value="Save Changes" name="saveChanges" onclick="saveChanges()" disabled />
							</span>
							<span class="padding">
								<input type="button" value="Cancel Changes" name="cancelChanges" onclick="cancelChanges()" disabled/>
							</span>
						</div>
						<!--end of group 5-->
						
					</form>
				</div>
			</div>
		</div>
	</body>
</html>




EDIT: I added alerts to the saveChanges and cancelChanges methods and they're not being reached. Would it be possible that even though clicking on the edit button sets their disable=false, javascript still thinks that they are disabled and so even though their view is enabled (gui change) their onclick is still disabled?

This post has been edited by mufasa: 20 January 2011 - 10:40 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Trouble trying to re-disable a form input

#2 Janitor  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 56
  • Joined: 30-July 10

Re: Trouble trying to re-disable a form input

Posted 20 January 2011 - 10:40 AM

This examples works on the assumption that Javascript is disabled...

You could do the similar for your table editing...This is just an example

<input type="submit" value="Submit" id="submitBtn" disabled />

<script type="text/javascript">
var _onload = window.onload || function()
{
  document.getElementById('submitBtn').disabled = false;
}

_onload();
</script>



http://stackoverflow...ipt-is-disabled
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1