SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change dropdown to text area

    Hello,
    Is it possible to change --->select select name="combo3" <--- to be a text area instead of a drop down box, while still maintaining it as a linked box to the other 2 drop-downs?
    How would I accomplish this if so?

    Thanks for any help.

    <html>
    <head>

    <title>Triple Linked Listbox</title>


    </head>
    <!-- *** TextFader.js by Roy Whittle www.roy.whittle.com *** -->
    <script LANGUAGE="JavaScript" SRC="textfader.js"></script>
    <script LANGUAGE="javascript" SRC="kmm_toolbar.js"></script>
    <script language="javascript"><!--
    //window.onerror = null;
    //--></script>
    <body bgcolor="#CCCCDD" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" link="#0000FF" vlink="#333399" alink="#9999FF" background="images/bk_graywash.gif"><a name="topofpage"></a>
    <div id="TBContainer">
    <script language="JavaScript"><!--
    if (ToolBar_Supported){
    TBDownLevelDiv.style.display = "none";
    drawToolbar();
    }
    //--></script>
    </div>

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>

    <td width="1%"><nobr> </nobr></td>
    <td width="70%" valign="top">


    <script LANGUAGE="JavaScript">
    var a = new Array()
    var b = new Array()
    // Provinces
    a[0] = new Array(
    1, "Alberta",
    2, "Nova Scotia",
    3, "Ontario");

    // States
    a[1] = new Array(
    101, "Alabama",
    102, "Alaska",
    103, "Arizona");

    //Provinces
    // 1, "Alberta"
    b[1] = new Array(
    1, "GST#");

    // 2, "Nova Scotia"
    b[2] = new Array(
    1, "HST#");

    // 3, "Ontario"
    b[3] = new Array(
    1, "GST#",
    2, "Vendor Permit#");
    // States
    // 101, "Alabama",
    b[101] = new Array(
    1, "Company Tax Registration#");

    // 102, "Alaska",
    b[102] = new Array(
    1, "Company Tax Registration#");

    // 103, "Arizona",
    b[103] = new Array(
    11, "Company Tax Registration#");




    function clearcombo(elem){
    var i;
    for (i = elem.options.length - 1; i >= 0; i--) elem.options[i] = null;
    elem.selectedIndex = -1;
    }
    function populatecombo2(elem, index){
    for (var i = 0; i < a[index].length; i= i + 2){
    elem.options[elem.options.length] = new Option(a[index][i + 1], a[index][i]);
    }
    }
    function populatecombo3(elem, index){
    if (b.length >= index){
    if (b[index]){
    for (var i = 0; i < b[index].length; i= i + 2){
    elem.options[elem.options.length] = new Option(b[index][i + 1], b[index][i]);
    }
    }
    else{
    elem.options[elem.options.length] = new Option("[none available]", 0);
    }
    }
    else{
    elem.options[elem.options.length] = new Option("[none available]", 0);
    }
    }
    function clickcombo1(elem){
    clearcombo(document.f1.combo2)
    clearcombo(document.f1.combo3)
    populatecombo2(document.f1.combo2, elem[elem.selectedIndex].value);
    return true;
    }
    function clickcombo2(elem){
    clearcombo(document.f1.combo3)
    populatecombo3(document.f1.combo3, elem[elem.selectedIndex].value);
    return true;
    }
    </script>

    <table width="640" align="left"><tr><td width="10"> </td><td width="640">
    <p class="featureheader"> </p>
    <form NAME="f1">
    <select NAME="combo1" SIZE="5" ONCHANGE="return(clickcombo1(this));">
    <option VALUE="0">Canada</option>
    <option VALUE="1">United States</option>
    </select>
    <select NAME="combo2" SIZE="5" ONCHANGE="return(clickcombo2(this));">
    <option VALUE="0">[nothing selected]</option>
    </select>
    <select NAME="combo3" SIZE="5">
    <option VALUE="0">[nothing selected]</option>
    </select>
    </form>
    <font COLOR="#0000FF">
    <pre></pre>
    </font>

    <p class="featurecontent">
    </p>

    <p class="featurecontent">
    </p>

    <p class="featurecontent">
    </p>
    <p class="featureheader" align="center">
    <wbr>
    <nobr>
    </nobr><br />

    </p>
    </td></tr></table>

    </td>

    <td width="15%" valign="top" align="center">


    <br />

    <br />

    <p>
    <br />
    </td>
    </tr>
    </table>

    <div id="description" class="featurecontent" style="position:absolute; left:25%; top:360; width:50%; "></div>
    <div id="leftbox" class="featurecontent" style="position:absolute; left:0; top:170; width:14%; "></div>
    </body>
    </html>

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything can happen, everything is possible and probable. Time and place do not exist; on an insignificant basis of reality , the imagination spins, weaving new patterns; a mixture of memories, experiences, free fancies, incongruities and improvisations.(August Strindberg: A Dream Play)
    Why do you want to change it to a text area?

    Anyway, this is how the modified javascript will look
    (if you add <textarea id="textarea3" name="textarea3"></textarea> to the form)
    Code:
    function clickcombo2(elem)
    { 
    	//clearcombo(document.f1.combo3);
    	//populatecombo3(document.f1.combo3, elem[elem.selectedIndex].value); 
    	clearTextarea(document.f1.textarea3);
    	populateTextarea(document.f1.textarea3, elem[elem.selectedIndex].value);
    	return true; 
    } 
    function clearTextarea(elem)
    {
    	elem.innerHTML = '';
    }
    function populateTextarea(elem, index)
    { 
    	if (b.length >= index)
    	{ 
    		if (b[index])
    		{ 
    			for (var i = 0; i < b[index].length; i= i + 2)
    			{ 
    				elem.innerHTML += b[index][i + 1]; 
    			} 
    		} 
    		else
    		{ 
    			elem.innerHTML += '[none available]'; 
    		} 
    	} 
    	else
    	{ 
    		elem.innerHTML += '[none available]'; 
    	} 
    }

  3. #3
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jofa,

    I want to change it to a text area so the user can enter their gst/hst/vendor Permit/Company Tax Registration numbers.

    I designed a website for wholesale customers which contains a 'request for catalogue' form. The problem I'm having is that individual surfers flood the company's email with retail requests. I thought if I redesigned the form to include a required text area for the above listed numbers it would solve the problem. So when the user chooses a country, it defaults to the state/province, then to a text area which contains a text prompt for the user to enter their appropriate number.

    This is really above my head and I'm struggling with it but I sure appreciate all the help you've given me.

    Thanks so much.

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is GST/HST/Vendor Permit/Company Tax Registration Number the only four numbers that can be required?
    And for Canada/Alberta only GST is required, for Canada/Ontario GST+Vendor Permit is required etc...
    Why don't you use text fields that can be enabled/disabled depending on country/state combination?

  5. #5
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    To clarify, would I:

    a) replaceselect NAME="combo3" SIZE="5">
    <option VALUE="0">[nothing selected]</option>
    </select>

    with

    <textarea id="textarea3" name="textarea3"></textarea>

    b) replace:function clickcombo2(elem){
    clearcombo(document.f1.combo3)
    populatecombo3(document.f1.combo3, elem[elem.selectedIndex].value);
    return true;
    }

    with your new script?

  6. #6
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a)
    yes
    b)
    replace clearcombo(document.f1.combo3);
    with clearTextarea(document.f1.textarea3);
    and populatecombo3(document.f1.combo3, elem[elem.selectedIndex].value);
    with populateTextarea(document.f1.textarea3, elem[elem.selectedIndex].value);

  7. #7
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    As far as I know, the us customers have a Company tax reg #. Nova Scotia, New Brunswick and Newfoundland have a HST#. Ontario has both a Vendor Permit# and GST#. All other provinces have GST#. These are all of the numbers that would need to be entered in the text area, nothing else other than my text prompt to enter the numbers associated with their province/state.

    I've been tinkering with building a website for a family member and as the business grows, the site requirements do as well. As each new need presents itself for the site, I'm teaching myself through online tutorials and the gracious help of others like you.

    So to make a long story short, if there's a better way I'm open to suggestions, but can't guarantee I'll know what you're talking about lol.

    You can view the site and it's present form at www.ragebodyjewellery.com.

  8. #8
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Moved to the Javascript forum.

    Java and Javascript are not the same languages.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •