Latest Announcemnent
New thread

Problem using javascript in form field

Status
Not open for further replies.
A

abhikala1

Active Member
117
2010
0
0
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.
Code: 
<!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>

When i put this inside form field, it doesn't work.
Plz help!!!
 
4 comments
JmZ's example using jQuery is probably the best route you can take - it makes everything easier.

Also instead of using the ID's of your input fields, place an ID on each of the td tags the inputs are in, then use the same code. For IE6 however you may have to put a conditional statement in there and use table-row instead of block for display.

If you decide to take the jQuery route, then you should be fine using the input ID's although you will have empty table rows.
 
Hi @abhikala1, yes it is good to have jQuery or mooTool to easily manipulate DOM, I guess you are not clear about HTML or XHTML? in your DOC Type you mentioned it is XHTML and you are writing markup in HTML4 Sytle, so may be browser just confuse.

However you can fix by add following function after display
Code: 
function init()
{
    document.getElementById("type").onchange = function()
    {
        display(this,'transfer','cheque','dd','paypal','alertpay');            
    }
}
Replace your <body> tag with
Code: 
<body onload="init();">
Replace your <select> tag with
Code: 
<select name="type" id="type">
The whole code is (just for copy/paste)
Code: 
<!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';
}
}

function init()
{
    document.getElementById("type").onchange = function()
    {
        display(this,'transfer','cheque','dd','paypal','alertpay');            
    }
}

// ]]>
</script>
</head>

<body onload="init();">
<form method="post" action="">
<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" id="type">
<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>
</form>

</body>
</html>
 
Status
Not open for further replies.
Back
Top