Solved

Drop down box results in refreshing (reloading) page

Posted on 2006-07-13
12
244 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
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

Knowing where your website is hosted is as important as the features you receive, the monthly fee, and the support you receive. Due diligence should be done when choosing your next hosting provider.
Each year, investment in cloud platforms grows more than 20% (https://www.immun.io/hubfs/Immunio_2016/Content/Marketing/Cloud-Security-Report-2016.pdf?submissionGuid=a8d80a00-6fee-4b85-81db-a4e28f681762) as an increasing number of companies begin to…
In a recent question (https://www.experts-exchange.com/questions/28997919/Pagination-in-Adobe-Acrobat.html) here at Experts Exchange, a member asked how to add page numbers to a PDF file using Adobe Acrobat XI Pro. This short video Micro Tutorial sh…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

777 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