Solved

AutoPopulate onselect value from dropdown in JSP,JSTL form

Posted on 2009-05-19
10
3,354 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 125 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

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 …
A solution for Fortify Path Manipulation.
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.

635 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