I added a button called "Serialize" that calls a function called
form_serialize() which looks like this:

function form_serialize()
{
  var formData = $('myform').serialize();
  alert(formData);
}
At no time, with an option moved from availableOptions to selectedOptions or
just using the one default/test option do selectedOptions or
availableOptions appear in the serialized form data.

I noticed that you used multiple="multiple" and I have tried it both ways
and I get nothing!



On Sun, Jul 3, 2011 at 5:20 PM, Walter Lee Davis <wa...@wdstudio.com> wrote:

> Have a look at this test script:
>
> http://scripty.**walterdavisstudio.com/**testform.html<http://scripty.walterdavisstudio.com/testform.html>
>
> I am using Form.serialize rather than Form.Element.serialize, but there
> shouldn't be any differences between those at a functional level. Note that
> the result is made URL-safe by Prototype, so the raw text has all of the
> illegal characters (the square brackets, particularly) converted to their
> UTF-8 escape sequences.
>
> Walter
>
>
> On Jul 3, 2011, at 5:04 PM, Phil Petree wrote:
>
>  Thanks for the extra eyes Walter!
>>
>> For me the first process is to get it to work, then optimize it.
>>
>> In this case I had changed sectedOptions[] back to selectedOptions and
>> added an <option> just to test and make sure it wasn't something I was doing
>> in the javascript... and the .php file just logs the variables using
>> error_log(print_r($_POST, true));
>>
>> Right now, the biggest problem is just getting ANY selectedOptions to show
>> up in the POST!  I thought it might be the multiple="multiple' setting as
>> I've seen it that way and as the specs require as just MULTIPLE and neither
>> way works.
>>
>> Right now its set as selectedOptions[] and MULTIPLE and I still get
>> nothing serialized.
>>
>> On Sun, Jul 3, 2011 at 4:39 PM, Walter Lee Davis <wa...@wdstudio.com>
>> wrote:
>> Looking at your code, you're not using a Prototype-flavored accessor for
>> your object, so it's probably not going to work the way I was explaining. If
>> you get a reference to your form field with $('selectedOptions') rather than
>> using the long-hand (harder to type) 
>> document.getElementById('**selectedOptions'),
>> then you will also have access to .getValue(), or its shortened form $F().
>> Pass either of those a reference to an extended form element (extended here
>> meaning that Prototype has grabbed it and pumped it full of juicy new
>> features), and you will be able to do lots of magick with it, including read
>> its value(s) in a clean and browser-safe manner.
>>
>> But you have a much larger problem here: your form field (select) is named
>> selectedOptions rather than selectedOptions[], which means that PHP can't do
>> anything with it. If you post such a field to the server, you will only get
>> the last value sent, because the values in your form submission will look
>> like this:
>>
>> ...&selectedOptions=foo&**selectedOptions=bar&**selectedOptions=baz&**
>> selectedOptions=boo&...
>>
>> so each input will overwrite the last, with the net effect being that
>> selectedOptions only equals boo.
>>
>> If you name the field selectedOptions[], then no matter how many values
>> the user chooses, they can all be read by the server, because the form will
>> arrive with selectedOptions = Array('foo','bar','baz','boo')**.
>>
>> Walter
>>
>>
>> On Jul 3, 2011, at 4:13 PM, Phil Petree wrote:
>>
>> I suspect you're right... its probably something really stupid...
>>
>> Here's the specific html for the two listboxes (see below for the rest):
>>
>>  <fieldset>
>>   <legend>Step 4: Pick the distribution zone(s)</legend>
>>   <div class='div_left'>
>>   <label class='column' id='labavail_zones' for='ajavail_zones'>Available
>> Zones</label><?php fill_pdzones(); ?>
>>   </div>
>>   <div class='div_center'>
>>   <input type='button' value='&nbsp;>>' onclick="addAll()"><br>
>>   <input type='button' value='&nbsp;>&nbsp;' onclick="addAttribute()"><br>
>>   <input type='button' value='&nbsp;<&nbsp;' onclick="delAttribute()"><br>
>>   <input type='button' value='<<&nbsp;' onclick="delAll()">
>>   </div>
>>   <div class='div_right'>
>>   <label class='column' id='labdest_zones' 
>> for='selectedOptions'>**Destination
>> Zones</label>
>>   <select id='selectedOptions' name='selectedOptions' style="width:150px;"
>> size="4" multiple="multiple">
>>   <option value='whoohoo'>test</option>
>>   </select>
>>   </div>
>>  </fieldset>
>>
>> the first select is created and filled with this code:
>> function fill_pdzones()
>> {
>>  echo "<select id='availableOptions' name='availableOptions'
>> style='width:150px;' size='4' multiple='multiple'>\n";
>>  // boring stuff omitted
>>
>>  $result = sql_query($query);
>>  while( $record = mysql_fetch_array($result, MYSQL_ASSOC ) )
>>  {
>>   $zone_name = $record['zone_name'];
>>   echo "<option value='$zone_name'>$zone_name<**/option>\n";
>>  }
>>  // close off this select
>>  echo "</select>\n";
>> }
>>
>> The javascript used to move items between list boxes is this:
>> // JavaScript Document
>> var selectedList;
>> var availableList;
>> function createListObjects(szSource, szDestination)
>> {
>>   availableList = document.getElementById(**szSource);
>>   selectedList = document.getElementById(**szDestination);
>> }
>> function delAttribute(){
>>  var selIndex = selectedList.selectedIndex;
>>  if(selIndex < 0)
>>     return;
>>  availableList.appendChild(
>>     selectedList.options.item(**selIndex))
>>  selectNone(selectedList,**availableList);
>>  setSize(availableList,**selectedList);
>> }
>> function addAttribute(){
>>  var addIndex = availableList.selectedIndex;
>>  if(addIndex < 0)
>>     return;
>>  selectedList.appendChild(
>>     availableList.options.item(**addIndex));
>>  selectNone(selectedList,**availableList);
>>  setSize(selectedList,**availableList);
>> }
>> function setTop(top){
>>  document.getElementById
>>     ('someLayer').style.top = top;
>> }
>> function setLayerTop(lyr,top){
>>  lyr.style.top = top;
>> }
>> function setSize(list1,list2){
>>   list1.size = getSize(list1);
>>   list2.size = getSize(list2);
>> }
>> function selectNone(list1,list2){
>>   list1.selectedIndex = -1;
>>   list2.selectedIndex = -1;
>>   addIndex = -1;
>>   selIndex = -1;
>> }
>> function getSize(list){
>>   /* Mozilla ignores whitespace,
>>      IE doesn't - count the elements
>>      in the list */
>>   var len = list.childNodes.length;
>>   var nsLen = 0;
>>   //nodeType returns 1 for elements
>>   for(i=0; i<len; i++){
>>       if(list.childNodes.item(i).**nodeType==1)
>>           nsLen++;
>>   }
>>   if(nsLen<2)
>>       return 2;
>>   else
>>       return nsLen;
>> }
>> function delAll(){
>>   var len = selectedList.length -1;
>>   for(i=len; i>=0; i--){
>>       availableList.appendChild(**selectedList.item(i));
>>   }
>>   selectNone(selectedList,**availableList);
>>   setSize(selectedList,**availableList);
>>
>> }
>> function addAll(){
>>   var len = availableList.length -1;
>>   for(i=len; i>=0; i--)
>>   {
>>       selectedList.appendChild(**availableList.item(i));
>>   }
>>   selectNone(selectedList,**availableList);
>>   setSize(selectedList,**availableList);
>>
>> }
>> function showSelected()
>> {
>>   var optionList = document.getElementById("**selectedOptions").options;
>>   var data = '';
>>   var len = optionList.length;
>>   for(i=0; i<len; i++)
>>   {
>>           data += ',';
>>       data += optionList.item(i).value;
>>   }
>>   alert(data);
>> }
>>
>>
>> On Sat, Jul 2, 2011 at 6:29 PM, Walter Lee Davis <wa...@wdstudio.com>
>> wrote:
>>
>> On Jul 2, 2011, at 6:09 PM, Phil Petree wrote:
>>
>> When making the following ajax call:
>> new Ajax.Updater( 'result', url, {method: 'post', parameters:
>> $('myform').serialize(), onSuccess: fill_in, onFailure: ajax_err, on0:
>> ajax_err});
>> I was wondering why my listbox contents were not showing up on the
>> server... stepping through the Ajax.Updater call in prototype I found
>> parameters was set/serialized as follows:
>>
>> parameters "status=insert&record=&userid=**2&police=0&injury=0&damage=0&*
>> *occured=07%2F02%2F2011&**message_text=woo%20hoo&**
>> countdown=1017&lat=&lon=&**fixed=2020%20NE%2056th%20St.%**
>> 2C%20Ft.%20Lauderdale%2C%20FL%**2033308" String
>>
>> At the end, where "String" is dangling like a participle, should be the
>> name of a listbox and the single option in the listbox.
>>
>> Would someone kindly tell me what I have to do to get a listbox to
>> serialize?
>>
>> Thanks!
>>
>> It should just do. Can you please post the complete HTML for that select?
>> My guess is that the HTML isn't valid somehow, but String is a mighty funny
>> output for the getValue() function.
>>
>> Walter
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Prototype & script.aculo.us" group.
>> To post to this group, send email to prototype-scriptaculous@**
>> googlegroups.com <prototype-scriptaculous@googlegroups.com>.
>> To unsubscribe from this group, send email to prototype-scriptaculous+**
>> unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@googlegroups.com>
>> .
>> For more options, visit this group at http://groups.google.com/**
>> group/prototype-scriptaculous?**hl=en<http://groups.google.com/group/prototype-scriptaculous?hl=en>
>> .
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Prototype & script.aculo.us" group.
>> To post to this group, send email to prototype-scriptaculous@**
>> googlegroups.com <prototype-scriptaculous@googlegroups.com>.
>> To unsubscribe from this group, send email to prototype-scriptaculous+**
>> unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@googlegroups.com>
>> .
>> For more options, visit this group at http://groups.google.com/**
>> group/prototype-scriptaculous?**hl=en<http://groups.google.com/group/prototype-scriptaculous?hl=en>
>> .
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Prototype & script.aculo.us" group.
>> To post to this group, send email to prototype-scriptaculous@**
>> googlegroups.com <prototype-scriptaculous@googlegroups.com>.
>> To unsubscribe from this group, send email to prototype-scriptaculous+**
>> unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@googlegroups.com>
>> .
>> For more options, visit this group at http://groups.google.com/**
>> group/prototype-scriptaculous?**hl=en<http://groups.google.com/group/prototype-scriptaculous?hl=en>
>> .
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Prototype & script.aculo.us" group.
>> To post to this group, send email to prototype-scriptaculous@**
>> googlegroups.com <prototype-scriptaculous@googlegroups.com>.
>> To unsubscribe from this group, send email to prototype-scriptaculous+**
>> unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@googlegroups.com>
>> .
>> For more options, visit this group at http://groups.google.com/**
>> group/prototype-scriptaculous?**hl=en<http://groups.google.com/group/prototype-scriptaculous?hl=en>
>> .
>>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-scriptaculous@**
> googlegroups.com <prototype-scriptaculous@googlegroups.com>.
> To unsubscribe from this group, send email to prototype-scriptaculous+**
> unsubscr...@googlegroups.com<prototype-scriptaculous%2bunsubscr...@googlegroups.com>
> .
> For more options, visit this group at http://groups.google.com/**
> group/prototype-scriptaculous?**hl=en<http://groups.google.com/group/prototype-scriptaculous?hl=en>
> .
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.

Reply via email to