Showing form fields based on drop down value selected

abhikala1 Greenhorn

Messages:: 20

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#1

I am looking to show few extra form fields depending on the selection from a drop down menu.
For eg. in a drop down asking for payment option
if i select Online bank transfer then it should create/show a new form field below it asking for bank account number and name.
And, if i select paypal then it should ask for paypal id.

I have made this code which is working fine when i dont use form tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
}
// ]]>
</script>
</head>

<body>
<table width=70% cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title"><font face=verdana size=2><b>Payment Option</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td class="field">
<select name="type" onchange="display(this,'transfer','cheque','dd','paypal','alertpay');">
<option>Please select:</option>
<option value="transfer">Bank Account Transfer</option>
<option value="cheque">Cheque</option>
<option value="dd">Demand Draft</option>
<option value="paypal">Paypal</option>
<option value="alertpay">Alertpay</option>
</select>
</td>
</tr>
</thead>

<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>

<tbody id="transfer" style="display: none;">
<tr><td><font face=verdana size=2><b>Bank Account Number</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td><INPUT maxLength=55 name=account_number size=44></TD></TR>

<tr><td><font face=verdana size=2><b>Bank Name</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td><INPUT maxLength=55 name=bank_name size=44></TD></TR>

<tr><td><font face=verdana size=2><b>Branch Name</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td><INPUT maxLength=55 name=branch_name size=44></TD></TR>

<tr><td><font face=verdana size=2><b>Branch City</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td><INPUT maxLength=55 name=branch_city size=44></TD></TR>

</tbody>

<tbody id="cheque" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="dd" style="display: none;">
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>

</body>
</html>

Code (markup):

When i put this inside form field, it doesn't work.
Plz help!!!

abhikala1, Apr 9, 2011 IP

anupkumarpandey Peon

Messages:: 10

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#2

HI
dear
this is perfect code according to use Enjoy this(anup kumar pandey{anupmca007@gmail.com})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
}
// ]]>
</script>
</head>

<body>
<table width=70% cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title"><font face=verdana size=2><b>Payment Option</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td class="field">
<select name="type" onchange="display(this,'transfer','cheque','dd','paypal','alertpay');">
<option>Please select:</option>
<option value="transfer">Bank Account Transfer</option>
<option value="cheque">Cheque</option>
<option value="dd">Demand Draft</option>
<option value="paypal">Paypal</option>
<option value="alertpay">Alertpay</option>
</select>
</td>
</tr>
</thead>

<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>

<tbody id="transfer" style="display: none;">
<tr><td><font face=verdana size=2><b>Bank Account Number</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td><INPUT maxLength=55 name=account_number size=44></TD></TR>

<tr><td><font face=verdana size=2><b>Bank Name</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td><INPUT maxLength=55 name=bank_name size=44></TD></TR>

<tr><td><font face=verdana size=2><b>Branch Name</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td><INPUT maxLength=55 name=branch_name size=44></TD></TR>

<tr><td><font face=verdana size=2><b>Branch City</b></font> <FONT color=#ff0000 face=Arial,Helvetica,Geneva,Sans-serif,sans-serif>*</FONT></td>
<td><INPUT maxLength=55 name=branch_city size=44></TD></TR>

</tbody>

<tbody id="cheque" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="dd" style="display: none;">
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
<tbody id="paypal" style="display: none;">
<tr>
<td class="title">Accountid:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">State:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Country:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="alertpay" style="display: none;">
<tr>
<td class="title">Yourmode:</td>
<td class="field">
<select name="display">
<option value="anupkumarpandey">Anupkumarpandey</option>
<option value="Visitor">Visitor</option>
</select>
</td>
</tr>
</tbody>

</table>

</body>
</html>

anupkumarpandey, Apr 10, 2011 IP

ljimeno Peon

Messages:: 1

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 1

#3

Dear Friendanupkumarpandey

Thanks a lot fpr your code. But I have a doubt

For example, let´s say that the user choose Bank Account Transfer from the drop menu, and it display the custom fields. How do I insert to mysql the data that the user write on these custum fields?, i mean, in Bank Account Number, Bank Name, Branch Name, Branch City fields

For example, let say that the client wrote in:
Bank Account Number: 67676,
Bank Name: Any Bank name,
Branch Name: Paradise,
Branch City: Lisboa

and I need to store that data on a mysql db

Could you please advice?

Thanks in advance and warm regards

Luis

ljimeno, Jul 19, 2013 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,999

Best Answers:: 253

Trophy Points:: 515

#4

First thing I'd suggest is dragging your HTML kicking and screaming into THIS decade -- you've got a STRICT doctype, too bad you've got HTML 3.2 in the markup. FONT tag? TABLE for layout? REALLY? What is this, 1997? WHERE are your LABELs? FIELDSETs? FOR attributes pointing at ID's on the INPUT?

Much less the lack of a FORM tag. FORM is not a 'field' and should wrap ALL of it... or lack of TYPE attribute on what are likely TEXT inputs, etc, etc, etc...

For markup I'd have something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Show/Hide
</title>

</head><body>

