Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

New to Javascript. Need to show/hide elements

Status
Not open for further replies.
mych

mych

Programmer
May 20, 2004
248
GB
Hi I'm new to Javascript and need some help to get my head around this....

I have this function....
Code: 
<script type="text/javascript">

function ShowHide()
   {
   If document.getElementByName("LSAcheck").checked=true
      {
      document.getElementByName("LSAStartD").type="text"
      }
   Else
      {
      document.getElementByName("LSAStartD").type="hidden"
      }
   }
</script>

I have this in a form on a page
Code: 
<tr>
   <td align="right">LSA required:</td>
   <td align="left"><input type="checkbox" name="LSAcheck" onchange="ShowHide()"></input>
   &nbsp;<input type="hidden" name="LSAStartD" size="10"></input></td>
</tr>

Basically I want the LSAStartD text box to appear if the user checks the checkbox and not hide it if its unchecked.

Any help appreciated
 
Sort by date Sort by votes
Try using getElement[!]s[/!]ByName() (details: instead of the (incorrect) singular. This will return a collection (or null)... so you will have to iterate through it.

Use firefox as part of your development and check out the console tools available (Firebug is an excellent plugin that implements good javascript debugging functionality).

Let us know any specific issues or problems you are experiencing.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Thanks Jeff

Have corrected the typo and have even tried getElementsById() but still no joy. Do I need to refresh the page at all in some way?

Here is my code in full..
Code: 
<%
'<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
'<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
'<> Designed by Mychajlo Mykola Dubil November 2006
'<>
'<>	HLOR Web/SQL system
'<>
'<> Email: 
'<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
'<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html>

<head>

<title>HLOR 4.5</title>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />


<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

<link rel="stylesheet" type="text/css" href="stdtheme.css" />


<script type="text/javascript">

function ShowHide()
  {
  If document.getElementsById("LSAcheck").checked=true
	{
		document.getElementsById("LSAStartD").type="text"
	}
  Else
  	{
		document.getElementsById("LSAStartD").type="hidden"
	}
  }
</script>

</head>

<body>
			<!--#INCLUDE FILE="config.asp" -->

<%
sub FillDropDown(TableName, FieldName1, FieldName2)



		Response.Write ("<tr>")
		Response.Write ("<td align='right'>" & FieldName2 & ":</td>")


			strSQL = "SELECT " & FieldName1 & ", " & FieldName2 & " FROM " & TableName & " ORDER BY " & FieldName2 & ";"

			set rsSelectUsr = my_Conn.Execute (strSQL)


		Response.Write ("<td align='left'>")
		Response.Write ("<select length='20'>")
		Response.Write ("<option value=0>Please Select a " & FieldName2 & "</option>")


			Do While Not rsSelectUsr.EOF

		ValField1 = rsSelectUsr.Fields.Item(FieldName1).Value
		ValField2 = rsSelectUsr.Fields.Item(FieldName2).Value


		Response.Write ("<option value=" & ValField1  & ">" & ValField2 &"</option>")


			rsSelectUsr.MoveNext()

			loop

			rsSelectUsr.close
			set rsSelectUsr = Nothing


		Response.Write ("</select>")

		Response.Write ("</td>")
		Response.Write ("</tr>")

End sub %>


<Form>
	<table class="ex" width="95%" align="center">
		<tr>
			<td align="right">Project ID:</td>
			<td align="left"><Input type="text"size="10"></input>
		</tr>
		<tr>
			<td align="right">Project Name:</td>
			<td align="left"><input type="text"size="30"></input>
		</tr>
		<tr>
			<td align="right">LID:</td>
			<td align="left"><input type="text"size="8"></input>
		</tr>
		<tr>
			<td align="right">Project Description:</td>
			<td align="left"><textarea rows="3" cols="40"></textarea>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>

<% call FillDropDown("TblSIMUsers","SIMRefNo","SIM") %>

<% call FillDropDown("TblPIMUsers","PIMRefNo","PIM") %>

<% call FillDropDown("TblFJSPMUsers","FJSPMRefNo","FJSPM") %>

<% call FillDropDown("TblCGPMUsers","CGPMRefNo","CGPM") %>

<% call FillDropDown("TblLSMUsers","LSMRefNo","LSM") %>

<% call FillDropDown("TblSDMUsers","SDMRefNo","SDM") %>

		<tr>
			<td align="right">LSA required:</td>
			<td align="left"><input type="checkbox" name="LSAcheck" id="LSAcheck" onchange="ShowHide()"></input></td>
		</tr>
		<tr>
			<td align="right">Start Date:</td>
			<td align="left"><input type="hidden" name="LSAStartD" id="LSAStartD" size="10"></input>
			&nbsp;End Date:<input type="text" name="LSAEndD" size="10" disabled="disabled"></input></td>

		</tr>

		<tr>
			<td align="right">&nbsp;</td>
			<td align="left"><input type="submit" value="Submit"></input>
			<input type="button" value="Cancel"></input></td>
		</tr>

	</table>
</form>

</body>
</html>

Any help appreciated...Mych
 
Upvote 0 Downvote
Ooops.. You also need brackets around your "if" condition, and a double-equals to test for equality. I'm guessing you're a Vb developer ;-)

