Do you agree that my test page shows the serialized multiple select
input data? I think you need to strip your test page back and back
until you find the moment where it works. Something, somewhere,
probably outside of the script you've shown here, is causing this to
go sideways.
You have a lot of code lower on in your example that use non-Prototype
methods to find and iterate elements. You might have introduced a
problem there, particularly if this works in one browser and not
another.
Walter
On Jul 3, 2011, at 5:55 PM, Phil Petree wrote:
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
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=' >>' onclick="addAll()"><br>
<input type='button' value=' > '
onclick="addAttribute()"><br>
<input type='button' value=' < '
onclick="delAttribute()"><br>
<input type='button' value='<< ' 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
.
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
.
--
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
.
--
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
.
--
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
.
--
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
.
--
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
.
--
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.
