0

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!

3
Contributors
7
Replies
8
Views
7 Years
Discussion Span
Last Post by dwssassin
0

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>
1

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 by gumape: n/a

Votes + Comments
Thanks for the help!
0

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!

0

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.

0

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?

0

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.

Edited by Taywin: n/a

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.