You should also get in the habit of adding semicolon statement delimiters... try this as a "good" version of your function:

Code: 
function ShowHide() {
	if (document.getElementByName('LSAcheck').checked == true) {
		document.getElementByName('LSAStartD').type = 'text';
	} else {
		document.getElementByName('LSAStartD').type = 'hidden';
	}
}

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks for your help Dan... took a while for your second message to sink in but I got it in the end - getElementsByName

Still does not work for me though so have tried another tact as I have some lables 'Start Date' and 'End Date' that would stay visible no mater what in my code.

Decided to make the text inputs disabled and the enable them if the check box is ticked.

Function is now
Code: 
<script type="text/javascript">

function ShowHide() {
    if (document.getElementsByName('LSAcheck').checked == true) {
        document.getElementsByName('LSAStartD').disabled = false;
        document.getElementsByName('LSAEndD').disabled = false;
        document.getElementsByName('LSAStartD').focus = true;
    } else {
        document.getElementsByName('LSAStartD').disabled = true;
        document.getElementsByName('LSAEndD').disabled = true;
    }
}

</script>

... and the two input text box code has changed to
Code: 
...
		<tr>
			<td align="right">LSA required:</td>
			<td align="left"><input type="checkbox" name="LSAcheck" id="LSAcheck" onchange="ShowHide()"></input></td>
		</tr>
		<tr>
			<td align="right">Start Date:</td>
			<td align="left"><input type="text" name="LSAStartD" id="LSAStartD" size="10" disabled="disabled"></input>
			&nbsp;End Date:<input type="text" name="LSAEndD" id="LSAEndD" size="10" disabled="disabled"></input></td>

		</tr>

		<tr>
			<td align="right">&nbsp;</td>
			<td align="left"><input type="submit" value="Submit"></input>
			<input type="button" value="Cancel"></input></td>
		</tr>

I get no errors at any point. When I check the checkbox I was expecting the two text boxes to be enabled and the focus to drop to the first input (Start Date).

Thanks for persevereing and btw I have been a Vb-er for most of my programming attempts.
 
Upvote 0 Downvote
There is no "getElementsByName" method IIRC... not sure how that one slipped in.

To get form elements by their name, use:

Code: 
document.forms['formName'].elements['elementName']

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
There is a getElementsByName method Dan, I just don't think it's very commonly used. It does allow you to group elements by name that aren't in the same form, so you can bypass the whole form and elements collection method. Although, it probably means that the html coding is sloppy if similar names are thrown about in different forms [smile]


-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Dan,

No not yet... As I said I've changed my tact and I'm going down the track of switching between the boxes being disabled when the checkbox is unchecked and enabled when checked.

It seems to me as if I need to refresh the page or something so that the textboxes change state.

Appreciate all help at the same time I'm trying all sorts of combinations and learning on the way.. :)

Mych
I've not failed just found a 1000s ways that don't work!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
760
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
632
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
707
xwb
xwb
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
257
Daniel K
Daniel K

Part and Inventory Search

Sponsor

Back
Top