Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2005-03-01
16
Medium Priority
?
216 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
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

The number of companies understanding the potential of IoT on B2B market is growing with each day. And yet only a small share of IoT developers have managed to equalize incomes and stay competitive in the international market.
This blog will spread awareness about Dropbox. We have given the statements based upon our experience. Along with this, there is a section of some new plans that should be added in Dropbox this year. This will make the storage service enhanced from …
Look below the covers at a subform control , and the form that is inside it. Explore properties and see how easy it is to aggregate, get statistics, and synchronize results for your data. A Microsoft Access subform is used to show relevant calcul…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

564 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