?
Solved

How do I select 5 options to post to a jsp file?

Posted on 2005-03-01
16
Medium Priority
?
209 Views
Last Modified: 2010-04-01
In the draft code shown, I'd like to select 5 options to post to theQueryController.jsp.
I'd also like to have the selections inserted in text boxes to display the selected options to the user.
Check boxes will not do because I have a long list to select from.
Kindly instruct on how to do the above.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<body>
<form action="theQueryController.jsp" method="post">
<table align="left" width="70%" border="0" background="/home/ezange/gifFiles/blue_marble.gif">
   <td align="left"><font color="gold" size=6><br>Query for Charts<br><br></td>
     <table align="left" width="40%" height="70%" border="0" background="/home/ezange/gifFiles/blue_rock.gif">
        <td>
        <td align=left><br><font color="green" face="AGaramond, serif" size=3><sup><b>*</b></sup>required information</font><br><br>
          <b>Select any 5 Service Delivery Points for their charts <sup><font color=green>*</sup></font></b>
        <p>
          <select name="ailment">
            <option selected> Select any five </option>
            <option> Kamachumu </option>
            <option> Katoke </option>
            <option> Ruzinga </option>
            <option> Buganguzi </option>
            <option> Kashozi </option>
            <option> Ihungo </option>
            <option> Karagwe </option>
          <option> Kishanda</option>
          </select>
        </p>
        </td>
       
      <table align="left" width="70%" height="10%" border="0" background="/home/ezange/gifFiles/blue_rock.gif">
         <td align="left">
            <b>Selected Service Delivery Points <font size=2 color=green><sup>*</sup></font></b><br>
            <input type="text" name="sdpName1" value="" size=20 maxlength=25>
          <input type="text" name="sdpName2" value="" size=20 maxlength=25>
          <input type="text" name="sdpName3" value="" size=20 maxlength=25>
          <input type="text" name="sdpName4" value="" size=20 maxlength=25>
          <input type="text" name="sdpName5" value="" size=20 maxlength=25><br><br>
       </td>
      </table>
     
</table>
</body>
</html>

Thank you for the instruction.
0
Comment
Question by:Rrugemalira
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 5
16 Comments
 
LVL 35

Expert Comment

by:TimYates
ID: 13430474
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<body>
<script language="Javascript">
  function ping( select )
  {
    a = 1 ;
    for( var i = 0 ; i < select.options.length ; i++ )
    {
      if( select.options[i].selected )
      {
        document.getElementById( 'sdpName' + a ).value = select.options[ i ].value ;
        a++ ;
      }
      if( a > 5 ) break ;
    }
  }
</script>
<form action="theQueryController.jsp" method="post">
<table align="left" width="70%" border="0" background="/home/ezange/gifFiles/blue_marble.gif">
   <td align="left"><font color="gold" size=6><br>Query for Charts<br><br></td>
     <table align="left" width="40%" height="70%" border="0" background="/home/ezange/gifFiles/blue_rock.gif">
        <td>
       <td align=left><br><font color="green" face="AGaramond, serif" size=3><sup><b>*</b></sup>required information</font><br><br>
          <b>Select any 5 Service Delivery Points for their charts <sup><font color=green>*</sup></font></b>
       <p>
          <select name="ailment" MULTIPLE onchange="ping( this )">
            <option selected> Select any five </option>
            <option> Kamachumu </option>
            <option> Katoke </option>
            <option> Ruzinga </option>
            <option> Buganguzi </option>
            <option> Kashozi </option>
            <option> Ihungo </option>
            <option> Karagwe </option>
         <option> Kishanda</option>
          </select>
       </p>
        </td>

      <table align="left" width="70%" height="10%" border="0" background="/home/ezange/gifFiles/blue_rock.gif">
         <td align="left">
            <b>Selected Service Delivery Points <font size=2 color=green><sup>*</sup></font></b><br>
            <input type="text" id="sdpName1" name="sdpName1" value="" size=20 maxlength=25>
         <input type="text" id="sdpName2" name="sdpName2" value="" size=20 maxlength=25>
         <input type="text" id="sdpName3" name="sdpName3" value="" size=20 maxlength=25>
         <input type="text" id="sdpName4" name="sdpName4" value="" size=20 maxlength=25>
         <input type="text" iid="sdpName5" name="sdpName5" value="" size=20 maxlength=25><br><br>
      </td>
      </table>

