Activity Stream
Quick Links
48,167 MEMBERS
6711 ONLINE
Register Now
besthostingforums On YouTube Subscribe to our Newsletter besthostingforums On Twitter besthostingforums On Facebook besthostingforums On facebook groups

Results 1 to 5 of 5
  1. 9th Apr 2011, 09:21 PM
        
    #1
    abhikala1 is offline
    OP
    abhikala1
    Member

    Default Problem using javascript in form field

    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!!!
    abhikala1 Reviewed by abhikala1 on . Problem using javascript in form field 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" Rating: 5
    Reply With QuoteRegister To Reply Ping this articlePing

    2.   Sponsored Links

  2. 13th Apr 2011, 11:43 AM
        
    #2
    Scandium is offline
    Scandium
    Member
    If you want an easy way and not so hard to manage then I suggest using an AJAX sort of request and you can code a PHP file that handles the request then the JS http request fetches the HTML result.

    Here is an example http://w3schools.com/php/php_ajax_database.asp which uses onchange and GET it's very simple.
    Reply With QuoteRegister To Reply
  3. 13th Apr 2011, 04:13 PM
        
    #3
    JmZ is offline
    JmZ
    (╯?□?）╯︵ ┻━┻
    Website's: 
    
Xenu.ws
WarezLinkers.com
SerialSurf.com
CracksDirect.com
    http://jsfiddle.net/6ABMn/

    Using JQuery.
    Projects:
    WCDDL - The Professional DDL Script
    Top Secret Project: In Development - ZOMG
    ImgTrack - Never Have Dead Images Again!
    Reply With QuoteRegister To Reply
  4. 19th Apr 2011, 07:05 PM
        
    #4
    AdM.as is offline
    AdM.as
    Member
    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.
    Reply With QuoteRegister To Reply
  5. 19th Apr 2011, 10:52 PM
        
    #5
    akazai_khan is offline
    akazai_khan
    Member
    Website's: 
    
zaheema.com
myshahg.com
    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>
    Reply With QuoteRegister To Reply
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Multiple names for same HTML form field
    By pankaj in forum Web Development Area
    Replies: 0
    Last Post: 6th May 2012, 02:45 PM
  2. form validation problem [help need]
    By shakac in forum Web Development Area
    Replies: 3
    Last Post: 18th Apr 2012, 12:44 PM
  3. JavaScript problem
    By ChosenOne in forum Web Development Area
    Replies: 22
    Last Post: 1st Mar 2012, 05:50 PM
  4. New Noob in the field
    By xwebhosting9 in forum Introductions
    Replies: 0
    Last Post: 8th Dec 2011, 03:21 PM
  5. [Hiring] Settle Problem My PopUP Javascript
    By kedenya in forum Completed Transactions
    Replies: 1
    Last Post: 9th Aug 2011, 06:34 AM

Tags for this Thread

BE SOCIAL
FAQ | SITEMAP
Copyright ® 2008 - 2015 besthostingforums.com
Copyright © 2013 vBulletin Solutions, Inc. All rights reserved.
BestHostingForums.com is a great place to learn about Internet Marketing Online, SEO Techniques, Search Engine Marketing and resources for Web Development.