Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Drop down box results in refreshing (reloading) page

Posted on 2006-07-13
12
Medium Priority
?
250 Views
Last Modified: 2010-04-01
Hi there

I have a drop down box:

<tr><td  class='menutable' >Embassy:</td> <td>
            <Select name=embassy onchange="changeEmbassy()">
                  <option></option>
                  <option>French</option>
                  <option>Spanish</option>
                  <option>Australian</option>
                  <option>Austrian</option>
                  <option>Canadian</option>
                  <option>Czech</option>
                  <option>Egyptian</option>
            </select>
</td></tr>

that runs the script:

function changeEmbassy(){
      
      alert("hello");
      embassy = request.getParameter("embassy");
      parent.thisclient.location.reload(true);
      
      //document.thisclient.cfname.value = embassy;
      //window.opener.location.reload();

}

what i want to do is reload the page once an option is selected from the drop down box so as to insert the relevant button on the page (its not working at the moment, another way to relaod?):

<% if (embassy.equals("French")) { %>
<tr><td  class='menutable' >Consulate Date:</td> <td><input name=consulatedate value='' style='width:100' onfocus='popUpCalendar(this, this, "yyyy-mm-dd");'><input type=button value="French" onClick="openFrench()"> </td></tr>

<% }
if (embassy.equals("Spanish")) { %>
<tr><td  class='menutable' >Consulate Date:</td> <td><input name=consulatedate value='' style='width:100' onfocus='popUpCalendar(this, this, "yyyy-mm-dd");'><input type=button value="Spanish" onClick="openSpanish()"> </td></tr>

<% } %>

