Solved

Drop down box results in refreshing (reloading) page

Posted on 2006-07-13
12
243 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Note: This is the third blog post in a series on email clearinghouses (https://www.xmatters.com/alert-management/blog-email-has-failed-us?utm_campaign=70138000000ydLoAAI&utm_source=exex&utm_medium=article&utm_content=blog-post).   We’ve been talki…
Cloud-based technologies and services will continue to grow in popularity in 2017 thanks to the simple, scalable and cost-effective solutions they deliver. Here are three areas where cloud adoption is poised to really take off.
Migrating to Microsoft Office 365 is becoming increasingly popular for organizations both large and small. If you have made the leap to Microsoft’s cloud platform, you know that you will need to create a corporate email signature for your Office 365…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

895 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

18 Experts available now in Live!

Get 1:1 Help Now