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!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Drop down and listbox and text area 1

Status
Not open for further replies.
DotNetGnat

DotNetGnat

Programmer
Mar 10, 2005
5,548
IN
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
 
Sort by date Sort by votes
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>
 
Upvote 0 Downvote
thanks tsuji,

thats definitely a good start...

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

thanks for the code...

-DNG
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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!!!

 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.

 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
247
nanbread
nanbread
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
262
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
289
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
102
ggriffit
ggriffit
leifoet
  • Locked
  • Question
How to combine JS and ASP ?
Replies
5
Views
178
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top