Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

AutoPopulate onselect value from dropdown in JSP,JSTL form

Posted on 2009-05-19
10
Medium Priority
?
3,525 Views
Last Modified: 2013-11-24
Hi All,

I have a JSP page which has a form which submits to itself on press of submit.
I'm using JSTL to display sql query given in textarea in the form on submit.
Now i want a dropdown just side to textarea where i will have few pre-fed queries for easyness. I want that when a user selects any value like "gettablspcedetails" then the query required will get populated in the textarea so that a user can just more customise and submit or directly submit. But this is not happening .I'm putting my form please suggest the codes i need to add to make it work.
<form name="f1" method="post" action="queryme.jsp" >
 
            <table width="100%">
                <tr>
                    <td>
                        <input type="hidden" name="dbname" value='<c:out value="${param.t11}"/>' />
                        <input type="hidden" name="dbpassword" value='<c:out value="${param.t22}"/>' />
                        <input type="hidden" name="userid" value='<c:out value="${param.t33}"/>' />
                        <input type="hidden" name="port" value='<c:out value="${param.t44}"/>' />
                        <input type="hidden" name="SID" value='<c:out value="${param.t55}"/>' />
                    </td>
                </tr>
                <table align="center" >
                    <tr>
 
                        <th>
                            <td>
                                <textarea cols="80" style="background:#eaeaea" name="t66"  rows="8"  wrap="off" ><c:out value="${param.t66}"/></textarea>
                            </td>
                        </th>
                    </tr>
 
                    <tr>
                        <td>
                            <c:set  var="t66" value="${param.t66}" />
                            <input type="hidden" name="t66" value='<c:out value="${param.t66}"/>' />
                        </td>
                    </tr>
                </table>
                <!-- login reset buttons layout -->
                <table align="center">
 <div align="right">
                               &nbsp;<input type="submit" name="submitbutton" value='Submit'>&nbsp;
                            </div>
                    <tr align="left">
                                              <td width="55%" valign="top">
                            &nbsp;<input type="reset" value='Reset'>
                            &nbsp;<INPUT TYPE="button" name="submitbutton" VALUE="ReLogin" onClick="document.location = 'query.jsp'">
                                                   </td>
                    </tr>
                </table>
            </table>
        </form>

Open in new window

0
Comment
Question by:Ramakanta Sahoo
  • 5
  • 5
10 Comments
 
LVL 19

Expert Comment

by:Kuldeepchaturvedi
ID: 24429760
where is your dropdown?
0
 
LVL 4

Author Comment