</table>
</body>
</html>
0
 
LVL 35

Expert Comment

by:TimYates
ID: 13430479
or something?
0
 
LVL 35

Expert Comment

by:TimYates
ID: 13430498
Sorry...  I forgot to clear the boxes when less than 5 are selected:

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<body>
<script language="Javascript">
  function ping( select )
  {
    a = 1 ;
    for( var i = 0 ; i < select.options.length ; i++ )
    {
      if( select.options[i].selected )
      {
        document.getElementById( 'sdpName' + a ).value = select.options[ i ].value ;
        a++ ;
      }
      if( a > 5 ) break ;
    }
    for( var i = a ; i < 6 ; i++ )
      document.getElementById( 'sdpName' + i ).value = '' ;
  }
</script>
<form action="theQueryController.jsp" method="post">
<table align="left" width="70%" border="0" background="/home/ezange/gifFiles/blue_marble.gif">
   <td align="left"><font color="gold" size=6><br>Query for Charts<br><br></td>
     <table align="left" width="40%" height="70%" border="0" background="/home/ezange/gifFiles/blue_rock.gif">
        <td>
       <td align=left><br><font color="green" face="AGaramond, serif" size=3><sup><b>*</b></sup>required information</font><br><br>
          <b>Select any 5 Service Delivery Points for their charts <sup><font color=green>*</sup></font></b>
       <p>
          <select name="ailment" MULTIPLE onchange="ping( this )">
            <option selected> Select any five </option>
            <option> Kamachumu </option>
            <option> Katoke </option>
            <option> Ruzinga </option>
            <option> Buganguzi </option>
            <option> Kashozi </option>
            <option> Ihungo </option>
            <option> Karagwe </option>
         <option> Kishanda</option>
          </select>
       </p>
        </td>

      <table align="left" width="70%" height="10%" border="0" background="/home/ezange/gifFiles/blue_rock.gif">
         <td align="left">
            <b>Selected Service Delivery Points <font size=2 color=green><sup>*</sup></font></b><br>
            <input type="text" id="sdpName1" name="sdpName1" value="" size=20 maxlength=25>
         <input type="text" id="sdpName2" name="sdpName2" value="" size=20 maxlength=25>
         <input type="text" id="sdpName3" name="sdpName3" value="" size=20 maxlength=25>
         <input type="text" id="sdpName4" name="sdpName4" value="" size=20 maxlength=25>
         <input type="text" iid="sdpName5" name="sdpName5" value="" size=20 maxlength=25><br><br>
      </td>
      </table>

</table>
</body>
</html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:Rrugemalira
ID: 13430855
Mmm, I'll have to learn javascripting!
The selected service-delivery-point names go to one and the same text box instead of consecutive boxes to fill five boxes.
0
 
LVL 35

Expert Comment

by:TimYates
ID: 13431130
>> The selected service-delivery-point names go to one and the same text box instead of consecutive boxes to fill five boxes.

Errr...

I don't understand...

Did you mean it diodn't work in IE?

This one does:

--------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<body>
<script language="Javascript">
  function ping( select )
  {
    a = 1 ;
    for( var i = 0 ; i < select.options.length ; i++ )
    {
      if( select.options[i].selected )
      {
        if( document.all )
          eval( 'document.all.sdpName' + a ).value = select.options[ i ].text ;
        else
          document.getElementById( 'sdpName' + a ).value = select.options[ i ].value ;

        a++ ;
      }
      if( a > 5 ) break ;
    }
    for( var i = a ; i < 6 ; i++ )
      document.getElementById( 'sdpName' + i ).value = '' ;
  }
