• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 294
  • Last Modified:

ASP/Javascript - please see Q below:

Hi,  I have an ASP page with javascript that basically you select your values from one select box and click to move it to the second box.  This works perfect.  
However, now that those values are moved over, how can I submit those values when I click the SUBMIT button, without reselecting the values in the new box, and then SUBMIT?  IT should basically assume that all values in the second select box are selected.   I am a total javascript dummy, so need help how to do this - assuming this is from the JAva part.  
Here is the code:
<script LANGUAGE="JavaScript">
<!--
function copyToList(from,to){
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if(toList.options.length >0&& toList.options[0].value == 'temp'){
toList.options.length =0;
}var sel =false;
for(i=0;i<fromList.options.length;i++){var current = fromList.options[i];
if(current.selected){
sel =true;
if(current.value == 'temp'){
alert ('You cannot move this text!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length]=new Option(txt,val);
fromList.options[i]=null;
i--;
}}if(!sel) alert ('error');
}function allSelect() {
List = document.forms[0].chosen.selectedIndex;
if(List.length && List.options[0].value == 'temp')return;
for(i=0;i<List.length;i++) {
List.options[i].selected =true;
}}
// -->
</SCRIPT>

<form onSubmit="allSelect(); return" method="post">
<p>From:<br>
<select NAME="possible" SIZE="8" MULTIPLE>
<option value="1">One</option>
<option value="2">Two</option>
</select>

<aHREF="javascript:copyToList('possible','chosen')">Add to Booking</a><br>
<aHREF="javascript:copyToList('chosen','possible')">Remove from Booking</a>
<p>To:<br>
<select NAME="chosen" SIZE="8" MULTIPLE>
<option VALUE="temp">Make your choice on the left
</select>
<input TYPE=submit>

</form>
0
rsp05
Asked:
rsp05
  • 6
  • 5
  • 4
  • +3
1 Solution
 
pillbug22Commented:
How about adding a hidden field on your form?

When you click to move from box 1 to box 2, you write the value of the items being moved into the hidden field.  When you submit your form, the hidden field will hold the values that were moved.
0
 
Shailesh15Commented:
Try This.. Get the values from field 'selection'.

************************************
<script LANGUAGE="JavaScript">
<!--
function copyToList(from,to){
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if(toList.options.length >0&& toList.options[0].value == 'temp'){
toList.options.length =0;
}var sel =false;
for(i=0;i<fromList.options.length;i++){var current = fromList.options[i];
if(current.selected){
sel =true;
if(current.value == 'temp'){
alert ('You cannot move this text!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length]=new Option(txt,val);
fromList.options[i]=null;
i--;
}}if(!sel) alert ('error');
}

function allSelect() {
var i;
var List;
List = document.forms[0].chosen;
var sels="";
for (i=0;i<List.options.length;i++)
      sels += List.options[i].text+",";
if(document.forms[0].chosen.selectedIndex.length && document.forms[0].chosen.selectedIndex.options[0].value == 'temp')return;
document.forms[0].selection.value=sels;
}
// -->
</SCRIPT>

<form onSubmit="allSelect(); return" method="post">
<input type="hidden" name="selection">
<p>From:<br>
<select NAME="possible" SIZE="8" MULTIPLE>
<option value="1">One</option>
<option value="2">Two</option>
</select>

<a HREF="javascript:copyToList('possible','chosen')">Add to Booking</a><br>
<a HREF="javascript:copyToList('chosen','possible')">Remove from Booking</a>
<p>To:<br>
<select NAME="chosen" SIZE="8" MULTIPLE>
<option VALUE="temp">Make your choice on the left
</select>
<input TYPE=submit>

</form>
0
 
Shailesh15Commented:
You can also shorten code using...

if(List.selectedIndex.length && List.selectedIndex.options[0].value == 'temp')return;

instead of

if(document.forms[0].chosen.selectedIndex.length && document.forms[0].chosen.selectedIndex.options[0].value == 'temp')return;
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.

 
zastilCommented:
<script LANGUAGE="JavaScript">
<!--
function copyToList(from,to){
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if(toList.options.length >0&& toList.options[0].value == 'temp'){
toList.options.length =0;
}var sel =false;
for(i=0;i<fromList.options.length;i++){var current = fromList.options[i];
if(current.selected){
sel =true;
if(current.value == 'temp'){
alert ('You cannot move this text!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length]=new Option(txt,val);
fromList.options[i]=null;
i--;
}}if(!sel) alert ('error');
}function allSelect() {
List = document.forms[0].chosen;
for(i=0;i<List.length;i++) {
List.options[i].selected =true;
}
}
// -->
</SCRIPT>

<form onSubmit="allSelect(); return" method="post">
<p>From:<br>
<select NAME="possible" SIZE="8" MULTIPLE>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="button" onclick="allSelect()" value="check all">

<a HREF="javascript:copyToList('possible','chosen')">Add to Booking</a><br>
<a HREF="javascript:copyToList('chosen','possible')">Remove from Booking</a>
<p>To:<br>
<select NAME="chosen" SIZE="8" MULTIPLE>
<option VALUE="temp">Make your choice on the left
</select>

<input TYPE=submit>

</form>
0
 
zastilCommented:
In the script i posted the check all button can be removed just to test the checkall function
0
 
ZeeSparrowCommented:
You're on the right path.  To select all the items in the chosen selectbox, you need to iterate through each one.  Change the allSelect function as follows:

function allSelect() {
for(i=0;i< document.forms[0].chosen.length; i++) {
      document.forms[0].chosen[i].selected=true;
}}


Then for the ASP, you can use this to view the results:

<%
dim chosen
chosen = Request.Form("chosen")
Response.Write chosen & "<BR><BR>"
%>
 
0
 
Lord_McFlyCommented:
The following snippet creates a string with the values separated with a "|" which it puts in a hidden field which when your form is selected is collected up and then the values are then split up using the Split()

<%@ Language=VBScript %>
<%
Dim sItems

If Request.Form("AddedItems") <> "" then
      sItems = Split(Request.Form("AddedItems"),"|")
      
      For iLp = 0 to UBound(sItems)
            Response.Write sItems(iLp) & "<br>"
      Next
End If
%>
<html>
<head>
<title>Example</title>
<script language="JavaScript">
<!--
function BuildList()
      {
            var chck
            var i
            var list = ""
            
            for (i=0; i<=document.example.added.length-1; i++)
                  {
                        list = list + document.example.added.options[i].value + "|"
                  }
                        
            list = list.substr(0,list.length-1)
            
            document.example.AddedItems.value = list
            
            document.example.submit()
      }
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="example" method="post" action="">
      <select name="added">
            <option value="Peter">Peter</option>
            <option value="Roger">Roger</option>
            <option value="Simon">Simon</option>
      </select>
      <input type="hidden" name="AddedItems" value="">
      <input type="button" name="Submit" value="Submit" onClick="BuildList()">
</form>

</body>
</html>
0
 
rsp05Author Commented:
Thanks, all for your replies.

When i try some of them and I do:
first check if <>""" then

<%sel=Trim(Request.Querystring("selection"))
response.write sel%>

It only returns a value if I use "get" instead of "post"

0
 
ZeeSparrowCommented:
If you want to use "get" then use Request.Querystring("selection") to see the results.
If you would rather use "post", use Request.Form("selection").
0
 
Shailesh15Commented:
Alternately you could simply type Request("selection")
and retrieve either a querystring or a form input of the same name.
0
 
ZeeSparrowCommented:
True, Shailesh, but for security, accuracy and speed - so long as you know the information is coming from POST/GET, you should use the specific collection.

There are times when you can expect information to come from POST and GET, so using request("selection") is acceptable in such cases.

It's not a habit to get into though as it can cause a lot of head scratching when you get the wrong values.......
0
 
Shailesh15Commented:
Agreed  but it is a solution that works!. Any way I have used it many times & never I had  any problem.

On the lighter side...
If a programmer is dumb enough to code a querystring variable & field name with same name , does need to scratch his head a bit!.... next time he will improve.
0
 
rsp05Author Commented:
Thx, again, guys, but here's the problem:


If I use Request.QueryString, I need to use get, thus displaying the query string

If I use Request.Form, with post, that means I MUST reselect from that box.

So, what's my best option?

I will close this topic shortly.
0
 
Shailesh15Commented:
I would go for hidden field with Post method.
0
 
rsp05Author Commented:
Ok, but my original goal was NOT have to reselect the values in the second left-hand box
0
 
ZeeSparrowCommented:
You do not have to reselect the values to get them using Request.Form.

Modify your  allSelect function as I mentioned above:

function allSelect() {
for(i=0;i< document.forms[0].chosen.length; i++) {
     document.forms[0].chosen[i].selected=true;
}}

Try it.  It works.
0
 
rsp05Author Commented:
Excellent!  ZeeSparrow, thanks!

Since the solutions and answers that I used most are from ZeeSparrow and Shailesh15, and you guys kept me throughout the thread, the fair thing to do is split the points.

The only thing is when I try to do that, I can't select two answers, it only allows me to select one radio buttion.

Shailesh15=62.5
ZeeSparrow=62.5
0
 
Shailesh15Commented:
That part you have to code to read the selection field values & move records from left to right using Javscript or ASP.

Insert this script after form close tag:
****************************************
<script LANGUAGE="JavaScript">
<!--

var selectstr="One,Two,"
// Need to update from ASP request.form("selection")
//var selectstr="<%=request.form("selection")%>"
var ArrSel
var k
ArrSel =selectstr.split(",")

for(k=0;k<ArrSel.length-1;k++)
{
      fromList = document.forms[0].possible;
      toList = document.forms[0].chosen;
      if(toList.options.length >0&& toList.options[0].value == 'temp'){
            toList.options.length =0;
      }
      var sel =false;
      for(i=0;i<fromList.options.length;i++)
            {var current = fromList.options[i];
                  if(current.text==ArrSel[k]){
                  sel =true;
                  txt = current.text;
                  val = current.value;
                  toList.options[toList.length]=new Option(txt,val);
                  fromList.options[i]=null;
                  i--;
            }
}
}
// -->
</SCRIPT>
0
 
ZeeSparrowCommented:
To split the points - see the following for instructions:

http://www.experts-exchange.com/Web/Web_Languages/ASP/help.jsp#hi19

Thanks, and good luck!
0

Featured Post

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.

  • 6
  • 5
  • 4
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now