Any ideas? or a better way to do it?
0
Comment
Question by:AndriesKeun
[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
  • 4
  • 2
  • +1
12 Comments
 
LVL 25

Expert Comment

by:Tomas Helgi Johannsson
ID: 17098605
    Hi!
You have to pass the selected embassy in a QueryString (GET method) or submit a form which includes the selected item (POST method)  from the client back to the webserver and retrieve the value from the request in order to it to work.
Otherwise the server does not know what the client chose.

Regards,
  Tomas Helgi
0
 

Author Comment

by:AndriesKeun
ID: 17098644
that sounds like php to me, not jsp
0
 
LVL 25

Expert Comment

by:Tomas Helgi Johannsson
ID: 17098998
    Hi!

You CAN'T pass a value from browser to server unless you use a variable in QueryString or Form.
That problem is web-language independent.

Take a look at this example on www.java2s.com 
http://www.java2s.com/Code/Java/JSP/GettingParameterNamesJsp.htm

Regards,
  Tomas Helgi
0
Technology Partners: 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!

 
LVL 25

Expert Comment

by:Tomas Helgi Johannsson
ID: 17099117

Jsp is executed on the server and javascript on the browser. (Keep repeating this to yourself while you attempt to mix both).
The execution of the jsp on the server outputs html to the browser.
its true that the html can contain javascript code too - which means you can use jsp to generate javascript dynamically.
However javascript variables are local to the browser while jsp-variables are local to the server.
The ONLY way to pass values from browser to server is either through QueryString or Form submission.

Regards,
  Tomas Helgi
0
 

Author Comment

by:AndriesKeun
ID: 17099232
Fair enough, thats probably why its not working then, but my question still stands:

-> Any ideas? or a better way to do it?
0
 
LVL 8

Expert Comment

by:kaliyugkaarjun
ID: 17099268
Using javascript and multiple drop-down u can achieve it...here is an example fshowing how to get it done

http://forum.java.sun.com/thread.jspa?threadID=541877&messageID=2628138
0
 
LVL 25

Expert Comment

by:Tomas Helgi Johannsson
ID: 17099326
function changeEmbassy(){
     
     alert("hello");
     embassy = request.getParameter("embassy");
     document.location.href=document.url + '?e=' + embassy;
     document.location.reload(true);
     
     //document.thisclient.cfname.value = embassy;
     //window.opener.location.reload();

}

and in the JSP code
embassy = request.getParameter("e");

Regards,
  Tomas Helgi
0
 

Author Comment

by:AndriesKeun
ID: 17099597
Just realised I would lose all the other data on my form too if i used reload(), and my way of doing it above prob wont work.

But do you see what I am trying to do? Im sure its possible.

A user has a form, and depending on what they select from the drop down box, andother field and button must be added to the form without losing all the other data. Its all dependant on what they select from the box.
0
 
LVL 25

Expert Comment

by:Tomas Helgi Johannsson
ID: 17099773
hmmm!
Ok then the only thing the function onChange should do is submit the form

function changeEmbassy(){
     
     //alert("hello");
     //embassy = request.getParameter("embassy");
     //document.location.href=document.url + '?e=' + embassy;
     //document.location.reload(true);
   
     document.form.submit(); //or instead of form use the name of the form.
     //document.thisclient.cfname.value = embassy;
     //window.opener.location.reload();

}

and the rest of your code unchanged.

Regards,
  Tomas Helgi
0
 
LVL 17

Expert Comment

by:gops1
ID: 17105332
Try this sample code, works without refresh: Simpler Way

<html>
      <head>
            <title>Hide and Show TR</title>
                  <script language="javascript">
                  function changeEmbassy(obj){
                        for(i=0;i<obj.options.length;i++){
                              if(obj.options[i].selected){
                                    if(document.getElementById(obj.options[i].value))
                                          document.getElementById(obj.options[i].value).style.display='';
                              }else{
                                    if(document.getElementById(obj.options[i].value)){
                                          document.getElementById(obj.options[i].value).style.display='none';
                                    }
                              }
                        }

                  }

                  </script>
      </head>
<body>
      <table>
      <tr>
            <td  class='menutable' >Embassy:</td> <td>
                    <Select name=embassy onchange="changeEmbassy(this)">
                           <option value="blank"></option>
                           <option value="french">French</option>
                           <option value="spanish">Spanish</option>
                           <option value="Australian">Australian</option>
                           <option value="Austrian">Austrian</option>
                           <option value="Canadian">Canadian</option>
                           <option value="Czech">Czech</option>
                           <option value="Egyptian">Egyptian</option>
                    </select>
      </td></tr>



      <tr id="french" style="display:none">
            <td  class='menutable' >Consulate Date:</td> <td><input name=consulatedate value='' style='width:100' onfocus='popUpCalendar(this, this, "yyyy-mm-dd");'><input type=button value="French" onClick="openFrench()"> </td>
      </tr>


      <tr id="spanish" style="display:none">
            <td  class='menutable' >Consulate Date:</td> <td><input name=consulatedate value='' style='width:100' onfocus='popUpCalendar(this, this, "yyyy-mm-dd");'><input type=button value="Spanish" onClick="openSpanish()"> </td>
      </tr>
      </table>
      
</body>
</html>
0
 
LVL 17

Accepted Solution

by:
gops1 earned 800 total points
ID: 17105392
Yet another and better method:

<html>
      <head>
            <title>Hide and Show TR</title>
                  <script language="javascript">
                  function changeEmbassy(obj){
                        for(i=0;i<obj.options.length;i++){
                              if(obj.options[i].selected){
                                    if(i==1){
                                          document.test.opencountry.onclick=function(){openFrench();};
                                          document.test.opencountry.value="French";
                                    }else if(i==2){
                                          document.test.opencountry.onclick=function(){openSpanish();};
                                          document.test.opencountry.value="Spanish";
                                    }
                                    break;
                              }
                        }

                  }

                  </script>
      </head>
<body>
      <table>
      <form name="test">
      <tr>
            <td  class='menutable' >Embassy:</td> <td>
                    <Select name=embassy onchange="changeEmbassy(this)">
                           <option value="blank"></option>
                           <option value="french">French</option>
                           <option value="spanish">Spanish</option>
                           <option value="Australian">Australian</option>
                           <option value="Austrian">Austrian</option>
                           <option value="Canadian">Canadian</option>
                           <option value="Czech">Czech</option>
                           <option value="Egyptian">Egyptian</option>
                    </select>
      </td></tr>



      <tr id="country">
            <td  class='menutable' >Consulate Date:</td> <td><input name=consulatedate value='' style='width:100' onfocus='popUpCalendar(this, this, "yyyy-mm-dd");'><input name="opencountry" id="opencountry" type=button value="French" onClick="openFrench()"> </td>
      </tr>
      </form>
      </table>

</body>
</html>
0
 

Author Comment

by:AndriesKeun
ID: 17106604
thanks gops, you guru you. thats exactly what i wanted, and it worked first time.

cheers
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

What monsters are hiding in your child's room? In this article I will share with you a tech horror story that could happen to anyone, along with some tips on how you can prevent it from happening to you.
One of the most important things in an application is the query performance. This article intends to give you good tips to improve the performance of your queries.
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
Suggested Courses

636 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