</script>
<form action="theQueryController.jsp" method="post">
<table align="left" width="70%" border="0" background="/home/ezange/gifFiles/blue_marble.gif">
   <td align="left"><font color="gold" size=6><br>Query for Charts<br><br></td>
     <table align="left" width="40%" height="70%" border="0" background="/home/ezange/gifFiles/blue_rock.gif">
        <td>
       <td align=left><br><font color="green" face="AGaramond, serif" size=3><sup><b>*</b></sup>required information</font><br><br>
          <b>Select any 5 Service Delivery Points for their charts <sup><font color=green>*</sup></font></b>
       <p>
          <select name="ailment" MULTIPLE onchange="ping( this )">
            <option selected> Select any five </option>
            <option> Kamachumu </option>
            <option> Katoke </option>
            <option> Ruzinga </option>
            <option> Buganguzi </option>
            <option> Kashozi </option>
            <option> Ihungo </option>
            <option> Karagwe </option>
         <option> Kishanda</option>
          </select>
       </p>
        </td>

      <table align="left" width="70%" height="10%" border="0" background="/home/ezange/gifFiles/blue_rock.gif">
         <td align="left">
            <b>Selected Service Delivery Points <font size=2 color=green><sup>*</sup></font></b><br>
            <input type="text" id="sdpName1" name="sdpName1" value="" size=20 maxlength=25>
         <input type="text" id="sdpName2" name="sdpName2" value="" size=20 maxlength=25>
         <input type="text" id="sdpName3" name="sdpName3" value="" size=20 maxlength=25>
         <input type="text" id="sdpName4" name="sdpName4" value="" size=20 maxlength=25>
         <input type="text" iid="sdpName5" name="sdpName5" value="" size=20 maxlength=25><br><br>
      </td>
      </table>

</table>
</body>
</html>
0
 

Author Comment

by:Rrugemalira
ID: 13431358
The way it is now working in Mozilla:
- The selection does not limit to 5
- Each selection is displayed in the same first text box, thus the user cannot know which five names have been selected.
- Each selection replaces the previous one in the text box.

Since there are five text boxes, I'd like to have each selection displayed in its own box.
0
 
LVL 35

Expert Comment

by:TimYates
ID: 13432328
>> - The selection does not limit to 5

true...  change:

    for( var i = 0 ; i < select.options.length ; i++ )
    {
      if( select.options[i].selected )
      {
        if( document.all )
          eval( 'document.all.sdpName' + a ).value = select.options[ i ].text ;
        else
          document.getElementById( 'sdpName' + a ).value = select.options[ i ].value ;

        a++ ;
      }
      if( a > 5 ) break ;
    }
to:
    for( var i = 0 ; i < select.options.length ; i++ )
    {
      if( a > 5 )
      {
        select.options[i].selected = false ;
      }
      else if( select.options[i].selected )
      {
        if( document.all )
          eval( 'document.all.sdpName' + a ).value = select.options[ i ].text ;
        else
          document.getElementById( 'sdpName' + a ).value = select.options[ i ].value ;

        a++ ;
      }
    }

>> - Each selection is displayed in the same first text box, thus the user cannot know which five names have been selected.

Not as far as I can see...they are displayed in all 5...  select 5 things...  all 5 boxes are full...

>> - Each selection replaces the previous one in the text box.

I don't understand...
0
 

Author Comment

by:Rrugemalira
ID: 13440176
Here is the latest code updated to include recommendations from TimYates (Thanks Tim for the kind help). However, only the left most text box out of the five receives sdpName.
Moreover, only the last entered sdpName gets posted (twice, once under sdpName1, the second time under sdpName).
I'm troubleshooting without success so far! Your further assistance will be greatly appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<body>

<form action="getrequestlist.jsp" method="post">

