Problem on Loading Page

Hi experts,

I have one simple question. First, I am developing intranet application using JSP, Struts and ORACLE. Well, the question is not about Java or JSP but about HTML programming.

I have a form where it contains two comboboxes and many textboxes; the page itself can be scrolled because so many components there. Well, the second combobox's value depends on the first combobox. So after I do select the value in the first combobox, the second combobox will automatically be loaded with some value based on the choice in the first combobox. To accomplish it, well, the page must be reloaded but of course with parameter at behind for some processing. It works great!

The question starts to come when the first combobox is in the middle of the page. After I select the value, it will reload the page as normal but the page loaded at the beginning of the form instead of back to the where the user chooses the combobox. What I want is after the page loaded, it will return the position to the first combobox and not beginning of the page (in the middle of the page). It lets the user to fill in the form easily.

Any suggestions? Well, I am open to JavaScript or HTML but no VBScript. I appreciate all of your suggestions.

Best Regards
LVL 16
Who is Participating?
knightEknightConnect With a Mentor Commented:
You can avoid the reload altogether if you are willing to use javascript.  Have the JSP create javascript arrays in a similar manner as the sample below -- which uses States and Cities:

<TITLE>Dynamic SELECTs</title>
<SCRIPT language='JavaScript'>
<!-- //

 // create js arrays to hold the data for selCity

 var aryCityData = new Array();

 aryCityData[0] = new Array();
 aryCityData[0][0] = new Option('Select a State','0');

 aryCityData[1] = new Array();
 aryCityData[1][0] = new Option('Los Angeles','301');
 aryCityData[1][1] = new Option('Oakland','304');
 aryCityData[1][2] = new Option('Rio Linde','305');
 aryCityData[1][3] = new Option('San Diego','302');
 aryCityData[1][4] = new Option('San Fransisco','303');

 aryCityData[2] = new Array();
 aryCityData[2][0] = new Option('Miami','101');
 aryCityData[2][1] = new Option('Orlando','102');
 aryCityData[2][2] = new Option('Tampa','103');

 aryCityData[3] = new Array();
 aryCityData[3][0] = new Option('Abilene','201');
 aryCityData[3][1] = new Option('Austin','202');
 aryCityData[3][2] = new Option('Dallas','203');
 aryCityData[3][3] = new Option('Houston','204');

 function reloadCities(curStateIndex)  // pass in the current State index
    if ( curStateIndex < 0 ) return;  // no state selected, so do nothing

    var aryCityOpts = document.myform.selCity.options;  // points to selCity options array

    aryCityOpts.length=0;  // first, clear the current City options ...

    // then re-load the City options with values for the current State
    for ( var i=0,n=aryCityData[curStateIndex].length; i<n; i++ )
       //// the line below no longer works in IE5 (it works in IE4 and NS4+).
       // aryCityOpts[aryCityOpts.length-1] = new Option(aryCityData[curStateIndex][i].text,aryCityData[curStateIndex][i].value);
       //// therefore, it now takes three lines to do the same thing:

       aryCityOpts.length++;  // add a new Option, then put data in it (below)
       aryCityOpts[aryCityOpts.length-1].text  = aryCityData[curStateIndex][i].text;
       aryCityOpts[aryCityOpts.length-1].value = aryCityData[curStateIndex][i].value;

// -->


<BODY onLoad='document.myform.selState.focus();'>
 <FORM name='myform' method='post' action='whatever.asp' onSubmit='return(false);'>

   State: &nbsp;
   <SELECT name='selState' size='1' onChange='reloadCities(this.selectedIndex);'>
     <OPTION value='0'></option>
     <OPTION value='30'>California</option>
     <OPTION value='10'>Florida</option>
     <OPTION value='20'>Texas</option>

   City: &nbsp; &nbsp;
   <SELECT name='selCity' size='1' onChange='alert(this.options[this.selectedIndex].value)'>
     <OPTION value=''>Select a State</option>

reginabConnect With a Mentor Commented:
just do a javascript focus.  I am guessing all of these components already are properly named so the jsp works correctly so the addition of javascript onload.focus should work great for this.  go here for details.
suprapto45Author Commented:
Well, thanks knightEknight, but loading data from JavaScript is not what I intend to do, the data are obtained from database.

Thanks reginab, I will try yours.

Any other suggestions?

Never miss a deadline with

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

[ fanpages ]IT Services ConsultantCommented:
Set an anchor tag before the combobox you are selecting from & append this to the URL for reload.

PS. If the data in your database is static, there is no reason (other than perhaps quantity of data) why you cannot "cache" it locally (in Javascript) so that you do not have to return to the server & reload the page.


You can create the javascript arrays from the database.  

var i=0,j=0;
aryCityData[i] = new Array();

  while not rs.eof
   aryCityData[i][j++] = new Option('<%=rs(0)%>','<%=rs(1)%>');
[ fanpages ]IT Services ConsultantCommented:

Did you try my initial suggestion:

"Set an anchor tag before the combobox you are selecting from & append this to the URL for reload."

I think this will address your original question:

"What I want is after the page loaded, it will return the position to the first combobox and not beginning of the page (in the middle of the page)."


Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.