Manoj Shukla Manoj Shukla - 3 years ago 53
HTML Question

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

I have

load_person.jsp
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>
</select>
<BR><BR>
<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
fetch.jsp
whenever any of the option is selected. I want JavaScript Code only, NO JQUERY PLEASE.

Onchange of option, this
loadIntoDiv(this.value)
must be called and that function should call
fetch.jsp
. Please note that
fetch.jsp
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
loadIntoDiv()
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 =
      this.responseText;
    }
  };
  xhttp.open("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.
  xhttp.send();
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download