CODEWITHSUNDEEP
javajavascriptjqueryhtmlajax
Mr Man
Mr Man

Reputation: 1588

How to reload a page based on a dropdown box

I have a jsp page that contains a dynamically populated table. The data that populates the table will be decided by a drop down box. I figure this can be done in javascript, but unfortunately, I am not well versed in JS. So here is some example code:

      <p> Please select a number:
    <select name="selectNumber" id="selectNumber">
      <option value="1" <%if (number.equals("1")) {%>selected<%}%>>1</option>
      <option value="2" <%if (number.equals("2")) {%>selected<%}%>>2</option>
      <option value="3" <%if (number.equals("3")) {%>selected<%}%>>3</option>
      <option value="4" <%if (number.equals("4")) {%>selected<%}%>>4</option>
      <option value="5" <%if (number.equals("5")) {%>selected<%}%>>5</option>
      <option value="6" <%if (number.equals("6")) {%>selected<%}%>>6</option>
    </select>
  </p>

So I am using a dropdown like this, and getting the parameter number like this:

if (request.getParameter("selectNumber") !=null) {number =    (String)request.getParameter("selectNumber")     ;}

So basically I was wondering if there is a script I can do to reload the page once one of the dropdowns is selected, that will allow me to populate my table with the given "number"? Also, I am not opposed to doing this with AJAX/jQuery, I would just need some tips on that, because I have never used AJAX calls before. Thanks in advance.

Upvotes: 1

Views: 3360

Answers (1)

James
James

Reputation: 3239

You can use JavaScript to change the page location (a JavaScript redirect) using the following code:

window.location = 'http://server.com/page.asp';

Attach that code to the onchange event for the select box and it will redirect to a page. You'll probably also want to attach an onclick event to each option within the select box as the onchange event only fires once the select box looses focus. You can send data via GET that represents the value of the selected option.

See the example below. Note the onchange (attached to the select) and the onclick (attached to the option).

<select name="selectNumber" id="selectNumber" onchange="window.location = 'http://server.com/page.asp?value=' + this.options[this.selectedIndex].value;">
  <option value="1" <%if (number.equals("1")) {% onclick="window.location = 'http://server.com/page.asp?value=' + this.value;">selected<%}%>>1</option>
  ...
</select>

Upvotes: 2

Related Questions