Link to home
Start Free TrialLog in
Avatar of Rrugemalira
Rrugemalira

asked on

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

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.
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
<!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>
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
or something?
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
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>
Avatar of Rrugemalira
Rrugemalira

ASKER

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.
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
>> 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>
Avatar of Rrugemalira
Rrugemalira

ASKER

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.
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
>> - 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...
Avatar of Rrugemalira
Rrugemalira

ASKER

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>
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
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)
SOLUTION
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
>> You are getting the values like:

that comment was about the file getrequestlist.jsp
ASKER CERTIFIED SOLUTION
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rrugemalira
Rrugemalira

ASKER

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!
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
what browser are you using?
Avatar of Rrugemalira
Rrugemalira

ASKER

I'm using Mozilla Firefox in Linux and IE6 in Windows XP Home edition.
Avatar of TimYates
TimYates
Flag of United Kingdom of Great Britain and Northern Ireland image
Bizzarre!  I'm using firefox on linux, and IE6 on Windows 2K...

Good luck with it though!

Glad I could help :-)

Tim