Javascript Show/hide form doesnt work....

Question

dwssassin 0 Newbie Poster

14 Years Ago

So I want to show hide various parts of a form based on html form entries and this is what I have so far.

<script language="JavaScript">
  function showhidefield(method)
  {
	
	
	if (method = 1)
    {
      document.getElementById("hideablearea").style.display = 'block';
	        document.getElementById("hideablearea2").style.display = 'none';
				        document.getElementById("hideablearea3").style.display = 'none';


    }
    if (method = 2)
    {
      document.getElementById("hideablearea").style.display = "none";
	        document.getElementById("hideablearea2").style.display = "block";
	        document.getElementById("hideablearea3").style.display = "block";

    }
	if (method = 3)
	{
		      document.getElementById("hideablearea").style.display = "block";
      document.getElementById("hideablearea2").style.display = "block";
	        document.getElementById("hideablearea3").style.display = "block";


	}
	else
	{
	document.getElementById("hideablearea").style.display = "none";
	        document.getElementById("hideablearea2").style.display = "none";	
				        document.getElementById("hideablearea3").style.display = "none";	

	}
	
  }
</script>
</head>
<body>


<form name="newentry" method="post" action="registration.php" onSubmit="return formCheck(this) && validatePwd() && checkEmail() ;">
<table border="0" width="225" align="center">
    <tr>
        <td width="219" bgcolor="#999999">
            <p align="center"><b><span style="font-size: 12pt"><font color="white">New Reminder</font></span></b></p>
        </td>
    </tr>
    <tr>
        <td width="219">
            <table border="0" width="282" align="center">
                    <tr>
                        <td width="116"><span style="font-size:10pt;">Method:</span></td>
                        <td width="156"><select name="method" onChange= "showhidefield(document.getElementById('method').value)">
                        <OPTION VALUE="0"></OPTION>
<option value="1">Email</option>
<option value="2">Text Message</option>
<option value="3">Both</option></td>
                    </tr>
                    <tr id='hideablearea' style='display:none;'>
                                     

                        <td width="116"><span style="font-size:10pt;">Email:</span></td>
                        <td width="156"> 
							<input type="text" name="email" maxlength="100"></td>
                           

                    </tr>
                <tr id='hideablearea2' style='display:none'>
                        <td width="116"><span style="font-size:10pt;">Cell:</span></td>
                        <td width="156"><input type="text" name="cell" maxlength="10"></td>
                    </tr>
                <tr id='hideablearea3' style='display:none'>
                        <td width="116"><span style="font-size:10pt;">Carrier:</span></td>
                        <td width="156"><select name="carrier"><OPTION VALUE="">
<option value="@message.alltel.com">Alltel</option>
<option value="@txt.att.net">ATT</option>

</select></td>
                    
                </tr>

Basically a form field called method asks weather the person wants to be contacted by Email, Cellphone or both if they choose Email: only the email field will show, and if they choose cellphone: the cell number and carrier dropdown menu will be shown.

I have tried this in many different ways (placing attributes in form elements etc.) with no success. Any ideas?!

Thanks!

javascript

3 Contributors
7 Replies
169 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by dwssassin

gumape 3 Newbie Poster

14 Years Ago

I made some modification in your source code:

- the following line:
<select name="method" onChange= "showhidefield(document.getElementById('method').value)">
has been replaced to
<select name="method" onChange= "this.value)">

The getElementById method returns the element with the specified id in the current document, so it returns null in that case.
(Note that the getElementById method works differently in Internet Explorer than in other browsers. It searches and returns the element matched by id and name attributes as well.)

Inside an event handler (except the onload and onunload events), the this always refers to the current html object.

- the type of a select element's value property is string not a number, so the showhidefield method get a string as a method parameter ("1" == 1 is not true).
I made some other modification in the showfield method.

The new source is:

<head>
	<script language="JavaScript">
		function showhidefield (method) {
			switch (method) {
			case "1":
				document.getElementById("hideablearea").style.display = 'block';
				document.getElementById("hideablearea2").style.display = 'none';
				document.getElementById("hideablearea3").style.display = 'none';
				break;
			case "2":
				document.getElementById("hideablearea").style.display = "none";
				document.getElementById("hideablearea2").style.display = "block";
				document.getElementById("hideablearea3").style.display = "block";
				break;
			case "3":
				document.getElementById("hideablearea").style.display = "block";
				document.getElementById("hideablearea2").style.display = "block";
				document.getElementById("hideablearea3").style.display = "block";
				break;
			default:
				document.getElementById("hideablearea").style.display = "none";
				document.getElementById("hideablearea2").style.display = "none";	
				document.getElementById("hideablearea3").style.display = "none";
			}
		}
	</script>
