Solved

AutoPopulate onselect value from dropdown in JSP,JSTL form

Posted on 2009-05-19
10
3,051 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
Comment Utility
where is your dropdown?
0
 
LVL 4

Author Comment

by:Ramakanta Sahoo
Comment Utility
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
Comment Utility
<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
 
LVL 4

Author Comment

by:Ramakanta Sahoo
Comment Utility
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 125 total points
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 4

Author Comment

by:Ramakanta Sahoo
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks you .
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
how to extract window origin in spring 2 57
factory design pattern vs abstract factoy design pattern 2 82
countX 22 68
JAVA part two 5 39
I had a project requirement for a displaying a user workbench .This workbench would consist multiple data grids .In each grid the user will be able to see a large number of data. These data grids should allow the user to 1. Sort 2. Export the …
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…
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.

762 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now