by:Ramakanta Sahoo
ID: 24430283
no i have not put it in.
what ever i tried all failed :(
all were very odd too so i reverted. What shall i add ...
0
 
LVL 19

Expert Comment

by:Kuldeepchaturvedi
ID: 24430515
<tr>
 
                        <th>
                            <td>
                                <textarea cols="80" style="background:#eaeaea" name="t66"  rows="8"  wrap="off" ><c:out value="${param.t66}"/></textarea>
                            </td>
                        </th>
<th>
<td><select name ='yourselectboxname' onChange="yourjscriptfunction">
<option value ="yourquery here">yourquerynamehere</option>
</select>
</td>
</th>
                    </tr>


now in yourjscript function all you have to is to assign the selected option's value to the textarea value.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 4

Author Comment

by:Ramakanta Sahoo
ID: 24438739
I tried but again failing its not populating the value selected . like if i select Dual its not populating the textarea with select * from sual.

Why?? please help
<head>
<script type="text/javascript">
function setTextArea(dropDown){
 //get the currently selecte dropdown option
 var curOption = dropDown.options[dropDown.selectedIndex];
 
 //get the text of the current option
 var optionText = curOption.innerText;
 
 //get a reference to your textarea or textbox
 var theTextArea = document.getElementById("instantTextarea");
 
 //set the value
 theTextArea.value = optionText;
}
</script>
 
</head>
 
 <tr>
                        
 
                        <th>
                            <td>
                                
                                <textarea cols="80" id="instantTextarea" style="background:#eaeaea" name="t66"  rows="8"  wrap="off" ><c:out value="${param.t66}"/></textarea>
                            
                            </td>
                        </th>
                        <th>
                        <td><select id="querychoice" name ='InstantQuery' onChange="setTextArea(this)">
                        <option  value ="select * from v$sessions">OpenSessions</option>
                        <option value ="select * from dual">Dual</option>
                        <option value ="select * from recyclebin">Recyclebin</option>
                            </select>
                         </td>
                        </th>
                    </tr>

Open in new window

0
 
LVL 19

Accepted Solution

by:
Kuldeepchaturvedi earned 500 total points
ID: 24439844
it was very close.. see below..


<html>
<head>
<script type="text/javascript">
function setTextArea(dropDown){
 //get the currently selecte dropdown option
 var curOption = dropDown.options[dropDown.selectedIndex];
 
 //get the text of the current option
 var optionText = curOption.value;
 
 //get a reference to your textarea or textbox
 var theTextArea = document.getElementById("instantTextarea");
 
 //set the value
 theTextArea.value = optionText;
}
</script>
 
</head>
<body>
 <table>
 <tr>
                       
 
                        <th>
                            <td>
                               
                                <textarea cols="80" id="instantTextarea" style="background:#eaeaea" name="t66"  rows="8"  wrap="off" ><c:out value="${param.t66}"/></textarea>
                           
                            </td>
                        </th>
                        <th>
                        <td><select id="querychoice" name ='InstantQuery' onChange="setTextArea(this)">
                        <option  value ="select * from v$sessions">OpenSessions</option>
                        <option value ="select * from dual">Dual</option>
                        <option value ="select * from recyclebin">Recyclebin</option>
                            </select>
                         </td>
                        </th>
                    </tr>
</table>
</body>
</html>
0
 
LVL 4

Author Comment

by:Ramakanta Sahoo
ID: 24439924
Ohh really cool. thanks.

i have one more problem can i shift this option values to somewhere else as this are big queries i can not write it in between these value="QUERY" it will make i code look odd
Is there any way so that i can just write these bulk code in some jsp file and import the varibles and values to be used in the dropdown.
0
 
LVL 19

Expert Comment

by:Kuldeepchaturvedi
ID: 24440189
The above implementation was more of a client side implementation ( i.e. everything is available on the client side and we just used it..)

there are multiple ways of doing it..

one.. create a .js file and include it in your code ( js file is just a java script file)..
make veriables, say , 1,2,3,4,5,.. & so on... nad map them back to combobox's option values..

another can be an AJAX call to the server where a jsp gives the query back to you and you display it in your text area..

another is that you have a  <DIV> tags in your html and map them back to combo box options.

I personally wd like the second option ( AJAX).. but it depends how well versed you are with AJAX and its really outside the scope of this question.
0
 
LVL 4

Author Comment

by:Ramakanta Sahoo
ID: 24441198
can you please tell me how can i map it through JS. I am okay with JS .One example will be great.

You helped me alot so I'm awarding you points.
Thanks
0
 
LVL 19

Expert Comment

by:Kuldeepchaturvedi
ID: 24441667
okay here is the js implementation it will go something like below..

in your js file declare a var lets call it myQueries

<script type="text/javascript">
var myQueries = new Array();
myQueries[0] = "Select * from dual";
myQueries[1] = "Select * from mytable where claus is this";
myQueries[2] = "Select column A from here";
</script>


now change your above code somewhat, your drop down will look like below

><select id="querychoice" name ='InstantQuery' onChange="setTextArea(this)">
                        <option  value ="0">OpenSessions</option>
                        <option value ="1">Dual</option>
                        <option value ="2">Recyclebin</option>

& now finally your function will change like below

function setTextArea(dropDown){
 //get the currently selecte dropdown option
 var curOption = dropDown.options[dropDown.selectedIndex];
 
 //get the text of the current option
 var optionIndex = curOption.value;
 
 //get a reference to your textarea or textbox
 var theTextArea = document.getElementById("instantTextarea");
 
 //set the value
 theTextArea.value = myQueries[optionIndex];
}
Also one moer thing.. assume your created that array in a file named.. myfile.js.. make sure you include it..
<script type="text/javascript" src="myfile.js"></script>

Thanks
0
 
LVL 4

Author Comment

by:Ramakanta Sahoo
ID: 24443138
Thanks you .
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is the first of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article explains our test automation goals. Then rationale is given for the tools we use to a…
Introduction This article is the last of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers our test design approach and then goes through a simple test case example, how …
The viewer will learn how to implement Singleton Design Pattern in Java.
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question