Javascript and dynamically form creation

Question

I have a register form in which i want when the user selects an item from a first Select to create dynamically a second select with items from the database which are compatible with first selection. For example i have 2 select Lists the first with Lessons and the second with professors.When i select from the first Select a lesson the Second Select Lists must have only professors of this lesson. I am using jsp,java and i want to avoid ajax is this possible? Thank you!

Yes, it's very possible, but what do you want help with? Show us where in the code you're stuck and then you may get more helpful answers. http://stackoverflow.com/faq#howtoask — mrk, Jul 11 '11 at 19:07
Why do you want to avoid ajax? It's perfectly suited for this situation.. — Dexter, Jul 11 '11 at 19:08
If it's caused by plain ignorance, I'd suggest to get yourself through the JSP+Ajax+Servlet kickoff examples here so that you can play around with it and finally get enlightened: http://stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax — BalusC, Jul 11 '11 at 19:50

score 2 · Accepted Answer · answered Jul 11 '11 at 19:10

2

Yes it's possible.

However without AJAX, you would have to load all of the data with the page. That means storing the list of professors associated with each lesson in either a Javascript array or in a hidden HTML element from which you can retrieve the data later on.

answered Jul 11 '11 at 19:10

tskuzzy

35,812
14
73
140

1

Thank you!I wanted to avoid this.... I was thinking of combining ajax whith JSON as a final solution or something like that. – nikosdi Jul 11 '11 at 19:13

score 1 · Answer 2 · answered Jul 11 '11 at 19:12

You may avoid ajax by using one of those solutions:

Load all the professors of all the lessons when displaying the form, and store them in some JavaScript structure. When the selection of lesson changes, get the associated professors from this JavaScript structure. This might mean loading too much data at once, though
When the lessons selection changes, submit the form and redisplay it with the select box of professors populated.

Both of the solutions need JavaScript, and I really don't see what you gain by not using AJAX, though. You might avoid JavaSCript completely with the second solution, but the user would have to click a submit button to load the second form.

score 1 · Answer 3 · answered Jul 11 '11 at 19:13

Yes it is possible,

create two select boxes with the professor and lessons list and hide them by default. So attach event "onchange" on your first select box, when professors are selected show list with professors, when Lessons are selected show list with Lessons and hide Professors. e.g.

<select id="cbOne" onchange="show(this);">
<option value="0">Select</option>
<option value="1">Professors</option>
<option value="2">Lessons</option>
</select>

<select id="cbLessons" style="display: none;">
... your list
</select>
<select id="cbProfessors" style="display: none;">
... your list
</select>

This is method for JavaScript show

<script language="javascript">

    function show(el)
    {
      var professors = document.getElementById('cbProfessors');
      var lesssons = document.getElementById('cbLessons');
       if(el.value == "0")
       {
         professors.style.display = 'none';
         lessons.style.display = 'none';
    }
       else if(el.value == "1")
       {
         professors.style.display = '';
         lessons.style.display = 'none';
       }
       else if(el.value == "2")
       {
         professors.style.display = 'none';
         lessons.style.display = '';
       }
    }

</script>

I hope that this will help you.

Javascript and dynamically form creation

3 Answers3