Drop down and listbox and text area 1

DotNetGnat · Jun 28, 2005

hello all,

let me try to explain what i am doing. I have two linked drop downs...the first dropdown has all the table names in my database and the once a table name is selected the second dropdown get populated with the column names related to that table...OK i did that part without any problem...

But i want to collect all these selected items and show them first in a list box and then in a text area...

In list box i want to show something like...

table1.column1
table1.column2
table2.column1

and so on as the user makes selection from the drop downs...it should be kinda interactive...

and in the text area...i want something like a sql query building...

SELECT table1.column1, table1.column2, table2.column1...

and so on...

How do i make all these form fields interact...

thanks for suggestions...

-DNG

tsuji · Jun 29, 2005

This shows you the skeleton for the added functionality. As the dynamic part for the selects is taken care of, it is static here. Further, no stylistic consideration, no duplication checking, no reset, no edit (changing mind). Those could be added based on the elements so created. This only demonstrates the principle.

Code:

<html>
<head><title></title>
<script language="javascript">
function addit() {
    if (!document.getElementById("sel_2")) {
        var oelem=document.createElement("select");
        oelem.setAttribute("id","sel_2");
        document.getElementById("mydiv").appendChild(oelem);
        document.getElementById("mydiv").appendChild(document.createElement("br"));
        oelem=document.createElement("textarea");
        oelem.setAttribute("id","txtarea");
        oelem.setAttribute("cols","40");
        oelem.setAttribute("rows","5");
        document.getElementById("mydiv").appendChild(oelem);
    }
    var osel=document.getElementById("sel_2");
    var osel_0=document.getElementById("sel_0");
    var osel_1=document.getElementById("sel_1");

    osel.options[osel.length]=new Option(osel_0[osel_0.selectedIndex].text+"-"+osel_1[osel_1.selectedIndex].text,
        osel_0[osel_0.selectedIndex].value+"."+osel_1[osel_1.selectedIndex].value);

    var sselect="";
    for (var i=0;i<osel.length;i++) {
        sselect+=(i==osel.length-1)?osel[i].value:osel[i].value+",";
    }
    var otxtarea=document.getElementById("txtarea");
    otxtarea.value="select"+" "+sselect;
}
</script>
</head>
<body>
<div name="mydiv" id="mydiv">
<select name="sel_0" id="sel_0">
    <option value="table1">table a</option>
    <option value="table2">table b</option>
    <option value="table3">table c</option>
</select>
<select name="sel_1" id="sel_1">
    <option value="column1">column a</option>
    <option value="column2">column b</option>
    <option value="column3">column c</option>
    <option value="column4">column d</option>
</select>
<button id="addbtn" onclick="addit()">add it</button>
</div>
</body>
</html>

DotNetGnat · Jun 29, 2005

thanks tsuji,

thats definitely a good start...

i will get back if i need any help...

thanks for the code...

-DNG

DotNetGnat · Jun 29, 2005

tsuji,

i have the form tags instead of the div..something like this...

<form name="f1">
<select name="sel_0" id="sel_0">
<option value="table1">table a</option>
<option value="table2">table b</option>
<option value="table3">table c</option>
</select>
<select name="sel_1" id="sel_1">
<option value="column1">column a</option>
<option value="column2">column b</option>
<option value="column3">column c</option>
<option value="column4">column d</option>
</select>
</form>

how does the code in the function changes...

Thanks

-DNG

cLFlaVA · Jun 29, 2005

DNG;

it shouldn't matter. tsuji's example makes use of the getElementById method, so as long as your select tags have ids, it should work fine.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

tsuji · Jun 29, 2005

DNG, as cLFlaVa said, I in fact deliberately use id for referencing purpose to avoid deep tree structure. In your form, you could add the id to it. (With a name "mydiv" for the form, the demo would work the same, only use "mydiv" for a form is a bit awkward that's all.)

Now, you can use alternative reference using name directly may help to show the flexibility rather than rigidity. Just replacing everywhere:
[tt] document.getElementById("mydiv")...[/tt]
by
[tt] document.forms["f1"]...[/tt]
will do. - tsuji

shamrox · Jun 30, 2005

I don't know enough about javascript to get it to work right, but how can I take the above code and make it so that the first drop down and the second just pass their value to the textbox w/o having them linked value wise like they are now. For instance, the first drop would list the Pub id's and have a value of pub id, and the second drop would list pub titles, but have the value of pub id as well, so when either is clicked and added, they both submit the pub id value to the query string.

The 3rd dropdown that's created I wouldn't need at all.

Thanks!!!

shamrox · Jun 30, 2005

Anyone??

DotNetGnat · Jun 30, 2005

tsuji, thanks for your help so far...

I have list boxe instead of the dropdown for my columns fields...so that the user can select a table name and can select multiple columns from the same table...

how can i add multiple columns...presently it takes into consideration only the first highlighted value...

also how to check for duplicates...

Thanks

-DNG

shamrox · Jul 5, 2005

Can anyone tell me who to adjust the above code to have it so that two seperate drops send their values to the textarea? I don't need the third drop at all.

tsuji · Jul 5, 2005

shamrox, I do not have enough time now to really look into what you need. I get rid of the functionality associated with the 3rd select tag, see if it helps you start scripting on your own for your specific use.
[tt]
<html>
<head><title></title>
<script language="javascript">
function addit() {
if (!document.getElementById("txtarea")) {
document.getElementById("mydiv").appendChild(document.createElement("br"));
oelem=document.createElement("textarea");
oelem.setAttribute("id","txtarea");
oelem.setAttribute("cols","40");
oelem.setAttribute("rows","5");
document.getElementById("mydiv").appendChild(oelem);
}
var osel_0=document.getElementById("sel_0");
var osel_1=document.getElementById("sel_1");

var otxtarea=document.getElementById("txtarea");
var sselect=otxtarea.value;
if (sselect!="") {sselect+=","};
sselect+=osel_0[osel_0.selectedIndex].value+"+"+osel_1[osel_1.selectedIndex].value;
otxtarea.value=sselect;
}
</script>
</head>
<body>
<div name="mydiv" id="mydiv">
<select name="sel_0" id="sel_0">
<option value="table1">table a</option>
<option value="table2">table b</option>
<option value="table3">table c</option>
</select>
<select name="sel_1" id="sel_1">
<option value="column1">column a</option>
<option value="column2">column b</option>
<option value="column3">column c</option>
<option value="column4">column d</option>
</select>
<button id="addbtn" onclick="addit()">add it</button>
</div>
</body>
</html>
[/tt]
You know if you find a script close to your need but cannot modify the script to your exact need, you probably do not understand enough the idea behind it, which is the most important thing to acquire.
- tsuji

shamrox · Jul 5, 2005

Thanks I'll see if this works or close...I tried adjusting it myself but keep getting errors. I haven't touched javascript in a few years, so I'm rusty, but think this is the only way to make it happen the way needed.

Thanks.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Drop down and listbox and text area 1

DotNetGnat

Programmer

tsuji

Technical User

DotNetGnat

Programmer

DotNetGnat

Programmer

cLFlaVA

Programmer

tsuji

Technical User

shamrox

Programmer

shamrox

Programmer

DotNetGnat

Programmer

shamrox

Programmer

tsuji

Technical User

shamrox

Programmer

Similar threads

Part and Inventory Search

Sponsor