Solved

Drop down box results in refreshing (reloading) page

Posted on 2006-07-13
12
241 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 24

Expert Comment

by:Tomas Helgi Johannsson
Comment Utility
    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
Comment Utility
that sounds like php to me, not jsp
0
 
LVL 24

Expert Comment

by:Tomas Helgi Johannsson
Comment Utility
    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 24

Expert Comment

by:Tomas Helgi Johannsson
Comment Utility

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
Comment Utility
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
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 24

Expert Comment

by:Tomas Helgi Johannsson
Comment Utility
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
Comment Utility
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 24

Expert Comment

by:Tomas Helgi Johannsson
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
thanks gops, you guru you. thats exactly what i wanted, and it worked first time.

cheers
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Describes a method of obtaining an object variable to an already running instance of Microsoft Access so that it can be controlled via automation.
A safe way to clean winsxs folder from your windows server 2008 R2 editions
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

772 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

11 Experts available now in Live!

Get 1:1 Help Now