Solved

AutoPopulate onselect value from dropdown in JSP,JSTL form

Posted on 2009-05-19
10
3,090 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
java continue statement 10 113
Safari, Firefox, IE, Java, Plugin, Java Security error 13 52
strDist challenge 35 96
more than one jdk and one jre 1 30
Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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.

919 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

17 Experts available now in Live!

Get 1:1 Help Now