<script language="Javascript">
  function ping( select )
  {
    a = 1 ;
  for( var i = 0 ; i < select.options.length ; i++ )
    {
      if( a > 5 )
      {
        select.options[i].selected = false ;
      }
      else if( select.options[i].selected )
      {
        if( document.all )
          eval( 'document.all.sdpName' + a ).value = select.options[ i ].text ;
        else
          document.getElementById( 'sdpName' + a ).value = select.options[ i ].value ;

        a++ ;
      }
    }
    for( var i = a ; i < 6 ; i++ )
      document.getElementById( 'sdpName' + i ).value = '' ;
  }
</script>

<table align="center" width="70%" border="0" background="blue_marble.gif">
<tr>
<td align="center"><font color="gold" size=6><br>Query for Charts</font><br><br></td>
</tr>
</table>

<table align="center" width="70%" border="0" background="blue_rock.gif">
<tr>
<td align="center"><font color="green" face="AGaramond, serif" size=3><sup><b>*</b></sup>required information</font>
</td>
</tr>
<tr>
<td align="center">
<b>Select any 5 Service Delivery Points for their charts <sup><font color=green>*</sup></font></b>
       <p>
          <select name="sdpName" MULTIPLE onchange="ping( this )">
            <option selected> Select any five </option>
            <option> Kamachumu </option>
            <option> Katoke </option>
            <option> Ruzinga </option>
            <option> Buganguzi </option>
            <option> Kashozi </option>
            <option> Ihungo </option>
            <option> Karagwe </option>
            <option> Kishanda</option>
          </select>
       </p><br>
</td>
</tr>

<tr>
<td align="center">
<b>Selected Service Delivery Points <font size=2 color=green><sup>*</sup></font></b><br>
         <input type="text" id="sdpName1" name="sdpName1" value="" size=20 maxlength=25>
         <input type="text" id="sdpName2" name="sdpName2" value="" size=20 maxlength=25>
         <input type="text" id="sdpName3" name="sdpName3" value="" size=20 maxlength=25>
         <input type="text" id="sdpName4" name="sdpName4" value="" size=20 maxlength=25>
         <input type="text" id="sdpName5" name="sdpName5" value="" size=20 maxlength=25><br><br>
</td>
</tr>

<tr>
<td align=center>
<input type="submit" value="Submit"><input type="reset" value="Reset"><br><br>
</td>
</tr>

</table>

</body>
</html>
0
 
LVL 35

Expert Comment

by:TimYates
ID: 13440233
All 5 text boxes fill up for me...

You are getting the values like:

<%
    String[] sdpNames = request.getParameterValues( "sdpName" ) ;
    if( sdpNames != null )
    {
        for( int i = 0 ; i < sdpNames.length ; i++ )
        {
            out.println( "<h2>Got sdpName " + ( i + 1 ) + " with value " + sdpNames[ i ] ) ;
        }
    }
    else
    {
        out.println( "<H1>Nothing selected!!!</H1>" ) ;
    }
%>

aren't you?

   getParameterValues

not

   getParameterValue

(extra s on Values, as you are getting multiple values)
0
 
LVL 35

Assisted Solution

by:TimYates
TimYates earned 2000 total points
ID: 13440251
Also:

<script language="Javascript">
  function ping( select )
  {
    a = 1 ;
    for( var i = 0 ; i < select.options.length ; i++ )
    {
      if( i == 0 )
      {
        select.options[i].selected = false ;
      }
      else if( a > 5 )
      {
        select.options[i].selected = false ;
      }
      else if( select.options[i].selected )
      {
        if( document.all )
          eval( 'document.all.sdpName' + a ).value = select.options[ i ].text ;
        else
          document.getElementById( 'sdpName' + a ).value = select.options[ i ].value ;

        a++ ;
      }
    }
    for( var i = a ; i < 6 ; i++ )
      document.getElementById( 'sdpName' + i ).value = '' ;
  }