<form id="payment" action="handler.php" method="post">
	
	<fieldset id="payType">
	
		<label for="paymentType">Payment Option<b>*</b></label>
		<select name="type" id="paymentType">
			<option>Please select:</option>
			<option value="transfer">Bank Account Transfer</option>
			<option value="cheque">Cheque</option>
			<option value="dd">Demand Draft</option>
			<option value="paypal">Paypal</option>
			<option value="alertpay">Alertpay</option>
		</select>
		
	</fieldset>
	
	<fieldset id="transfer">
	
		<legend>Bank Account Transfer</legend>
	
		<label for="accountNumber">Bank Account Number<b>*</b></label>
		<input type="text" name="account_number" id="accountNumber" maxLength="55" size="44" />
		<br />
		
		<label for="accountName">Bank Name<b>*</b></label>
		<input type="text" name="bank_name" id="accountName" maxLength="55" size="44" />
		<br />
		
		<label for="accountBranch">Branch Name<b>*</b></label>
		<input type="text" name="branch_name" id="accountBranch" maxLength="55" size="44" />
		<br />
		
		<label for="accountCity">Branch City<b>*</b></label>
		<input type="text" name="branch_city" id="accountCity" maxLength="55" size="44" />
		
	</fieldset>
	
	<fieldset id="cheque">
	
		<legend>Cheque</legend>
	
		<label for="chequeImage">Image:</label>
		<input type="file" name="image" id="chequeImage" size="10" />
		<br />
		
		<label for="chequeX">X Coordinates:</label>
		<input type="text" name="x_coordinates" id="chequeX" size="5" />
		<br />
		
		<label for="chequeY">Y Coordinates:</label>
		<input type="text" name="y_coordinates" id="chequeY" size="5" />
		<br />
		
		<label for="chequeColor">Text Color:</label>
		<input type="text" name="color" id="chequeColor" size="8" maxlength="7" />
		
	</fieldset>
	
	<fieldset id="dd">
	
		<legend>Demand Draft</legend>
	
		<label for="ddDisplay">Display:</label>
		<select name="display" id="ddDisplay">
			<option>Visitors</option>
			<option>Hits</option>
		</select>
	
	</fieldset>

	<div class="submitsAndHiddens">
		<input type="submit" name="submit" value="Update" />
		<input type="reset" value="Reset" />
	</div>
	
</form>

<script type="text/javascript" src="formShowHide.js"></script>
 
</body></html>
Code (markup):
Everything else belongs in your external CSS or a external .js so it's cached if (more like when) a visitor goes to the same page more than once. The LEGEND tags are there for when scripting OR CSS is disabled so you can see what each of those sections are... and of course the FIELDSET are because they are sets of fields, and LABEL to say that they are labels with FOR saying what input they point at. Semantic accessible markup!

For scripting I'd have this:
(function() {

	var
		d = document,
		fieldsets = ['transfer', 'cheque', 'dd'];
			
	for (var t=0; t<fieldsets.length; t++) {
		fieldsets[t] = d.getElementById(fieldsets[t]);
		fieldsets[t].style.display = 'none';
	}
	
	d.getElementById('paymentType').onchange = function(e) {
		e = e || window.event;
		var
			t = e.target || e.srcElement;
			
		for (var n=0; n<fieldsets.length; n++) {
			fieldsets[n].style.display = 'none';
		}
		if (s = d.getElementById(t.options[t.selectedIndex].value)) {
			s.style.display = 'block';
		}
		
	} // "paymentType".onchange
	
	d.getElementById('payment').className += ' scriptOn';
	
})();
Code (markup):
Which attaches itself automatically, puts everything in an anonymous function so there's no risk of namespace conflicts, and hides all options except a valid selected one. It also adds a class to say scripting is enabled letting us style or de-style our sub-elements as appropriate. Again, one should design so that a page is usable, scripting or not!

I made the list of valid fieldsets for the select options an array of strings and then FOR that array so it's easy to add/remove the ones you want it attached to / targeting. Setting them to hidden from the script means when JS is unavailable they are shown... That's one of the most important things about enhancing a page with scripting that most people miss -- a LOT of people block scripts on purpose. (see Opera users and the millions of people who run the noScript extensions for FF and Chrome!) -- Good scripting should enhance functionality, NOT supplant it!

For style, here's a quick example showing how to make those LABEL look nice, and stripping off borders, padding and legends when scripting is unavailable.
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img {
	border:none;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

body {
	font:normal 85%/150% verdana,helvetica,sans-serif;
}

#payment {
	padding:1em;
}

#payment label {
	display:inline-block;
	width:15em;
	text-align:right;
	font-weight:bold;
}

#payment label b {
	color:#F00;
}

#payment .submitsAndHiddens {
	padding-left:15.4em;
}

.scriptOn fieldset {
	padding:0 0 1em;
	border:0;
}

.scriptOn legend {
	display:none;
}
Code (markup):
I would consider swapping the LEGEND for INPUT[radio] with LABEL instead of the select to make it clearer what's going on there... but honestly that could just be the fact I absolutely HATE SELECT talking...

Hope this helps.

deathshadow, Jul 20, 2013 IP

ryan_uk likes this.

Log in or Sign up

Showing form fields based on drop down value selected

abhikala1 Greenhorn

anupkumarpandey Peon

ljimeno Peon

deathshadow Acclaimed Member

Useful Searches