</head>
<body>
	<form name="newentry" method="post" action="registration.php" onSubmit="return formCheck(this) && validatePwd() && checkEmail() ;">
		<table border="0" width="225" align="center">
			<tr>
				<td width="219" bgcolor="#999999">
					<p align="center"><b><span style="font-size: 12pt"><font color="white">New Reminder</font></span></b></p>
				</td>
			</tr>
			<tr>
				<td width="219">
					<table border="0" width="282" align="center">
						<tr>
							<td width="116"><span style="font-size:10pt;">Method:</span></td>
							<td width="156">
								<select name="method" onChange="showhidefield (this.value)">
									<option value="0"></option>
									<option value="1">Email</option>
									<option value="2">Text Message</option>
									<option value="3">Both</option>
								</select>
							</td>
						</tr>
						<tr id='hideablearea' style='display:none;'>
							<td width="116"><span style="font-size:10pt;">Email:</span></td>
							<td width="156"> 
								<input type="text" name="email" maxlength="100">
							</td>
						</tr>
						<tr id='hideablearea2' style='display:none'>
							<td width="116"><span style="font-size:10pt;">Cell:</span></td>
							<td width="156"><input type="text" name="cell" maxlength="10"></td>
						</tr>
						<tr id='hideablearea3' style='display:none'>
							<td width="116"><span style="font-size:10pt;">Carrier:</span></td>
							<td width="156">
								<select name="carrier">
									<option value=""></option>
									<option value="@message.alltel.com">Alltel</option>
									<option value="@txt.att.net">ATT</option>
								</select>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</form>
</body>

gumape 3 Newbie Poster

14 Years Ago

Some remarks:
- I think the code of the showfield method is more readable in the following form:

function showhidefield (method) {
			var hideablearea = document.getElementById("hideablearea");
			var hideablearea2 = document.getElementById("hideablearea2");
			var hideablearea3 = document.getElementById("hideablearea3");

			switch (method) {
			case "1":
				hideablearea.style.display = 'block';
				hideablearea2.style.display = 'none';
				hideablearea3.style.display = 'none';
				break;
			case "2":
				hideablearea.style.display = "none";
				hideablearea2.style.display = "block";
				hideablearea3.style.display = "block";
				break;
			case "3":
				hideablearea.style.display = "block";
				hideablearea2.style.display = "block";
				hideablearea3.style.display = "block";
				break;
			default:
				hideablearea.style.display = "none";
				hideablearea2.style.display = "none";	
				hideablearea3.style.display = "none";
			}
		}

- If you need further details and examples, see the following links:
getElementById method,
value property (select, option),
onchange event

Edited 14 Years Ago by gumape because: n/a

dwssassin commented: Thanks for the help! +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dwssassin 0 Newbie Poster · Answer 1 · 2010-08-10T22:40:57+00:00

Dude thanks so much. PROBLEM FINALLY SOLVED. However the only issue now is that the table isnt lined up but w/e. On another note: How do I mark this thread as solved and give you credit?

Thanks again!

Taywin 312 Posting Virtuoso · Answer 2 · 2010-08-10T23:05:55+00:00

If you use 'display' property, the object will not be in the display layout; as a result, the line up may be messed up. The other property 'visibility' allows your object to still be in place but not being display; however, the area will become empty which may not be what you want in many cases. You may try the visibility ('hidden' or null) and see how it works.

dwssassin 0 Newbie Poster · Answer 3 · 2010-08-10T23:35:24+00:00

If you use 'display' property, the object will not be in the display layout; as a result, the line up may be messed up. The other property 'visibility' allows your object to still be in place but not being display; however, the area will become empty which may not be what you want in many cases. You may try the visibility ('hidden' or null) and see how it works.

Thanks tried that. It keeps the table in line however it creates blank spots. This does look better than the other solution but is there any other way?

Taywin 312 Posting Virtuoso · Answer 4 · 2010-08-11T06:27:49+00:00

You can either rewrite the page (better layout design) or set a fix size of table cell width where the hide/show input fields are. Set it at max of whatever you want it to be displayed. Currently, you set it just fit for Method and a bit of space.

dwssassin 0 Newbie Poster · Answer 5 · 2010-08-12T03:30:24+00:00

Can you clarify what what you mean by: better layout design? is the current on not good?