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
Solved

Drop down box results in refreshing (reloading) page

Posted on 2006-07-13
12
245 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
  • 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
method inner class 6 83
maven project in eclipse 11 60
JavaScript parse form with colon separated values 2 78
mysql jsp example issue 32 48
Some of the SEO trends we might expect in 2017.
This article describes how to reset your Windows 10 password when you've forgotten it.
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

840 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