Manoj Shukla Manoj Shukla - 3 years ago 53
HTML Question

Load another jsp in current <div> box when (onchange) selected any <option>

I have

with code as

<h3>Person's Info</h3>
Person: <select onchange="loadIntoDiv(this.value)">
<option value="1">Select Name 1</option>
<option value="2">Select Name 2</option>
<option value="3">Select Name 3</option>
<div id="fetchHere"></div>
<input type="submit" name="submit" value="Submit Proposal" />

Now what I want is to load a new jsp page i.e
whenever any of the option is selected. I want JavaScript Code only, NO JQUERY PLEASE.

Onchange of option, this
must be called and that function should call
. Please note that
must not be loaded until any of the option is selected. And should be called or loaded every OnChange, so no need to hide or show div concept needed.

I want JavaScript Code for
for above scenario.

Answer Source

I found the solution far ago but forgot to update, so here it is..

We need to make an AJAX call and the response of that AJAX will be fetch.jsp (page with some processing and data if needed) and replace the previous div content with this response.

function loadIntoDiv(var abc) {
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("fetchHere").innerHTML =
  };"GET", "/ServletController?param=abc", true);
  //Here param is used to pass the value of selected element
  //We can also use here POST/PUT/DELETE methods..with some modification.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download