</script>

stops people selecting the first option (the "Select any five" one) ;-)

Tim
0
 
LVL 35

Expert Comment

by:TimYates
ID: 13440263
>> You are getting the values like:

that comment was about the file getrequestlist.jsp
0
 
LVL 35

Accepted Solution

by:
TimYates earned 2000 total points
ID: 13440432
Just spotted this in my feedback!  Thanks for the positive rating, but I almost missed this ;-)

--------

>> I don't know javasripting and will have to learn it.

it is quite useful :-)

>> But shouldn't the statement if( a > 5 ) break ; be in the body of the first if statement right after a++   ?

The "if( a > 5 )" statement basically clears the selection of all elements after the first 5.  Once we have 5 elements (so a will be greater than 5), it will set selected to false on every remaining element in the list.  Not really a wonderful way of doing it, as you have to deselect an old one, and then select a new one...  But it's the best most predictable solution I could think of...

>> I do not as yet understand the second for statement. Kindly explain.

Say we have only 3 items selected.  When the first for loop ends (after going over every item in the list), a will be equal to 4.  So the second loop will clear any text out of box 4 and 5.

Basically, it clears out the boxes that shouldn't have any contents...

> How do I make the selections enter into consecutive text boxes instead of just the first one as is the case now?

This is odd...  it works on Firefox...  And on IE6...

Here is the latest version of the javascript (with comments)

Can you give it a test?
 
<script language="Javascript">
  function ping( select )
  {
     // ok, we will use "a" as the index of the text box we are setting values for (from 1 to 5)
    var a = 1 ;

    // loop through all the options in the list
    for( var i = 0 ; i < select.options.length ; i++ )
    {
      if( i == 0 )  // if it's the first option, deselect it, as you are not allowed to select the first option
      {
        select.options[i].selected = false ;
      }
      else if( a > 5 ) // We have got 5 options selected already, so deselect this one
      {
        select.options[i].selected = false ;
      }
      else if( select.options[i].selected ) // Ok, so we know there are less then 5 selected, and it isn't the first option
      {
        if( document.all )
          eval( 'document.all.sdpName' + a ).value = select.options[ i ].text ;
        else
          document.getElementById( 'sdpName' + a ).value = select.options[ i ].text ;

        // that's this box filled up.  Move on to the next box
        a++ ;
      }
    }
    // If we have had less than 5 selections then a will be less than 6.  So go from a -> 5, and set the box contents to empty
    // this clears out the values when we go from 5 selections to 3 for example.  (Otherwise, data for box 4 and 5 would still remain in the boxes)
    for( var i = a ; i < 6 ; i++ )
    {
        if( document.all )
          eval( 'document.all.sdpName' + i ).value = "" ;
        else
          document.getElementById( 'sdpName' + i ).value = "" ;
    }
  }
</script>

Hope this helps :-)

Tim
0
 

Author Comment

by:Rrugemalira
ID: 13452324
Thanks  Tim for elaborating the JavaScript.
I trust the script does enable populating the five boxes as mentioned. However, this does not happen in my browsers.
I'll have to close the subject all the same!
0
 
LVL 35

Expert Comment

by:TimYates
ID: 13452400
what browser are you using?
0
 

Author Comment

by:Rrugemalira
ID: 13452567
I'm using Mozilla Firefox in Linux and IE6 in Windows XP Home edition.
0
 
LVL 35

Expert Comment

by:TimYates
ID: 13452649
Bizzarre!  I'm using firefox on linux, and IE6 on Windows 2K...

Good luck with it though!

Glad I could help :-)

Tim
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article lists the top 5 free OST to PST Converter Tools. These tools save a lot of time for users when they want to convert OST to PST after their exchange server is no longer available or some other critical issue with exchange server or impor…
We are witnesses that everyone is saying that our children shouldn't "play" with a technology because it is dangerous. This article is going to prove that they are wrong.
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question